Introduction #

After setting everything up like described in the previous articles you should now have a working development environment. In this section I will explain how to use it. The most notable difference is, that we have all frontend files exposed and can make changes to them.

Starting the App #

Starting the app is a bit different when using the dev environment. We want to be able to make changes to our code and see them right away.

In production, V-Link.py is starting a server that will host the frontend. By default the address of the frontend is localhost:5173. To make things easier when developing we won’t be using the server from V-Link but Vite. This allows us to make code changes and see them in real time. So to start the app do this.

Open 2 terminals next to each other. In the first terminal type the following to run the vite server.

cd ~/development/v-link/frontend
npm run vite

In the 2nd terminal we will now start the app with some flags:

cd ~/development/v-link
python V-Link.py --vite --dev --nokiosk

To see precisely what these flags are doing you can also run the following command:

python V-Link.py --h

To summarize again: #

We started a Vite server to host our frontend instead of the app hosting it. We then launched the app and told it to use the vite server instead of the internal one.

After doing these steps you should see a browser window with the address “http://localhost:4001” and the running app. You can now make changes to the files in the /frontend folder and the Vite Server will automatically update the changed components.

If you are making changes to the python files you will have to restart the entire app once.