Step-by-Step Guide to Deploying a Node.js + React App for Free
Tags: webdev, javascript, programming, beginners
Published: 2024-06-29 13:22:07

## 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:
   ```bash
   npx create-next-app@latest backend
   cd backend
   ```

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

3. Start the Next.js development server:
   ```bash
   npm run dev
   ```

#### Setting Up the Frontend

1. Initialize a Next.js project for the frontend:
   ```bash
   npx create-next-app@latest frontend
   cd frontend
   ```

2. Start the Next.js development server:
   ```bash
   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](https://begin.com).

2. Install Begin CLI:
   ```bash
   npm install -g @begin/cli
   ```

3. Deploy your API routes:
   ```bash
   begin
   ```

4. 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:
   ```bash
   npm run build
   ```

2. Install `@architect/s3` plugin (for hosting static sites):
   ```bash
   npm install @architect/s3
   ```

3. Deploy your frontend:
   ```bash
   npx arc deploy
   ```

4. 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`):

```yaml
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](https://nextjs.org/docs)