In this post, I'll explain the step by step process to deploy a React app to heroku and no you'll not need a backend express server to do so.
Steps:
- Login/ Create a heroku account
- After logging in, you'll be redirected to the Heroku homepage
- On the top right corner, select "Create new app" from the "New" dropdown.
- In the step above we are creating an app that includes all the necessary quirks and features to deploy our React app.
- Give a name to your app and Heroku is kind enough to let you know if that name is taken or not.
- Next select a region where your app and its data will reside (although not guaranteed)
- After your application is created, you'll be redirected to the dashboard which includes sections such as Overview, Resources, Deploy, Metrics, Activity, Access and Settings.
- I'll explain each of these sections in more detail in the next iteration of this post
- Go to Deploy tab and you'll see "Deployment method" section. We have different methods to connect our github repository for deployment but in this case, I'll select "GitHub - Connect to Github".
- Selecting this option will switch the view below to two drop-downs with a label (Search for a repository to connect to).
- Enter the name of your repository and click search.
- It'll show the results with Connect button next to them.
- Once, you find your repository that you would like to connect, Click the corresponding connect button.
- After the connection is successful, You'll see two new sections: Automatic deploys and Manual deploy.
- Since, we'll be automating our react app deployment, Go to Automatic deploys and Choose the branch whose code you'd like to build and deploy.
- You can enable a CI-CD pipeline before this step (Usually github actions)
- Click "Enable Automatic Automatic Deploys" and you are all set on configuring Heroku.
Build and Serve React
- Now comes the main section, we'll deploy our beautiful react application to Heroku.
- First, install the following npm package: "serve", this is used for serving static websites and single package application.
- After the package is installed, go to your package.json file and in the "scripts" block, create a new key named "start-dev" and set its value to "react-scripts start"
- Now, replace the start key with following value: "serve -s build"
- And thats it!
- Push your changes to the remote repository branch that is connected with Heroku for automatic deployment and it'll start building your project.
- You must be thinking, I didn't make any config changes in Heroku to specify that my project is React based. Well, Heroku is smart enough to automatically detect your project, build and serve it for you.
- As the project is building, you can check the status of your build by going to Activity section, as it gives real time build logs.
When the application is built fully, You can access it by clicking on "Open App" button and it'll open your deployed react app in a new browser window.
In the next iteration, I'll explain the sections in more detail and show how to add environment variables if your app requires some.
Top comments (0)