React apps can be deployed to the internet in several ways. They can be pushed directly to GitHub and accessed via GitHub pages or even accessed via Netlify. This is done easily if we want to host only static pages.

To host dynamic pages, we use Heroku and I'll show in simple steps how we can achieve this.

To begin with, we create a production build of our frontend and move it to the backend directory. To create a production build simply run

npm run build

this renders a minified version of our code in a build folder that we can easily copy and paste to the backend directory for windows or we run

cp -r build ../backend-directory

for Mac/Linux.

Now we have both Frontend and Backend in one location we can push them to Heroku.

Create an account on Heroku if you have none.

On the backend root directory, create a file called Procfile with no file extension. This file tells Heroku how to start the application.

You can add whatever code starts your app to the file.

web: npm start

Install Heroku by running

npm install heroku

Now we can use the heroku cli on our terminal.

Create a git repository on the folder using git init and add a .gitignore file, add /node_modules to the gitignore file for node modules to be ignored and not pushed to Heroku.

Create a Heroku app

heroku create

Then run the git commands needed to push the backend to Heroku

git add .
git commit -m "add backend to heroku"
git push heroku main

Our App has been successfully pushed to Heroku! and can be viewed via the live link provided in the terminal.

You can check out the Heroku documentation for further reading.