base-starter

Author: Lulu-The-Narwhal

.env

@@ -6,7 +6,7 @@ DOMAIN=localhost
 # DOMAIN=localhost.tiangolo.com
 
 # Used by the backend to generate links in emails to the frontend
-FRONTEND_HOST=http://localhost:5173
+FRONTEND_HOST=http://localhost:5174
 # In staging and production, set this env var to the frontend host, e.g.
 # FRONTEND_HOST=https://dashboard.example.com
 
@@ -17,7 +17,7 @@ PROJECT_NAME="Full Stack FastAPI Project"
 STACK_NAME=full-stack-fastapi-project
 
 # Backend
-BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173,http://localhost.tiangolo.com"
+BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5174,https://localhost,https://localhost:5174,http://localhost.tiangolo.com"
 SECRET_KEY=changethis
 FIRST_SUPERUSER=admin@example.com
 FIRST_SUPERUSER_PASSWORD=changethis

backend/Dockerfile

@@ -22,9 +22,9 @@ ENV PATH="/app/.venv/bin:$PATH"
 
 # Install dependencies
 # Ref: https://docs.astral.sh/uv/guides/integration/docker/#intermediate-layers
+COPY uv.lock pyproject.toml /app/
+
 RUN --mount=type=cache,target=/root/.cache/uv \
-    --mount=type=bind,source=uv.lock,target=uv.lock \
-    --mount=type=bind,source=pyproject.toml,target=pyproject.toml \
     uv sync --frozen --no-install-workspace --package app
 
 COPY ./backend/scripts /app/backend/scripts
@@ -36,8 +36,6 @@ COPY ./backend/app /app/backend/app
 # Sync the project
 # Ref: https://docs.astral.sh/uv/guides/integration/docker/#intermediate-layers
 RUN --mount=type=cache,target=/root/.cache/uv \
-    --mount=type=bind,source=uv.lock,target=uv.lock \
-    --mount=type=bind,source=pyproject.toml,target=pyproject.toml \
     uv sync --frozen --package app
 
 WORKDIR /app/backend/

backend/app/core/config.py

@@ -34,7 +34,7 @@ class Settings(BaseSettings):
     SECRET_KEY: str = secrets.token_urlsafe(32)
     # 60 minutes * 24 hours * 8 days = 8 days
     ACCESS_TOKEN_EXPIRE_MINUTES: int = 60 * 24 * 8
-    FRONTEND_HOST: str = "http://localhost:5173"
+    FRONTEND_HOST: str = "http://localhost:5174"
     ENVIRONMENT: Literal["local", "staging", "production"] = "local"
 
     BACKEND_CORS_ORIGINS: Annotated[

compose.override.yml

@@ -10,8 +10,8 @@ services:
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
     ports:
-      - "80:80"
-      - "8090:8080"
+      - "81:80"
+      - "8091:8080"
     # Duplicate the command from compose.yml to add --api.insecure=true
     command:
       # Enable Docker in Traefik, so that it reads labels from Docker services
@@ -48,17 +48,17 @@ services:
   db:
     restart: "no"
     ports:
-      - "5432:5432"
+      - "5433:5432"
 
   adminer:
     restart: "no"
     ports:
-      - "8080:8080"
+      - "8082:8080"
 
   backend:
     restart: "no"
     ports:
-      - "8000:8000"
+      - "8001:8000"
     build:
       context: .
       dockerfile: backend/Dockerfile
@@ -90,18 +90,18 @@ services:
   mailcatcher:
     image: schickling/mailcatcher
     ports:
-      - "1080:1080"
-      - "1025:1025"
+      - "1081:1080"
+      - "1026:1025"
 
   frontend:
     restart: "no"
     ports:
-      - "5173:80"
+      - "5174:80"
     build:
       context: .
       dockerfile: frontend/Dockerfile
       args:
-        - VITE_API_URL=http://localhost:8000
+        - VITE_API_URL=http://localhost:8001
         - NODE_ENV=development
 
   playwright:
@@ -127,7 +127,7 @@ services:
       - ./frontend/blob-report:/app/frontend/blob-report
       - ./frontend/test-results:/app/frontend/test-results
     ports:
-      - 9323:9323
+      - 9324:9323
 
 networks:
   traefik-public:

compose.traefik.yml

@@ -3,9 +3,9 @@ services:
     image: traefik:3.6
     ports:
       # Listen on port 80, default for HTTP, necessary to redirect to HTTPS
-      - 80:80
+      - 81:80
       # Listen on port 443, default for HTTPS
-      - 443:443
+      - 444:443
     restart: always
     labels:
       # Enable Traefik for this service, to make it available in the public network

development.md

@@ -10,15 +10,15 @@ docker compose watch
 
 * Now you can open your browser and interact with these URLs:
 
-Frontend, built with Docker, with routes handled based on the path: <http://localhost:5173>
+Frontend, built with Docker, with routes handled based on the path: <http://localhost:5174>
 
-Backend, JSON based web API based on OpenAPI: <http://localhost:8000>
+Backend, JSON based web API based on OpenAPI: <http://localhost:8001>
 
-Automatic interactive documentation with Swagger UI (from the OpenAPI backend): <http://localhost:8000/docs>
+Automatic interactive documentation with Swagger UI (from the OpenAPI backend): <http://localhost:8001/docs>
 
-Adminer, database web administration: <http://localhost:8080>
+Adminer, database web administration: <http://localhost:8082>
 
-Traefik UI, to see how the routes are being handled by the proxy: <http://localhost:8090>
+Traefik UI, to see how the routes are being handled by the proxy: <http://localhost:8091>
 
 **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.
 
@@ -44,13 +44,13 @@ This is useful for:
 * Verifying email content and formatting
 * Debugging email-related functionality without sending real emails
 
-The backend is automatically configured to use Mailcatcher when running with Docker Compose locally (SMTP on port 1025). All captured emails can be viewed at <http://localhost:1080>.
+The backend is automatically configured to use Mailcatcher when running with Docker Compose locally (SMTP on port 1025). All captured emails can be viewed at <http://localhost:1081>.
 
 ## Local Development
 
 The Docker Compose files are configured so that each of the services is available in a different port in `localhost`.
 
-For the backend and frontend, they use the same port that would be used by their local development server, so, the backend is at `http://localhost:8000` and the frontend at `http://localhost:5173`.
+For the backend and frontend, they use the same port that would be used by their local development server, so, the backend is at `http://localhost:8001` and the frontend at `http://localhost:5174`.
 
 This way, you could turn off a Docker Compose service and start its local development service, and everything would keep working, because it all uses the same ports.
 
@@ -76,7 +76,7 @@ And then you can run the local development server for the backend:
 
 ```bash
 cd backend
-fastapi dev app/main.py
+fastapi dev app/main.py --port 8001
 ```
 
 ## Docker Compose in `localhost.tiangolo.com`
@@ -188,19 +188,19 @@ The production or staging URLs would use these same paths, but with your own dom
 
 Development URLs, for local development.
 
-Frontend: <http://localhost:5173>
+Frontend: <http://localhost:5174>
 
-Backend: <http://localhost:8000>
+Backend: <http://localhost:8001>
 
-Automatic Interactive Docs (Swagger UI): <http://localhost:8000/docs>
+Automatic Interactive Docs (Swagger UI): <http://localhost:8001/docs>
 
-Automatic Alternative Docs (ReDoc): <http://localhost:8000/redoc>
+Automatic Alternative Docs (ReDoc): <http://localhost:8001/redoc>
 
-Adminer: <http://localhost:8080>
+Adminer: <http://localhost:8082>
 
-Traefik UI: <http://localhost:8090>
+Traefik UI: <http://localhost:8091>
 
-MailCatcher: <http://localhost:1080>
+MailCatcher: <http://localhost:1081>
 
 ### Development URLs with `localhost.tiangolo.com` Configured
 
@@ -214,8 +214,8 @@ Automatic Interactive Docs (Swagger UI): <http://api.localhost.tiangolo.com/docs
 
 Automatic Alternative Docs (ReDoc): <http://api.localhost.tiangolo.com/redoc>
 
-Adminer: <http://localhost.tiangolo.com:8080>
+Adminer: <http://localhost.tiangolo.com:8082>
 
-Traefik UI: <http://localhost.tiangolo.com:8090>
+Traefik UI: <http://localhost.tiangolo.com:8091>
 
-MailCatcher: <http://localhost.tiangolo.com:1080>
+MailCatcher: <http://localhost.tiangolo.com:1081>

frontend/README.md

@@ -13,7 +13,7 @@ bun install
 bun run dev
 ```
 
-* Then open your browser at http://localhost:5173/.
+* Then open your browser at http://localhost:5174/.
 
 Notice that this live server is not running inside Docker, it's 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 building the image at every change will not be as productive as running the local development server with live reload.
 

frontend/playwright.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:5173',
+    baseURL: 'http://localhost:5174',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -85,7 +85,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'bun run dev',
-    url: 'http://localhost:5173',
+    url: 'http://localhost:5174',
     reuseExistingServer: !process.env.CI,
   },
 });

frontend/tests/reset-password.spec.ts

@@ -59,7 +59,7 @@ test("User can reset password successfully using the link", async ({
   let url = await page.getAttribute(selector, "href")
 
   // TODO: update var instead of doing a replace
-  url = url!.replace("http://localhost/", "http://localhost:5173/")
+  url = url!.replace("http://localhost/", "http://localhost:5174/")
 
   // Set the new password and confirm it
   await page.goto(url)
@@ -111,7 +111,7 @@ test("Weak new password validation", async ({ page, request }) => {
 
   const selector = 'a[href*="/reset-password?token="]'
   let url = await page.getAttribute(selector, "href")
-  url = url!.replace("http://localhost/", "http://localhost:5173/")
+  url = url!.replace("http://localhost/", "http://localhost:5174/")
 
   // Set a weak new password
   await page.goto(url)

frontend/vite.config.ts

@@ -19,4 +19,7 @@ export default defineConfig({
     react(),
     tailwindcss(),
   ],
+  server: {
+    port: 5174,
+  },
 })