RAMPVIS user interface implemented in React.
- This is tested in Ubuntu 22.04 and WSL2
- Start the backend server; please visit https://github.com/ScottishCovidResponse/rampvis-api
Following commands will stop the container and and clean the image.
docker-compose stop
docker-compose rm
docker rmi rampvis-ui-rampvis-ui
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.
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.
-
Build the app
yarn build
-
Make sure that port 3000 is not used and launch a simple HTTP server for the just-created
out
directory.npx serve out
-
Navigate to http://localhost:3000 in your browser.
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.
-
Build the container (see Dockerfile):
docker build . --tag=rampvis-ui:local
-
Make sure that port 3000 is not used and start the container:
docker run -p 3000:80 rampvis-ui:local
-
Navigate to http://localhost:3000 in your browser.
- Bootstrapped with Next.js
- Using React MUI dashboard style