Guide: Deploying Next.js, FastAPI & Postgres in 10 Minutes

Deploying a full-stack application often requires configuring multiple services, managing containers, and setting up networking between components. This guide demonstrates how to streamline that process using Viduli.

We will walk through deploying a standard monorepo structure containing a Next.js frontend, a FastAPI backend, and a managed PostgreSQL database.

The Project Structure

For this guide, we assume a repository structure similar to this:

my-startup/
├── frontend/         # Next.js Application
│   ├── package.json
│   └── src/
├── backend/          # FastAPI Application
│   ├── requirements.txt
│   └── main.py
└── README.md

Step 1: Create a Project

Before deploying resources, create a project to group them. Projects provide a shared internal network and environment scope for your services. They also provide a built-in API gateway to manage routing.

1. From the dashboard, click New Project.
2. Name it My Startup (or your preferred name).
3. Select a free tier deployment for this guide.
4. Select your team and org. These will be pre-selected depending on where you click the "New Project".

Outcome: You now have an empty environment where all deployed services will be able to communicate securely. The project's API gateway is ready to route traffic to your frontend and backend services as you deploy them.

Step 2: The Database (Orbit)

We recommend starting with the database deployment. When you create a database on Viduli, the connection details are automatically made available to other resources in the same project.

1. Navigate to New Resource and select Orbit.
2. Engine Selection: Choose PostgreSQL 18 (or the latest stable version).
3. Identity: Set the Label to ProductDB. This name will be used to generate environment variables.
4. Compute Resources: For a typical starter application, the default configuration is sufficient:
   • CPU: 0.25 vCPU
   • Memory: 512 MB
   • Storage: 5 GB (or adjust as needed)
5. Scaling: Confirm the Region is set to your preferred location (e.g., us-east-1).
6. Click Launch.

Outcome: Viduli provisions a managed PostgreSQL instance with automated backups (7-day retention) and high availability. Crucially, it automatically injects environment variables like PRODUCTDB_DB_URL, PRODUCTDB_DB_USER, and PRODUCTDB_DB_PASSWORD into your project scope, so your backend can connect without manual configuration.

Step 3: The Backend (Ignite)

Next, we deploy the Python API. Viduli's Ignite service automatically detects the project type based on the presence of requirements.txt.

1. Select New Resource and choose Ignite.
2. Framework: Select FastAPI.
3. Source: Connect your GitHub repository and select the repo.
4. Build Configuration:
   • Root Directory: Set to ./backend. This tells the build system where your Python app lives.
   • Install Command: Leave as default (Ignite automatically runs pip install -r requirements.txt).
   • Run Command: Leave as default (Ignite automatically runs fastapi run).
5. Compute Resources: Select 0.125 vCPU and 256 MB RAM for a lightweight API.
6. Networking:
   • Public Access: Toggle On.
   • Path Prefix: Set to /api. This ensures requests to your-domain.com/api are routed to this service.
   • Prefix Rewrite: Set to /. This ensures your FastAPI app receives requests at its root path (e.g., /users instead of /api/users), keeping your internal routing clean.
   • Expose Port: Ensure this matches your app's port (default 8000).
7. Click Launch.

Outcome: The platform builds the Python application, installs dependencies, and configures the runtime. Since it shares the project scope with the database, it automatically inherits the database connection credentials.

Step 4: The Frontend (Ignite)

Finally, we deploy the Next.js application.

1. Select New Resource and choose Ignite.
2. Framework: Select Next.js.
3. Source: Select the same repository.
4. Build Configuration:
   • Root Directory: Set to ./frontend.
   • Output Directory: Leave as default (.next is handled automatically).
5. Networking:
   • Public Access: Toggle On.
   • Path Prefix: Leave as / (default). This routes all root traffic to your frontend.
6. Environment Variables:
   • Add a new variable named NEXT_PUBLIC_API_URL.
   • Set the value to the URL of your backend. You can construct this using your project's domain and the /api prefix (e.g., https://my-startup.viduli.app/api).
7. Click Launch.

Outcome: The frontend is deployed to the global edge network, serving your application with low latency.

Summary

In a few simple steps, you have deployed a production-ready architecture:

1. Managed Postgres: Includes automated backups and high availability.
2. Auto-Scaling Backend: The FastAPI service scales based on traffic demand.
3. Global Frontend: Next.js is served from locations close to your users.
4. Unified Networking: Routing for /api and / is handled automatically by the project gateway, eliminating the need for complex proxy configurations.

This approach allows you to focus on building features rather than managing infrastructure.