You should have NodeJS installed as described in the Dependencies section of the tutorial start. Obtain a copy of the percept-frontend source code from GitHub and put it into any convenient directory. For example, cd $HOME && git clone https://github.com/Spatial-Data-Science-and-GEO-AI-Lab/percept-frontend && cd percept-frontend.
Copy src/config.js.sample to src/config.js and edit the values in the file according to the comments.
The contents of the configuration file look like this:
// URL root of the backend server, with the full domain name
const backendURL = 'http://<domain_name>/backend/api/v1';
// After a rating button is pushed, this is the number of milliseconds to wait
// before allowing another button push. To prevent accidental clicks.
const buttonReenableTimeout = 1000;
// The person responsible for managing GDPR related issues.
const gdprControllerName = "My Name";
// The contact e-mail for said GDPR manager.
const gdprControllerEmail = "My E-mail Address";
// END OF CONFIGURATION
// Export configuration:
module.exports = { backendURL, buttonReenableTimeout, gdprControllerName, gdprControllerEmail }
In the project directory, run: npm install
This should downloand and install all the NodeJS dependencies.
Recall that when you configured the image server you placed a ProxyPass directive inside the VirtualHost block, and you also did something similar for the backend. Now it is time to continue adding additional ProxyPass directives, for the frontend. Simply copy these lines into your Apache2 server configuration file immediately after the existing ProxyPass directives:
ProxyPassMatch "^/static/(css|js)/(.*)(js|css|map|txt)$" http://localhost:3000/static/$1/$2$3
ProxyPassMatch "^/(report|eval)$" http://localhost:3000/$1
ProxyPassMatch "^/(rate_sample.\.jpg)$" http://localhost:3000/$1
ProxyPassMatch "^/(mapillary_logo\.png)$" http://localhost:3000/$1
ProxyPassMatch "^/(favicon\.ico)$" http://localhost:3000/$1
ProxyPassMatch "^/(manifest\.json)$" http://localhost:3000/$1
ProxyPassMatch "^/(asset-manifest\.json)$" http://localhost:3000/$1
ProxyPassMatch "^/(robots\.txt)$" http://localhost:3000/$1
ProxyPassMatch "^/(logo...\.png)$" http://localhost:3000/$1
ProxyPassMatch "^/(index\.html)$" http://localhost:3000/$1
Reload your Apache configuration.
Within the percept-frontend directory you have two options for running the software. First, for testing and development, you can use the command:
npm run dev
This will run a development and debugging server that you can use to try out the app. Later on, when you are ready to deploy for production, you can instead run:
npm run build && serve -s build
This compiles a production version of the frontend app and begins serving it.
Either way, we suggest running this inside of a detachable terminal using a program like GNU screen, tmux, byobu or at the very least nohup so that it keeps running even if you close the terminal or disconnect your SSH session from the server.
You should now be able to navigate your web browser to https://<domain_name>/ to see if it works.