Sero-can-webapp

Code for Serotracker.com.

Table of contents

• Sero-can-webapp
• Table of contents
• Set up
  • Installing Node & NPM
    • macOS/ Linux / WSL
    • Windows
  • Local Development Setup
    • Setting up the Application
    • Running the Application Locally
      • Alternative 1: Using the Terminal
      • Alternative 2: Using VS Code Configurations
• Github Pages/Heroku Deployment
  • Adding Secrets
    • GitHub
    • Heroku
  • Staging Deployment
• Continuous Integration

Set up

Installing Node & NPM

macOS/ Linux / WSL

We recommend using Node Version Manager (nvm), which is a command line tool that allows you to quickly install, use, and switch between different versions of node. Using your terminal, follow these instructions:

1. Install curl (a tool used for downloading content from the internet in the command-line)

• macOS (homebrew) brew install curl
• Ubuntu/WSL (apt) sudo apt-get install curl

2. Install NVM. The following command will download version 0.39.1 of nvm. Check nvm's official GitHub projects page for the latest release of NVM.

• Bash: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
• Zsh: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh

3. To verify your installation, run nvm -v. You may need to source your shell's config file using source ~/.bash_profile or source ~/.zshrc
4. You can list which versions of Node are currently installed (should be none at this point) with nvm ls.
5. Install version 12.16.0 of Node.js using nvm install 12.16.0. You can also install the LTS release using nvm install --lts and the current release using nvm install node.
6. List what versions of Node are installed with nvm ls.
7. You can specify which version of NVM you'd like to use by running nvm use <VERSION>. For this project, we want to use version 12.16.0, so run nvm use v12.16.0

Windows

Node.js suffers from extreme performance issues on native Windows, so we recommend installing it on Windows Subsystem for Linux (WSL). Using your WSL terminal, follow the steps outlined in the macOS / Linux / WSL section. Once you've completed these steps, follow the Install Visual Studio Code section of Microsoft's Official Guide to installing Node.js on WSL to configure Visual Studio Code for working with WSL.

Local Development Setup

Setting up the Application

1. In your terminal, clone the sero-can-webapp repo by running git clone https://github.com/serotracker/sero-can-webapp.git
2. Navigate to the root directory of sero-can-webapp with cd sero-can-webapp
3. Install project dependencies with npm install. Note, this only needs to be run when you initially setup the repository and when packages are updated/added/removed.

Running the Application Locally

Alternative 1: Using the Terminal

1. Set the following environment variables: REACT_APP_ROUTE, REACT_APP_MAPBOX_API_KEY. Ask a member of the dev team for these values. Read the following guides for instructions on how to set environment variables on macOS / Linux / WSL.
2. Run the application locally via npm start. This should cause the app to open in a browser window at http://localhost:3000

Alternative 2: Using VS Code Configurations

1. Open the repo in VS Code
2. Create a folder in the root directory of this repo called .vscode
3. Create a launch.json file within that folder and paste the following into it

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Run app pointing to prod",
        "runtimeVersion": "12.16.0",
        "runtimeExecutable": "npm",
        "runtimeArgs": ["start"],
        "port": 3000,
        "env": {
          "REACT_APP_ROUTE": "KEY",
          "REACT_APP_MAPBOX_API_KEY": "KEY"
        }
      }
    ]
}

4. Simply click on the green triangle button highlighted in the image below to run the application

Github Pages/Heroku Deployment

Deployment of static assets for the application occurs as follows:

• Each push to master triggers a deployment to GitHub Pages. The GH action used is: JamesIves/github-pages-deploy-action@releases/v3
• Each push to staging-1, staging-2, and staging-3 triggers a deployment to Heroku. The GH action used is: akhileshns/[email protected]

The full configurations can be viewed here.

Adding Secrets

GitHub

Refer to creating encrypted secrets for a repository. After adding secrets, they can be accessed in a deployment configuration in the following manner: ${{ secrets.<SECRET_NAME> }}. For example, see how the Mapbox API key is referenced here.

Heroku

Secrets are added via the Heroku Dashboard. Message Austin to get access to the account.
Refer to this article to add secrets via the Dashboard.

Staging Deployment

As mentioned above, there are three staging instances. Their corresponding links are outlined in the table below.

Instance	Link
staging-1	http://serotracker-staging-1.herokuapp.com
staging-2	http://serotracker-staging-2.herokuapp.com
staging-3	http://serotracker-staging-3.herokuapp.com

Continuous Integration

The following commands with GitHub Actions:

npm install
npm run build  

npm test

The CI configuration can be viewed here.
Job results can be viewed here.