Step-by-Step Guide to Deploying a Node.js + React App for Free

Step-by-Step Guide to Deploying a Next.js App for Free

Introduction

Deploying a full-stack Next.js application doesn't have to break the bank. In this guide, we'll walk through the process of deploying your application for free using Begin. Begin offers a straightforward way to host and manage your Next.js frontend and API routes without worrying about infrastructure costs.

Prerequisites

Before we begin, make sure you have the following:

• Familiarity with JavaScript, Node.js, and React in general.
• Basic understanding of serverless functions and API routes in Next.js.
• Node.js installed on your development machine and able to run basic npm commands.
• Familiarity with Git and GitHub for version control.

Step 1: Setting Up Your Project

Setting Up the Backend (API Routes in Next.js)

1. Initialize a Next.js project with API routes:

   npx create-next-app@latest backend
   cd backend

1. Create an API route (pages/api/data.js):

   // pages/api/data.js
   export default function handler(req, res) {
     res.status(200).json({ message: 'Hello from the backend!' });
   }

1. Start the Next.js development server:

   npm run dev

Setting Up the Frontend

1. Initialize a Next.js project for the frontend:

   npx create-next-app@latest frontend
   cd frontend

1. Start the Next.js development server:

   npm run dev

Step 2: Deploying Your Backend (API Routes)

Now, let's deploy your Next.js API routes to Begin.

1. Sign up for a free Begin account at Begin.com.

2. Install Begin CLI:
   

   npm install -g @begin/cli

1. Deploy your API routes:

   begin

1. Follow the prompts to set up your application on Begin.

Step 3: Deploying Your Frontend

Next, deploy your Next.js frontend and connect it to your deployed API routes.

1. Build your Next.js app:

   npm run build

1. Install @architect/s3 plugin (for hosting static sites):

   npm install @architect/s3

1. Deploy your frontend:

   npx arc deploy

1. Configure your frontend to fetch data from your deployed backend API routes.

Step 4: Configuring CI/CD

Automate deployments using GitHub Actions or any preferred CI/CD tool. Here's a basic GitHub Actions workflow example (/.github/workflows/deploy.yml):

name: Deploy to Begin

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies and deploy
        run: |
          npm install -g @begin/cli
          npm install
          begin deploy --name my-app
        env:
          BEGIN_APP_NAME: my-app
          BEGIN_ENV: staging
          BEGIN_TEAM_ID: ${{ secrets.BEGIN_TEAM_ID }}
          BEGIN_API_KEY: ${{ secrets.BEGIN_API_KEY }}

Conclusion

Congratulations! You've successfully deployed your Next.js application for free using Begin. Start building and deploying your projects without worrying about infrastructure costs. Happy coding!

---

🌐 Sources

• Next.js Documentation