Skip to main content

Local Hosting

A Pro or Enterprise plan is required to host WebAR projects on your own web servers.

To purchase a Pro plan, please see https://www.8thwall.com/docs/legacy/guides/account-settings/#purchase-plan

Getting started​

Follow the getting started guide by cloning self-hosted sample projects from the 8th Wall Github Repository.

To develop locally you need Node.js and npm installed. If you don't already have Node.js and npm installed, get it here.

  1. Download the source code from the 8th Wall Github Repository and cd into an example of your choice (aframe is recommended for beginners).
  2. Replace the app key in index.html with your app key from the project settings page in the 8th Wall console.
  3. Authorize access to your app key on your device by authorizing the device or whitelisting the domain (localhost / IP address).
  4. Serve a project directory on your local network over HTTPS with http-server. See Serve projects over HTTPS.
  5. Connect to your sever from your device, accept certificate warnings and camera permissions. See View Project on iOS or View Project on Android.

Serve projects over HTTPS​

Browsers require HTTPS certificates to access the camera. Use http-server to serve project directories with HTTPS.

First, you need to make sure that openssl is installed, and you have key.pem and cert.pem files. You can generate them using this command:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

You will be prompted with a few questions after entering the command. Use 127.0.0.1 as value for Common name if you want to be able to install the certificate in your OS's root certificate store or browser so that it is trusted.

This generates a cert-key pair and it will be valid for 3650 days (about 10 years).

Then you can run http-server with -S for enabling SSL and -C for your certificate file:

npx http-server [project-path] -S -C cert.pem

Example:

npx http-server gettingstarted/aframe/ -S -C cert.pem

ServeLocally

NOTE: The first IP address listed is 127.0.0.1:8080 (which is the loopback device aka "localhost") and your mobile phone won't be able to connect to that IP address directly. Please use one of the other IP addresses.

WINDOWS USERS: Run the http-server command using a standard Command Prompt window (cmd.exe). The script may generate errors if run from PowerShell.

Learn more in the http-server documentation.

View Project on iOS​

  1. Open Safari on iOS 11+, and connect to one of the “Available on” URLs. Note: Safari will complain about the SSL certificates, but you can safely proceed.

IMPORTANT: Make sure to copy the entire "Available on" URL into your browser, including both the "https://" at the beginning and port number at the end.

Example: https://10.0.0.99:8080

  1. Click "visit this website":

iOSConnect1

  1. Click "Show Details":

iOSConnect2

  1. Click "Visit Website":

iOSConnect3

  1. Finally, click "Allow" to grant camera permissions and start viewing the sample AR experience:

iOSConnect4

View Project on Android​

  1. Open Chrome, a Chrome-variant (e.g. Samsung browser) or Firefox

IMPORTANT: Make sure to copy the entire "Available on" URL into your browser, including both the "https://" at the beginning and port number at the end.

Example: https://10.0.0.99:8080

  1. Chrome Example: The browser will complain that the cert is invalid, simply click 'ADVANCED' to proceed:
AndroidConnect1
  1. Click "PROCEED TO ... (UNSAFE)":
AndroidConnect2