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}`)
})

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.

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"
    ]
  }
}

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 [e-mail]:yourusername/Demo-Panda.git
git branch -M main
git push -u origin main

📌 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.

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!

Comments

[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"

[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 😇

[Code of Relevancy]

Thank you for bringing this up..

[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!

[Harita Ravindranath]

This blog was a life-saver!!

[Serena]

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

[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 "/"?

[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 #.