- Start the stack with Docker Compose:
docker compose up -d
- Now you can open your browser and interact with these URLs:
Frontend, built with Docker, with routes handled based on the path: http://localhost
Backend, JSON based web API based on OpenAPI: http://localhost/api/
Automatic interactive documentation with Swagger UI (from the OpenAPI backend): http://localhost/docs
Adminer, database web administration: http://localhost:8080
Traefik UI, to see how the routes are being handled by the proxy: http://localhost:8090
Note: The first time you start your stack, it might take a minute for it to be ready. While the backend waits for the database to be ready and configures everything. You can check the logs to monitor it.
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) you would need to use the IP or domain where your Docker is running.
By default, the dependencies are managed with Poetry, go there and install it.
From ./backend/
you can install all the dependencies with:
$ poetry install
Then you can start a shell session with the new environment with:
$ poetry shell
Make sure your editor is using the correct Python virtual environment.
Modify or add SQLModel models for data and SQL tables in ./backend/app/models.py
, API endpoints in ./backend/app/api/
, CRUD (Create, Read, Update, Delete) utils in ./backend/app/crud.py
.
There are already configurations in place to run the backend through the VS Code debugger, so that you can use breakpoints, pause and explore variables, etc.
The setup is also already configured so you can run the tests through the VS Code Python tests tab.
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.
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, this directory has another directory called "app" inside, that's where your code lives inside the container: /app/app
.
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.
To test the backend run:
$ bash ./scripts/test.sh
The tests run with Pytest, modify and add tests to ./backend/app/tests/
.
If you use GitHub Actions the tests will run automatically.
If your stack is already up and you just want to run the tests, you can use:
docker compose exec backend bash /app/tests-start.sh
That /app/tests-start.sh
script just calls pytest
after making sure that the rest of the stack is running. If you need to pass extra arguments to pytest
, you can pass them to that command and they will be forwarded.
For example, to stop on first error:
docker compose exec backend bash /app/tests-start.sh -x
When the tests are run, a file htmlcov/index.html
is generated, you can open it in your browser to see the coverage of the tests.
As during local development your app directory is mounted as a volume inside the container, you can also run the migrations with alembic
commands inside the container and the migration code will be in your app directory (instead of being only inside the container). So you can add it to your git repository.
Make sure you create a "revision" of your models and that you "upgrade" your database with that revision every time you change them. As this is what will update the tables in your database. Otherwise, your application will have errors.
- Start an interactive session in the backend container:
$ docker compose exec backend bash
-
Alembic is already configured to import your SQLModel models from
./backend/app/models.py
. -
After changing a model (for example, adding a column), inside the container, create a revision, e.g.:
$ alembic revision --autogenerate -m "Add column last_name to User model"
-
Commit to the git repository the files generated in the alembic directory.
-
After creating the revision, run the migration in the database (this is what will actually change the database):
$ alembic upgrade head
If you don't want to use migrations at all, uncomment the lines in the file at ./backend/app/core/db.py
that end in:
SQLModel.metadata.create_all(engine)
and comment the line in the file prestart.sh
that contains:
$ alembic upgrade head
If you don't want to start with the default models and want to remove them / modify them, from the beginning, without having any previous revision, you can remove the revision files (.py
Python files) under ./backend/app/alembic/versions/
. And then create a first migration as described above.
The email templates are in ./backend/app/email-templates/
. Here, there are two directories: build
and src
. The src
directory contains the source files that are used to build the final email templates. The build
directory contains the final email templates that are used by the application.
Before continuing, ensure you have the MJML extension installed in your VS Code.
Once you have the MJML extension installed, you can create a new email template in the src
directory. After creating the new email template and with the .mjml
file open in your editor, open the command palette with Ctrl+Shift+P
and search for MJML: Export to HTML
. This will convert the .mjml
file to a .html
file and now you can save it in the build directory.