Self-Hosted 8th Wall React App

How to set up and run a self-hosted 8th Wall React app, including running the boilerplate React app, adding necessary scripts and configurations, setting up local development with 8th Wall, and optionally removing security warnings by creating an SSL certificate.

Run the boilerplate react app.

npx create-react-app project-name
cd project-name && npm start

Add necessary scripts in public/index.html.
1. 8frame (all references should be made via window.AFRAME)
2. xrweb (replace app key with your own)
3. xrextras
Set up 8th Wall local development.
1. Whitelist your local domain (IP address / localhost, excluding port)
2. Set up HTTPS on the react-scripts start script.
  1. Add https to the start script in package.json.
```
"scripts": {
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```
  2. [optional] to remove the security warning, create an SSL certificate.
3. Add HTML loader to webpack config (node_modules/react-scripts/config).
```
module.exports = {
  module: {
    rules: [
      {
        test: /\\.html$/i,
        loader: "html-loader",
      },
    ],
  },
};
```
  or use a package like react-app-rewired to add the module in config-overrides.js:
```
npm install react-app-rewired
```

config-overrides.js (in root directory)

module.exports = function override(config, env) {
  // add html loader as a webpack config rule
  config.module.rules.push({
    test: /\\.html$/i,
    loader: "html-loader",
  })
  return config;
}

package.json

"scripts": {
    "start": "HTTPS=true react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

NOTE: The serve script does not work on some versions of node. To use the serve script, you may need to need to run:

npm run build
export NODE_OPTIONS=--openssl-legacy-provider

and execute the serve script pointing to the build folder.