Link Search Menu Expand Document
O-FISH Docs

Build Web App

Build the web app:

  1. Get the code
    1. Get the code from https://github.com/WildAid/o-fish-web 
      git clone https://github.com/WildAid/o-fish-web.git

      OR
      Download and extract the code

  2. Go into the o-fish-web directory (if you used git clone) or the o-fish-web-main directory (if you downloaded the code)

  3. Copy src/config.js.tmpl to src/config.js
  4. Edit src/config.js and paste:
    ‘Realm App ID’ into the realmAppId field
    ‘mongodb-atlas’ into the realmServiceName field
    ‘wildaid’ into the database field

  5. On commandline, run:
    npm install

To build and host the web application locally - recommended for sandbox use and testing

On commandline run:

npm start

Unless otherwise notified, the site will be hosted at http://localhost:3000 - you can skip the rest of this page and proceed to test your changes.

To build the web application for hosting in Realm - recommended for a more permanent instance, or repeated testing

  1. On commandline, run: 
    npm run build

    When it completes, a “build” directory will be made, with the following files and “static” directory:
    asset-manifest.json
    index.html
    logo192.png
    manifest.json
    precache-manifest.c369024c97162a63d34202304b2410db.js
    robots.txt
    service-worker.js
    static

  2. In the Realm UI in your browser, click on “Hosting” on the left-hand side under “MANAGE”
    'Hosting' under 'Manage' is to be clicked

  3. You should see this page: Hosting Page appears

  4. Upload everything inside the build folder by dragging and dropping the files and static directory. The green UPLOAD FILES button does not support uploading a directory like the “static” directory. It is OK to overwrite existing files. When complete, it should look like this:
    Shows all the uploaded files in the build folder

  5. Run Actions/Flush CDN Cache, click “Flush Cache” when prompted.
    How to click the 'Flush CDN Cache' when prompted

  6. Make note of the URL on the Hosting page, this is your website! Paste it to the “URL” field in the template
    Where to place the URL in the template

If you have a blue bar that says:
“Your site is in the process of being created, which may take up to 15 minutes.”
then wait until that is gone before proceeding to test your changes.

{ } { }


Troubleshooting - Up to main build page