DEV Community

Cover image for Deploying your React.js & Express.js server to Render.com
Serena
Serena

Posted on • Updated on

Deploying your React.js & Express.js server to Render.com

As everyone has known for quite some time, Heroku is planning to remove their free dynos and other free options, which now means you will have to pay for it. Given 5$ a month is not too bad but I recently found another Cloud Application, called Render.com.

One thing to note before you sign-up with them:

Deploying can be super slow (taking up to 15mins if your app is bigger!) on their free tier so you should only use it for smaller applications and remove unnecessary files.

So if you're building some big application (especially e-commerce), don't use render; I'd rather pay for heroku if it was such a big deal. It would save you the headache! Instead, I would recommend Railway but be sure to check the benefits to see if it's for you.

This article will be covering how to deploy your react.js (front-end) portion plus your backend (node.js) to Render.com

📌 Create the react-app project:

Open your terminal in whichever folder you store your project files and enter the command:

npx create-react-app demo-panda

Now the client-side is created, now let's create a server.js file in the root of project (or create an entire new folder that represents the backend)

📌 Create the server:

After you've created the server.js file, we need to install a few things: express, path, and dotenv

npm i express path dotenv cors

You can read more about the following here:

  • Express
  • Dotenv (If you decide to use environment variables, make sure to add .env in your .gitignore so the information won't be public)
  • Path
  • Cors

Now run npm run build to get the static files of your project.

Define your server.js file, here is what my server.js turns out to:

const express = require('express')
const path = require('path')
const dotenv = require('dotenv')
dotenv.config()


const app = express()
const port = process.env.PORT || 3000


const buildPath = path.join(__dirname, 'build')


app.use(express.static(buildPath))
app.use(express.json())
app.use(cors())


// gets the static files from the build folder
app.get('*', (req, res) => {
  res.sendFile(path.join(buildPath, 'index.html'))
})


// Showing that the server is online and running and listening for changes
app.listen(port, () => {
  console.log(`Server is online on port: ${port}`)
})
Enter fullscreen mode Exit fullscreen mode

Let's test it out! Call node server.js and go to localhost:3000.

Your application should be running the server and showing your application :). This is why running npm run build is pretty important. Otherwise we wouldn't be able to see our application at all.

localhost:3000 homepage

Server.js running in terminal

The only thing I've personally noticed is that you have to restart the server manually everytime you make changes. Same goes for npm run build. So once you finally finished designing your frontend and you're ready to prepare for deploying, move on to the next line!

📌 Preparing to deploy to Render.com:

We need to finish a few more setups before deploying to render.

Go to your package.json file in your root folder and add your node and npm version to "engines". We are adding this because sometimes you can receive errors that your build failed, and this can be many of the reasons why, simply because there is no node/npm versions present.

And change your "scripts.start" to "node server.js" So when you deploy your application, it will be running the server and the build.

If you don't know your versions you can run in your terminal:

npm -v && node -v

It will return the npm version on the first line then the node version on the second line.

Package.json:



{
"name": "demo-panda",
  "version": "0.1.0",
  "engines": {
  "npm": "8.18.0",
  "node": "16.16.0"
  },
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "cors": "^2.8.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Changing http requests URL:

When you are deploying you don't want to call your localhost machine as this will be an up and live server now. If you are making calls to the backend, make sure to change your calls from this:

await axios.get('localhost:3001/pet')

to your new website URL:

await axios.get('https://demopanda.onrender.com/pet')

Next we want to import our project to Github. So create a new repository if you haven't already been working in one and follow the "...push an existing repository":

git remote add origin git@github.com:yourusername/Demo-Panda.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

📌 Deploying to Render.com:

We now have everything out the way! Let's sign up for a account on Render . Once signed up and verified, head over to your dashboard. Click the + symbol and add a web service application. It will ask you to import the repositories you would like, so be sure to choose your preference and click on "Connect".

For the following fields:

Name: This will be the name of your website url

Root Directory: be sure to set this to "." (just a period without the quotation marks)

Region: Whatever region you are in. In my case I have Oregon selected

Branch: I left the branch as the default "Main"

Build Command: npm install && npm run build

Start Command: npm start (This will run node server.js as we set in the package.json)

You can ignore the Plan types unless you have purchased a plan.

You can also add environment variables if you click on "Advanced options" if you decided to add environment variables to your app. You can also set if you want the application to Auto-deploy everytime you make a push to your repo.

Then that's it! You click on "Create web service" and enjoy the process. Grab some coffee ☕ until its ready. And your url will be online soon.

Finished Deploying Render Logs

Here is my online version:

A simple application of petting the panda makes a call to the server-side, just to show that the server absolutely works when deploying :)

Demo on Render: https://demopanda.onrender.com

Github Repository: https://github.com/jsxNeko/Demo-Panda

So what do you think of render? Are there any other cloud application that are better? Let me know!

Top comments (9)

Collapse
 
jordanaf808 profile image
jordanaf808

Thanks for this post, it helped me stay on the right path! I was deploying an old React app and so I had to make sure I set the right Node and NPM packages for Render and my package.json, then I modified your settings and used these commands since my react app was in the client folder.
Build: "npm install && cd client && npm install && npm run build"
Start: "node server.js"

Collapse
 
pixelrena profile image
Serena

I’m glad it helped and thank you for taking the time to read it, It’s definitely not as hard after you deploy the first time 😇

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you for bringing this up..

Collapse
 
pixelrena profile image
Serena

You're welcome, I struggled to find any tutorials on deploying to render. There was so many trials and errors but hopefully this has helped!

Collapse
 
haritagr profile image
Harita Ravindranath

This blog was a life-saver!!

Collapse
 
pixelrena profile image
Serena

Awesome! I'm glad it helped out, I know I struggled when trying to convert over ^-^

Collapse
 
comascript profile image
Bradley Gilden

If you are making calls to the backend or redirecting to the frontend, would removing the hostname and port be better with just having the routes in the calls starting with "/"?

Collapse
 
pixelrena profile image
Serena

I am somehow just seeing this- sorry, but yes you are correct, I would suggest this when you are about to deploy though.

On localhost, it's necessary to have the entire hostname/port if your backend and frontend do not share the same port #.

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more