Skip to content

Frontend Setup

This guide will walk you through setting up the React front-end for the Craft Your Startup Boilerplate project. The front-end uses TypeScript and is designed to work seamlessly with the back-end API built on FastAPI. The front-end is built within the same Docker container as the back-end, and no separate environment variables are required for the front-end.

Table of Contents

  1. Installing Dependencies
  2. Running the Development Server
  3. Connecting the Front-End to the Back-End
  4. Building and Deploying the Front-End (Docker Setup)

Installing Dependencies

Before running the front-end, you need to install the necessary dependencies. Ensure that you have Node.js and npm (or yarn) installed on your machine if you're running the front-end outside of the Docker container for local development.

  1. Navigate to the front-end directory:

    Bash
    1
    cd frontend

  2. Install dependencies:

    If you're using npm, run:

    Bash
    1
    npm install

    Or if you're using yarn, run:

    Bash
    1
    yarn install

Running the Development Server

Once dependencies are installed, you can run the development server to start working on the front-end.

  1. Run the development server:

    For npm:

    Bash
    1
    npm run dev

    For yarn:

    Bash
    1
    yarn dev

  2. Access the app:

    By default, the development server will start at http://localhost:5173. Open this URL in your browser to view the app.

The development server will automatically reload as you make changes to the code.

Connecting the Front-End to the Back-End

In the development environment, a proxy is configured to forward API requests from the front-end to the back-end.

  1. Proxy configuration in Vite:

The proxy is already configured in the vite.config.ts file to forward /api requests to the FastAPI server:

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8020/api',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

This proxy ensures that when you make requests to /api from the front-end, they are automatically forwarded to the back-end server running on http://localhost:8020.

  1. Production Setup:

In production, the front-end is built and served by the FastAPI back-end. The static files for the front-end are built in the same Docker container as the back-end and are served directly by FastAPI.

Building and Deploying the Front-End (Docker Setup)

For production, the front-end is built as part of the Docker image, and no separate steps are needed for deployment. Here’s how the Docker setup works:

Dockerfile Setup

The Dockerfile is configured to handle the entire build and deployment process for both the front-end and the back-end:

  1. Install Node.js and build the front-end:

    The front-end dependencies are installed, and the build is created using the following steps:

    Docker
    1
2
3
4
5
6
    # Specify the directory containing the frontend code
WORKDIR /usr/src/app/frontend

# Install Node.js, npm, and build the frontend
RUN npm install
RUN npm run build

  2. Serve the front-end static files via FastAPI:

    The built front-end files are copied to the /static/ directory and served by FastAPI:

    Docker
    1
2
    # Copy build artifacts to the static directory
RUN cp -r dist/* /usr/src/app/static/

    FastAPI mounts the static files and serves them along with the API, ensuring that both are available from the same server.

  3. Running the Docker container:

    The final part of the Dockerfile ensures that both the API and the front-end are served when the container is running:

    Docker
    1
    CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080"]

    This command runs the FastAPI app on port 8080, serving both the back-end API and the front-end.

Deployment

Once the Docker image is built, you can deploy it to any platform that supports Docker containers. The front-end and back-end will be served seamlessly from the same container without any additional configuration needed.

By following this guide, you'll have the front-end set up and running, connected to the back-end API, and ready to deploy using Docker. The build process is integrated into the Docker container, so there’s no need for separate environment variables or manual build steps in production.