About

RAMPVIS user interface implemented in React.

Getting Started

• This is tested in Ubuntu 22.04 and WSL2
• Start the backend server; please visit https://github.com/ScottishCovidResponse/rampvis-api

Stop & Clean (optional)

Following commands will stop the container and and clean the image.

docker-compose stop
docker-compose rm
docker rmi rampvis-ui-rampvis-ui

Start Development Instance in Container

Start the server

docker-compose up -d

# see the log to check if the server has started
docker logs rampvis-ui

Navigate to localhost:3000 to open the UI.

Start Development Instance Locally

Please make sure you have Node.js (LTS version) and Yarn (npm install --global yarn).

node --version
## should output ≥ 14.17

yarn --version
## should output ≥ 1.22

Install the dependencies and run the app in development mode using production APIs (you don’t need to start the development instances of the API endpoints).

yarn install
yarn dev

While the web server is running, you can open http://localhost:3000 in your browser to view the app. To stop the server, press CTRL+C in the terminal.

If you want to use remote API endpoints instead of the local ones remove the .env.local.

---

The URLs may differ from the examples above depending on your server settings.

Note that you need to restart the server (yarn dev) for the changes to take effect. See Next.js docs → Environment Variables for more info.

Local production build

1. Build the app

   yarn build

2. Make sure that port 3000 is not used and launch a simple HTTP server for the just-created out directory.

   npx serve out

3. Navigate to http://localhost:3000 in your browser.

Deployment

Running yarn build produces a static HTML export, which means that the app can be served without Node.js. One of the options is to use nginx with the following example config: nginx.conf. It maps URLs like /my/page to files like /my/page.html, removes trailing slashes and applies several output-specific optimisations. As a result, production URLs match the ones we see during yarn dev and npx serve out.

It is possible to locally test nginx.conf after running yarn build. This requires Docker.

1. Build the container (see Dockerfile):

   docker build . --tag=rampvis-ui:local

2. Make sure that port 3000 is not used and start the container:

   docker run -p 3000:80 rampvis-ui:local

3. Navigate to http://localhost:3000 in your browser.

References

• Bootstrapped with Next.js
• Using React MUI dashboard style

Earlier Prototypes

• v.0.1 - Angular
• v.0.2 - Plain HTML/CSS