Skip to content

Running with Docker

This app uses Docker to containerize both the frontend and backend applications. This helps to ensure consistency across different environments and simplifies the setup process.

This guide will help you run the app using Docker.

Docker Installation

If you don't have Docker installed, follow the instructions here to install Docker desktop on your device.

About Dockerfiles

The project contains two Dockerfiles: one for the backend (backend/Dockerfile) and one for the frontend (frontend/Dockerfile).

The purpose of these Dockerfiles is to define the environment and dependencies needed to run each part of the application.

Each Dockerfile has two important targets: dev and final. The dev target is used while you're actually building and running the containers during development. The final target emulates the same production environment used in Azure. For example, the frontend final target uses Azure Static Web Apps' build environment to ensure the same environment is used.

About Docker Compose

Docker Compose is a tool that allows us to define and run multi-container Docker apps.

In a classic setup, you would have to build both images separately and run them. This is a long and tiresome process. Also, it have multiple points of failure, like failing to pass the correct env files.

Docker Compose erases all these problems by allowing us to have a single file defining both containers, their build process, and how they connect to each other.

The system has two Docker Compose files:

  • compose-dev.yaml: This file is used during development. It uses the dev target from both Dockerfiles to build and run the containers. It also mounts the source code as volumes. This activates hot-reloading in the apps makeing development much easier.
  • compose.yaml: This file is used to emulate the production environment. It uses the final target from both Dockerfiles to build and run the containers. You should use this to test the production environment locally before deploying to Azure.

Running the Containers

If you are currently working on the project, you should use the compose-dev.yaml file. To run the containers, use the following command:

docker compose -f compose-dev.yaml up --build

If you want to test the production environment, use the compose.yaml file instead:

docker compose up --build

Accessing the Application

Once the containers are running, you can access the frontend application in your web browser at http://localhost:5173.