Running the webapp

The default CMD in the Dockerfile above will launch the webapp ‘locally’ in the container and you can reach it via port http://localhost:8081/app.

This happens because yarn is launched with the dev script defined at web / app / package.json which will run vite.

Extract of yarn scripts configuration…

  "scripts": {
    "dev": "vite --port 8081 --base /app/",
...

In the above Dockerfile, this is defined in the default CMD

CMD ["yarn", "--cwd", "/code/web/app", "run", "dev", "--host"]

To launch the webapp just run the flamenco_dev container as shown below…

docker run -p 8081:8081 --name flamenco_dev_webapp -it flamenco_dev

root@240a664c69c1:/code# yarn --cwd /code/web/app run dev --host
yarn run v1.22.19
$ vite --port 8081 --base /app/ --host

  vite v2.9.1 dev server running at:

  > Local:    http://localhost:8081/app/
  > Network:  http://172.17.0.3:8081/app/

  ready in 803ms.

Note: localhost and 172.17.0.2 IP address in the above output is not the host localhost network. Although the Docker port-forwarding to the host will be accessible on the host.

To relaunch the container, you can either use dynamic-naming of containers or remove the flamenco_dev_webapp and flamenco_dev_manager containers from the Docker system.

docker rm flamenco_dev_webapp
docker rm flamenco_dev_manager

Troubleshooting

CORS and vue.js webapp

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8080/api/v3/configuration. (Reason: CORS request did not succeed). Status code: (null)

You may see a CORS error when running the Flamenco webapp locally in a development setting. This happens when the Flamenco Manager REST API is not available on port 8080.

If the Flamenco Manager is running and the REST API available this is a successfully Browser Console log.