Deploying Full-Stack Node.js and React Applications on Netlify

Introduction

Deploying full-stack applications can seem daunting, especially when you’re working with a Node.js backend and a React.js frontend. Fortunately, Netlify simplifies the process, allowing you to host both parts of your application seamlessly. In this guide, we’ll walk through deploying a full-stack Node.js and React application on Netlify step by step.

---

Prerequisites

Before we begin, make sure you have:

• A full-stack project with Node.js as the backend and React as the frontend.
• A GitHub, GitLab, or Bitbucket repository for your code.
• A Netlify account (you can sign up at Netlify).
• Basic knowledge of JavaScript and deployment processes.

---

Step 1: Prepare Your Project Structure

Ensure your project has the following structure:

root/
|-- client/ (React frontend)
|-- server/ (Node.js backend)
|-- package.json
|-- netlify.toml

• client/: Contains your React application.
• server/: Contains your Node.js application.
• package.json: Includes scripts for building and running your application.
• netlify.toml: Configuration file for Netlify.

---

Step 2: Configure Your Backend for Serverless Functions

Netlify uses serverless functions to run backend code. Move your Node.js server logic into a folder named functions:

1. Create a functions folder in your project’s root directory.
2. Move your existing server files (e.g., server.js) into the functions folder.
3. Update your server.js to follow the serverless function format:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from the backend!" }),
  };
};

4. Add dependencies required for your backend in the root package.json file.

---

Step 3: Build and Optimize Your Frontend

Navigate to the client/ directory and build your React app:

cd client
npm run build

This generates a build folder containing static assets for your frontend.

---

Step 4: Configure the netlify.toml File

Add a netlify.toml file to the root of your project with the following configuration:

[build]
  publish = "client/build"
  command = "npm install && npm run build"

[[functions]]
  directory = "functions"

This tells Netlify to:

• Publish static files from the React build folder.
• Use the functions directory for serverless functions.

---

Step 5: Push Your Code to GitHub

Ensure your project is version-controlled and pushed to a GitHub repository:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

---

Step 6: Deploy to Netlify

1. Log in to your Netlify account.
2. Click New site from Git.
3. Connect your GitHub repository.
4. Configure the deployment settings:
   • Build Command: npm run build
   • Publish Directory: client/build
   • Functions Directory: functions
5. Click Deploy site.

Netlify will build and deploy your application.

---

Step 7: Test Your Deployment

After deployment, Netlify provides a live URL for your application. Verify that:

1. The React frontend loads correctly.
2. Backend routes (serverless functions) work as expected.

---

Step 8: Set Up Environment Variables

If your application uses environment variables:

1. Navigate to your site’s settings in Netlify.
2. Go to Site settings > Environment variables.
3. Add the required variables.

Redeploy the site to apply the changes.

---