npm)docker-compose up -d
Frontend, built with Docker, with routes handled based on the path: http://localhost
Backend, URLs prefixed with: http://localhost/api/
Traefik UI, to see how the routes are being handled by the proxy: http://localhost:8090
To check the logs, run:
docker-compose logs
To check the logs of a specific service, add the name of the service, e.g.:
docker-compose logs backend
If your Docker is not running in localhost (the URLs above wouldn't work) check the sections below on Development with Docker Toolbox and Development with a custom IP.
During development, you can change Docker Compose settings that will only affect the local development environment, in the file docker-compose.override.yml.
The changes to that file only affect the local development environment, not the production environment. So, you can add "temporary" changes that help the development workflow.
For example, the directory with the backend code is mounted as a Docker "host volume", mapping the code you change live to the directory inside the container. That allows you to test your changes right away, without having to build the Docker image again. It should only be done during development, for production, you should build the Docker image with a recent version of the backend code. But during development, it allows you to iterate very fast.
There is also a command override that runs /start-reload.sh (included in the base image) instead of the default /start.sh (also included in the base image). It starts a single server process (instead of multiple, as would be for production) and reloads the process whenever the code changes. Have in mind that if you have a syntax error and save the Python file, it will break and exit, and the container will stop. After that, you can restart the container by fixing the error and running again:
$ docker-compose up -d
There is also a commented out command override, you can uncomment it and comment the default one. It makes the backend container run a process that does "nothing", but keeps the container alive. That allows you to get inside your running container and execute commands inside, for example a Python interpreter to test installed dependencies, or start the development server that reloads when it detects changes, or start a Jupyter Notebook session.
To get inside the container with a bash session you can start the stack with:
$ docker-compose up -d
and then exec inside the running container:
$ docker-compose exec backend bash
You should see an output like:
root@7f2607af31c3:/app#
that means that you are in a bash session inside your container, as a root user, under the /app directory.
There you can use the script /start-reload.sh to run the debug live reloading server. You can run that script from inside the container with:
$ bash /start-reload.sh
...it will look like:
root@7f2607af31c3:/app# bash /start-reload.sh
and then hit enter. That runs the live reloading server that auto reloads when it detects code changes.
Nevertheless, if it doesn't detect a change but a syntax error, it will just stop with an error. But as the container is still alive and you are in a Bash session, you can quickly restart it after fixing the error, running the same command ("up arrow" and "Enter").
...this previous detail is what makes it useful to have the container alive doing nothing and then, in a Bash session, make it run the live reload server.
frontend directory, install the NPM packages and start the live server using the npm scripts:cd frontend
npm install
npm run serve
Then open your browser at http://localhost:8080
Notice that this live server is not running inside Docker, it is for local development, and that is the recommended workflow. Once you are happy with your frontend, you can build the frontend Docker image and start it, to test it in a production-like environment. But compiling the image at every change will not be as productive as running the local development server.
Check the file package.json to see other available options.
If you have Vue CLI installed, you can also run vue ui to control, configure, serve and analyse your application using a nice local web user interface.
If you are only developing the frontend (e.g. other team members are developing the backend) and there is a staging environment already deployed, you can make your local development code use that staging API instead of a full local Docker Compose stack.
To do that, modify the file ./frontend/.env, there's a section with:
VUE_APP_ENV=development
# VUE_APP_ENV=staging
# VUE_APP_ENV=development
VUE_APP_ENV=staging