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.