Setting the correct environment variables

By default, the app uses .env in the root directory for environment variables. When you follow the guides on this page, make sure you are using the default .env file as seen on the repo, and that you have not replaced it with .env.local.

Running the visualization engine

First, make sure all dependencies are installed by entering the command npm install.

Enter the command npm run dev-visual to run the API and UI servers in the terminal.

Open the webpage with the URL http://localhost:8000/.

You should see the visualization page now where you can upload and interact with any SVG file that you must source yourself.

Testing in debug mode

Simply use the URL http://localhost:8000/. For this, you only need the UI server running because no API calls are made. All features are accessible immediately in this mode and you can save the modified SVG locally.

Testing other endpoints

For these you will need both the API and UI servers running. You will also need the visualization MySQL docker container running. Refer to the separate tutorial page on this if you are unsure how to do this.

The URL http://localhost:8000/{id}, where {id} is the ID of a visualization in the database, will load the page as a participant for the specific visualization.

The URL http://localhost:8000/{id}?editor=true, where {id} is the ID of a visualization in the database, will load the page as an editor for the specific visualization. Uploading a file on this page will change the file in the database for the associated ID.

Running the login page

First, make sure all dependencies are installed by entering the command npm install.

Run the MySQL docker container. Refer to the separate tutorial page on this if you are unsure how to do this.

Enter the command npm run dev-main to run the API and UI servers in the terminal.

Open the webpage with the URL http://localhost:5000/.

You should see the login page now which you are free to navigate through.