Link Search Menu Expand Document
O-FISH Docs

Build and Deploy to Test Charts

You have created and embedded a chart, so let’s build and deploy the web application to see that everything worked.

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.

  1. Go to your local website or the website with the URL from the template

  2. Login with your “App Admin username” and “App Admin password”

  3. If you can’t login, check:
    Make sure src/config.js exists and fields are set - especially realm-app-id
    The Realm user was created in the Realm
    The Realm user is in a document the wildaid.User collection and the Realm ID is correct

  4. Your browser’s inspector console may have more information about what went wrong.

Test to make sure the chart you embedded actually works. If it is not working, there is a section on Troubleshooting Charts.

Create more charts in the next guide!

{ } { }


Troubleshooting - Up to main build page