5eTools Install Guide

v1.131.2

If you are here, you are interested in hosting the 5eTools website yourself, GREAT! if you are here for Roll20's project BetteR20 you should go HERE; or if you are looking for Foundry's projects Plutonium & Rivet you should go HERE

The website is designed to be able to require very little to no backend and is open source. The entire site is downloadable and can be deployed to work from your local machine, or be installed to a local or hosted web server for your own or your group's ease of access.

No need for SQL/database backend.
Powerful n' Portable

If you want to run the site from a local workstation; the following steps are provided to help those unfamiliar with how to setup a local webservice. Any webservice SHOULD suffice, but those listed are often the easiest ones (in order of easiest to harder) to use if you are not familiar with the process.

Devd

Download DevD
Review Install section for devd Guide, making sure to follow completely, and install it to the same directory as you've extracted 5eTools
Open terminal (command prompt)
Navigate to the directory you unzipped 5eTools into in the terminal window
Type .\devd.exe -ol .
Open localhost (http://localhost) or http://localhost/index.html in the root of webserver using a supported browser.

If you didn't make a mistake, the browser will likely open and pull the index.html, which needs to have been made before hand in order for the service to work

IF the browser says File:// you're not opening the page from the webserver. It won't work like that, so the main content will not be there.

Powershell

Review and copy the script from Github: PowerShellNTFSStaticFileServer.ps1 and paste it into notepad,
Save the file as a .ps1 file and place it in your unzipped 5etools directory
Right click the script > Run with PowerShell
Navigate to http://localhost:8080/index.html in your browser

Python

Install the latest python (preinstalled on Mac)
Open terminal (command prompt)
Navigate to the directory you unzipped 5eTools in the terminal window.
Type py -m http.server
- You may wish to specify SimpleHTTPServer ie py -m SimpleHTTPServer
- You may wish to specify a port at the end of the command ie either py -m SimpleHTTPServer 8080 or py -m http.server 8080, if you specify a port other than 80, you will need to include that in your localhost URL eg. (in the example above you'd need to use http://localhost:8080)

If you didn't make a mistake, open the browser - going to localhost and the browser will likely open and pull the index.html, which needs to have been made before hand in order for the service to work

IF the browser says File:// you're not opening the page from the webserver. It won't work like that, so the main content will not be there.

Synology NAS

With a Synology Diskstation NAS you can host a copy of the site accessible to any device connected to the same network. This guide assumes you already have a Synology NAS with at least one HDD installed, and are an Admin user.
Step 1: Install prerequisites

Navigate to Control Panel > User > Advanced and ensure "Enable User Home Service" is Enabled
Navigate to the Package Center and install the latest version of: Apache HTTP Server, PHP, and Web Station
Once installed open Web Station and select General Settings from the navigation panel on the left
Tick "Enable Personal Website"

HTTP back-end server: Apache HTTP Server

PHP: Default

Click Apply

Step 2: Upload Site

Each user will now have a folder in their home directory named "www"
Create a new user named "5e.tools"
Upload the unzipped 5etools files to /volume*/homes/5e.tools/www/

From any device connected to the same network navigate to either of the below URLs:

serverIP/~5e.tools
servername/~5e.tools

Wampserver

Step 1: Download WampServer

Installing all the individual pieces of software you need and configuring them to work together can be daunting. WampServer is a software package that can do almost all of this for you: it installs Apache, PHP, and MySQL, and provides a simple interface to use them.

Navigate to https://sourceforge.net/projects/wampserver/.
Click the word "download" at the top of the page.

Step 2: Install WampServer

Run the installer you just downloaded.
You can leave all the options on their defaults and just click through it, but STOP when you get to the page titled "Select Destination Location." This page is important. After you install WampServer, you will have to put all the files you want the server to "see" in a special folder inside the one you're selecting in this step. Therefore, you will want to install WampServer somewhere you can easily access. This is a matter of personal preference, but you may prefer to change the install location to somewhere like a subfolder of your Documents folder.
Once you're happy with where WampServer will install, click through the rest of the installer.
Add the folder where you unzipped the 5eTools content as a virtual host, and you're good.

Video Instructions

https://www.youtube.com/watch?v=lE6Y6M9xPLw

Common hosted platforms to deploy the site code for your use:

Hosted Server Install

InMotion Hosting

https://www.inmotionhosting.com/support/website/getting-started-guides/where-to-upload-files

Bluehost

https://my.bluehost.com/hosting/help/upload-site

GoDaddy

https://www.godaddy.com/help/upload-your-website-files-in-cpanel-hosting-16068?

Local Server Autoupdate Script

The following is a community member donation, used for keeping your local installation up to date. The Github mirror is often a version or more behind the main site, and for those wanting to make sure your local copy remains up to current release; this script seeks the file; checks its version number; then if the local copy is out of date -- grabs and extracts that new code into the same directory. (This is not official content and is provided to assist you, but not supported if it breaks.)

#!/usr/bin/env bash
FN=`curl -s -I https://get.5e.tools/release/|grep filename|cut -d"=" -f2 | awk '{print $1}'`
FN=${FN//[$'\t\r\n"']}
VER=`basename ${FN} ".zip"|sed 's/5eTools\.//'`
CUR=$(<version)
if [ "$VER" != "$CUR" ]
then
    echo -n $VER > version
    rm index.html
    curl -s -O -J https://get.5e.tools/release/
    unzip -q -o -u $FN
    find . -name \*.html -exec sed -i 's/"width=device-width, initial-scale=1"/"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/' {} \;
    cp 5etools.html index.html
    sed -i 's/<head>/<head>\n<link rel="apple-touch-icon" href="icon\/icon-512.png">/' index.html
    sed -i 's/navigator.serviceWorker.register("\/sw.js/navigator.serviceWorker.register("sw.js/' index.html
    sed -i 's/navigator.serviceWorker.register("\/sw.js/navigator.serviceWorker.register("sw.js/' 5etools.html
fi

#!/usr/bin/env bash
# based on: https://wiki.5e.tools/index.php/5eTools_Install_Guide
FN=`curl -s -I https://get.5e.tools/release/|grep filename|cut -d"=" -f2 | awk '{print $1}'`
FN=${FN//[$'\t\r\n"']}
echo "FN: $FN"
FN_IMG=`curl -s -I https://get.5e.tools/img/|grep filename|cut -d"=" -f2 | awk '{print $1}'`
FN_IMG=${FN_IMG//[$'\t\r\n"']}
echo "FN_IMG: $FN_IMG"
VER=`basename ${FN} ".zip"|sed 's/5eTools\.//'`
echo "VER: $VER"
CUR=$(<version)

echo " === Remote version: $VER"
echo " === Local version: $CUR"

if [ "$VER" != "$CUR" ]
then
  echo " === Local version outdated, updating..."
  echo -n $VER > version

  rm ./site/index.html 2> /dev/null || true

  echo " === Downloading new remote version..."
  cd ./download/
  curl --progress-bar -O -J https://get.5e.tools/release/ -C -
  curl --progress-bar -O -J https://get.5e.tools/img/ -C -
  cd ..

  echo " === Extracting site..."
  7z x ./download/$FN -o./site/ -y
  echo " === Extracting images..."
  7z x ./download/$FN_IMG -o./site/img -y
  mv ./site/img/tmp/5et/img/* ./site/img
  rm -r ./site/img/tmp

  echo " === Configuring..."
  cd ./site/
  find . -name \*.html -exec sed -i 's/"width=device-width, initial-scale=1"/"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/' {} \;
  cp 5etools.html index.html
  sed -i 's/<head>/<head>\n<link rel="apple-touch-icon" href="icon\/icon-512.png">/' index.html
  sed -i 's/navigator.serviceWorker.register("\/sw.js/navigator.serviceWorker.register("sw.js/' index.html
  sed -i 's/navigator.serviceWorker.register("\/sw.js/navigator.serviceWorker.register("sw.js/' 5etools.html

  echo " === Done!"
else
  echo " === Local version matches remote, no action."
fi

Mobile Platform

FOR MOBILE (online)

Bring up the 5e.tools site.

Click/Accept the Add 5eTools to Home screen

This preloads all the data locally. Images still pull from external sources.

- or -

Under Settings Choose - Add as App

FOR MOBILE (offline) (not officially supported)

Android

1️⃣ Install the web service app (https://play.google.com/store/apps/details?id=org.xeustechnologies.android.kws), take note of the "data directory path" (likely a folder name htdocs in the root of internal storage) and start the server once so that the app creates the necessary files on your device. Take note of the port where the webserver is running (likely 8000).

2️⃣ Move the extracted files from the 5etools zip into the public folder inside of your "data directory path" (e.g. htdocs/public)

3️⃣ With browser (Chrome/Firefox) point to the server with http://localhost/:<port>/5etools.html or whatever page you need.

iPhone/iOS

1️⃣ On the iPhone, go to Settings → Safari → Advanced and activate the switch “web inspector”:

2️⃣ Connect the phone to your MacBook using a lightning-to-USB cable.

3️⃣ On the MacBook, open up Safari and go to Develop → {NAME_OF_YOUR_IPHONE} and select “Connect via Network”:

4️⃣ Open up a terminal and run the command “ifconfig” to see the list of current network interfaces, and take note of the IP address of the last entry in the list:

5️⃣ On your phone, in Chrome/Firefox, use the IP address to access your locally running website. For example, if you use create-react-app, instead of going to http://localhost:3000, with the IP I got here, the address to use is http://169.254.145.56:3000 (don’t forget the http:// prefix):

How to autoload Homebrew Files into your local or server Install

You will need - the DEVELOPER package of the hosted install. (Following the directions outlined above for a standard install). The "production" version of the site (i.e. NOT the dev zip) has this feature disabled. You can re-enable it by replacing IS_DEPLOYED = \"X.Y.Z\"; in the file js/utils.js, with IS_DEPLOYED = undefined;

In the root of the site locate the 📂 Homebrew folder, place the homebrew files you wish to include automatically to your site within the folder. Find the 📝 index.json file and open it in a simple text editor, and locate this part of the file (for more information on JSON, see Homebrew)

"toImport": [	
]

and add names of the homebrew files for each file inside quotes at set of quotes (including a , at the end of each file name that has another filename following it.

EXAMPLE:

"toImport": [
    "Homebrew File1.json",
    "Homebrew File2.json",  
    "Homebrew File3.json"
]

Save the file 📝.

You are good to go now.

5eTools Install Guide

Contents

PC Install

Installing for use without Internet Access

Local Web Server

Hosted Server Install

Mobile Platform

How to autoload Homebrew Files into your local or server Install

Navigation menu

5etools Community Wiki

Personal tools

Namespaces

Variants

Views

Search

Navigation

5eTools

🍺Homebrew

Plutonium/Rivet

BetteR20

R20 Enhancement Suite (VTT es)

5eCrawler

Support

Tools & Resources

Other Projects

Tools