Lesson 11: Deploying the Full-Stack Application

Goal

Deploy the full-stack TodoList App to production using:

1. Vercel for the React frontend.
2. Render for the Express backend.
3. Configure environment variables to ensure the app runs smoothly in production.

1. Learning Objectives

By the end of this lesson, students will:

1. Understand how to deploy the backend (Express/MongoDB) on Render.
2. Deploy the frontend (React) on Vercel.
3. Configure production environment variables for OpenAI and MongoDB connections.
4. Test the live application to confirm full functionality.

2. Preparing the Backend for Deployment

We will host the backend on Render, which provides free cloud hosting for Node.js applications.

2.1. Set Up MongoDB Atlas

MongoDB Atlas provides a cloud-based MongoDB database.

1. Go to MongoDB Atlas and:

   • Create a free account or log in.
   • Create a cluster (free tier).
   • Whitelist IP Address: Set to 0.0.0.0/0 for now (open access).
   • Generate a connection string:

   mongodb+srv://<username>:<password>@cluster.mongodb.net/todolist

2.2. Configure Environment Variables

Update your .env file in the backend:

PORT=5000
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/todolist
OPENAI_API_KEY=your_openai_api_key_here

2.3. Prepare Backend Code for Production

1. Add a start script in package.json:

"scripts": {
  "start": "node dist/server.js",
  "build": "tsc"
}

2. Ensure TypeScript compiles the backend:

Install TypeScript and configure it:

npm install --save-dev typescript @types/node @types/express

Create a tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. Build the backend:

npm run build

2.4. Deploy on Render

1. Go to Render.
2. Create a New Web Service.
3. Connect your GitHub repository.

4. Configure the service:

   • Environment: Node.js
   • Build Command: npm install && npm run build
   • Start Command: npm start

5. Add environment variables:

   • PORT, MONGO_URI, OPENAI_API_KEY.
6. Deploy the service.

Once deployed, Render will provide a public API URL (e.g., https://todolist-backend.onrender.com).

3. Preparing the Frontend for Deployment

We will deploy the React frontend using Vercel.

3.1. Configure Environment Variables

In your React project, create a .env file:

REACT_APP_BACKEND_URL=https://todolist-backend.onrender.com

Use this variable in your API service (src/api/todoApi.ts):

import axios from 'axios';

const API_URL = process.env.REACT_APP_BACKEND_URL + '/api/todos';

export const fetchTodos = async () => {
  const response = await axios.get(API_URL);
  return response.data;
};

export const createTodo = async (title: string) => {
  const response = await axios.post(API_URL, { title });
  return response.data;
};

export const deleteTodo = async (id: string) => {
  await axios.delete(`${API_URL}/${id}`);
};

3.2. Build the React Project

Run the following command to create a production build:

npm run build

This generates a build folder containing optimized files for deployment.

3.3. Deploy on Vercel

1. Go to Vercel.
2. Connect your GitHub repository.

3. Vercel will detect the React project and automatically configure:

   • Build Command: npm run build.
   • Output Directory: build.
4. Add the environment variable REACT_APP_BACKEND_URL.
5. Deploy the project.

Vercel will provide a public URL for your React app (e.g., https://todolist.vercel.app).

4. Testing the Live Application

Verify the following functionalities on your live app:

1. Add a Task:

   • Input a task and submit.
   • Confirm it appears in the list.

2. Toggle Task Completion:

   • Mark tasks as completed/incomplete using checkboxes.

3. Delete a Task:

   • Confirm tasks are deleted and removed from the UI.

4. AI Tools:

   • Generate descriptions, schedules, and subtasks.
   • Test API integration using your Render backend.

5. Final Deployment Checklist

Backend (Render):

• Environment variables (MONGO_URI, OPENAI_API_KEY).
• Server runs without errors.
• API endpoints are accessible.

Frontend (Vercel):

• Environment variable (REACT_APP_BACKEND_URL).
• React Query fetches and updates data properly.
• Live app is functional.

6. Homework Assignment

1. Deploy both the frontend and backend apps following the steps above.

2. Submit the live links:

   • Backend URL from Render.
   • Frontend URL from Vercel.
3. Write a short document explaining the deployment process you followed.

Next Lesson Preview: Lesson 12

In Lesson 12, we will:

• Review the entire application.
• Provide a summary of key learnings and challenges.
• Assign the final project (e.g., a Bookmarks App).