Deploying a react app on heroku is the easiest task when we talk about deployment. However, if you miss some important steps, you might break the react-router’s functionality or deploy a development build to production.
So let’s look into the process of deploying a react app on heroku the right way, so that we get a production optimised build and react-router’s functionality intact.
I use create-react-app for generating the boilerplate code for a react app and assume that you’re using the same.
- The very first step is to create a project using create-react-app and update the code as required.
$ create-react-app MyAwesomeApp
$ cd MyAwesomeApp - Next, we have to initialise a git repository inside the project folder.
$ git init Sign up on heroku if you haven’t already.
-
Install heroku CLI
Login in heroku CLI using your email and password.
$ heroku login
Create a new heroku app while using the create-react-app buildpack. This buildpack deploys a React UI as a static web site. It also uses the production build of React app for deployment.
$ heroku create MY-AWESOME-APP --buildpack https://github.com/mars/create-react-app-buildpack.git
Add a new file in the root of your project directory and name it static.json. Put the following code into it.
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
Now commit all the changes and push the code to heroku master.
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
You can check the deployment using
$ heroku open
Checkout create-react-app-buildpack and Heroku for more details.
Original Post : https://medium.com/@WebDevRaj/deploy-a-react-app-on-heroku-the-right-way-e17333d29169
Top comments (3)
If we are just building once and serving static files, we could also build locally or on a dedicated build server, and deploy the static files on a CDN like S3. This will provide a faster, initial loading time. However, we can rely on Heroku as a fallback for server-side rendering.
how does this work for each time you build the react app, you then commit all those files to git? seems that repo would balloon out really quickly. isn't there a better way to handle temporary build files than git with heroku? seems a very frequent use case.
Are you familiar with .gitignore?