Vue.js

Parkour uses the Vue.js frontend framework for the development of new standalone features. Vue.js is a progressive JavaScript framework for building user interfaces. Vue.js is known for its simplicity and ease of integration with other libraries or existing projects.

Install Node.js

Vue.js requires Node.js to run. We can install Node.js version 20 as follows:

Ubuntu 20 & Debian:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

CentOS 7:

curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs

Verify that Node.js is installed:

node -v

Install Node Modules

The next step is to fetch the packages required for our application to run, which are listed in the package.json file.

cd parkour2/frontend
npm install

Run app on server

After installing the node modules, our application is ready to run. We can start it in either development mode or production mode using either of the following commands:

npm run start-dev

• Runs the app with development settings on port 5174.

npm run start-prod

• Runs the app for production, meaning it first build and then deploys files, listening on port 5173.

make prod

• Deploys Parkour2 using Docker, like in the previous command. But port is mapped, from 5173 to 9980 on the host.

Note

If you see a blank page upon running the app, it's because the app's home page (e.g. localhost:5174/) is empty. Go to any of the defined routes to access different submodules of the app (e.g. localhost:5174/vue/duties).

Troubleshooting

In case of errors related to node modules, one way to troubleshoot is by deleting the node_modules folder and package-lock.json file in the parkour2/frontend and having a fresh installation of node modules.

cd parkour2/frontend
rm -rf node_modules package-lock.json
npm install