How to deploy React and Node application on render ?

As a beginner deploying your projects can be confusing and a bit overwhelming. In today's post I'll be talking about how to deploy your React(Vite) and Node application on render.

If you want to know more about render, here it is https://render.com/

Let's Begin 🚀 🚀

Prerequisites

1. Render account.
2. GitHub/GitLab repository.

I'm assuming that your folder structure somewhat look's like this.
Folder names can be different.

.
├── client
└── server

First of all we have to create a package.json file in the root directory. The file should contains the following.

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "install-server": "cd server && npm install",
    "start-server": "cd server && node index.js",
    "install-client": "cd client && npm install",
    "build-client": "cd client && npm run build",
    "start-client": "cd client && npm run start"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

The main part lies in the scripts. Now after adding the package.json into your root directory, push the entire project to GitHub/GitLab.

Now after after completing all the above procedures, we'll move on
to render.

Remember to make the build of your react project using the command
npm run build

So the basic logic is that we'll deploy our frontend and backend seperately and will connect them.

Deploying on Render

Deploying the Client

1. Create a new project on render and select static site.

2.Connect your repository.

3.Enter the build command.

npm run install-client && npm run build-client

4.Enter yout publish directory. In vite application it's

./client/dist

Here client is the folder name and can be changed as per your folder name.

5.Then add you enviroment variables if any.

6.Finally click on Deploy and wait for sometime for the completion.

After it's successfuly deployed you can see tag Live and get a URL of your site.

Now copy this URL and place it in your backend application cors so that it does'nt throw cors error in future.

cors({
   origin : your-static-site-url 
})

Deploying the server

1. Again create a new project , but this instead of static site create a web service.

2. Again chose the same repository.

3. Enter the build command
   

npm run install-server

1. Enter the start command

npm run start-server

1. Then enter your enviroment variables if any.

2. Click on Deploy and wait for some time.

When it's finally deployed, take the URL and replace it everyehere in your frontend code wherever you hit request to backend.

For example if your URL was localhost:3000/create-user change it to your-web-service-url/create-user

Make all the changes and finally test your application.

Conclusion

In this guide we have discussed, how to deplaoy your react and node application on render.

If you found this guide helpful, let me know in the comments and share it with others who might benifit.

Hope you liked the guide. Thanks for reading 😊