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.