This is a practical example of a "basic" fullstack application. This application has been fully containerized to be run locally in development mode as well as for deployment to production. It is composed of the following services:

frontend - Basic React app bootstrapped with yarn create vite
backend - AdonisJS API Backend https://adonisjs.com
database - Postgres database
reverse_proxy - Traefik ingress controller handling reverse proxy for the frontend and backend applications.

Getting Started

Clone the repo and cd into the compose directory.

cp backend/.env.example backend/.env
docker compose up

The first time you run docker compose up it may take a few minutes as Docker will need to build images for the frontend and backend. Also there are some database migrations and seed data that need to happen. Those are handled by backend/dev-entrypoint.sh. This is handled for you automatically since it is baked into the image. Once everything is up you should be able to access the frontend at http://app.docker.localhost:8888 and the backend at http://app.docker.localhost:8888/api

Developing

When running the compose stack, the backend node_modules are isolated from your host system. This is common in dev environment setups. In this case it is advised to use a Dev container. The following video demonstrates starting a dev container by using the VSCode plugin.

Proxying and routes

You will notice that the backend is listening on http://0.0.0.0:3333/ but the frontend is making requests to /api/. This is designed to mimic how you would deploy something like this in production where the backend would be behind a reverse proxy. Traefik has some really nice middleware that allows us to easily tell it to route requests destined for /api to /. The bit that handles that are these labels:

    labels:
      - "traefik.http.middlewares.strip-api-prefix.stripprefix.prefixes=/api"
      - "traefik.http.routers.backend.rule=Host(`app.docker.localhost`) && PathPrefix(`/api`)"
      - "traefik.http.routers.backend.middlewares=strip-api-prefix@docker"

We are defining a middleware named strip-api-prefix using the built in strippreffix Traefik middleware. We are then telling it to remove /api from any requests it handles. We then attach that to our backend router.