DEV Community

Ayush Kaushik
Ayush Kaushik

Posted on

React + Heroku

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)