Deploy react, node projects for free on vercel

Parshi Praneesh — Mon, 17 Jun 2024 15:20:38 +0000

Looking to deploy your projects without spending a dime? You've come to the right place. There are several platforms out there that offer free deployment with some resource limitations. Some of the options include:

GitHub Pages
Glitch
Render
Netlify
Vercel
Digital Ocean

Among these, I find Vercel to be the best for hobby projects. It's free, even for backend applications, and it boasts a 99% uptime. I was pleasantly surprised when my Node and Flask applications worked seamlessly on Vercel. In this blog, I'll show you how to deploy a frontend (React.js), a Node.js backend, and even connect MongoDB to your backend.

Deploying React.js with Vercel

Let's start with deploying a React.js application. I used Vite to create my React apps. If you haven't used it before, don't worry; it's straightforward. Here's a step-by-step guide:

Upload Your Project to GitHub Make sure your project is uploaded to your GitHub account.
Create a Vercel Account Sign up for a Vercel account using your GitHub credentials.
Add a New Project on Vercel
Click on the "Add New" button (top right, white color).
Connect your GitHub account.
Choose the repository you want to deploy.
Type in your project name.
Select the root directory (where your React files are located, e.g., frontend/reactfile/).
Hit deploy.
And that's it! Your project will be deployed, and you'll get a URL ending with vercel.app.

Deploying Node.js with Vercel

Deploying a Node.js application is a bit more involved, but don't worry, I've got you covered. Follow these steps carefully:

Create a directory named 'api' in your project folder.
Place your main server logic in index.js inside the /api directory.
Organize Additional Files
If you have additional server files (e.g., teacherAPI.js), place them in the /api directory.
Ensure Correct File Placement: Make sure package.json, package-lock.json, and .gitignore are outside the /api directory.
Create vercel.json: In your project folder, create a file named vercel.json and paste the following content:

{
"version": 2,
"rewrites": [
    {
    "source": "/(.*)",
    "destination": "/api"
    }  
]
}

Commit your changes and push your project to GitHub.
Deploy on Vercel: Go to Vercel and click "Add New" and select your repository.
Set the framework preset to "Other."
Ensure your root directory contains /api, .gitignore, package.json, etc.
Copy your .env file content and paste it into the environment variables section on Vercel.
Hit Deploy and voila! Your Node.js application is now deployed.

File Structure for Node.js Backend
Here's a visual representation of the file structure:

root directory
    |___
        |_ api
        |     |_ index.js
        |     |_ middlewares
        |_ package.json
        |_ .gitignore

Connecting MongoDB to Your Node Server

If you're using MongoDB with your Node server, you'll need to configure Vercel a bit differently. However, I've encountered issues with MongoDB disconnecting after a while. I recommend using Firebase instead, which is as simple as MongoDB and more stable for this setup.

Final Thoughts

I hope this guide helps you deploy your projects easily and efficiently. Experiment, learn, and happy coding!
Feel free to reach out if you have any questions or need further assistance. Keep experimenting and keep coding!

DEV Community: Parshi Praneesh

Deploy react, node projects for free on vercel

Deploying React.js with Vercel

Deploying Node.js with Vercel

Connecting MongoDB to Your Node Server

Final Thoughts