{"id":26813,"date":"2022-05-23T11:09:10","date_gmt":"2022-05-23T11:09:10","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=26813"},"modified":"2024-12-27T08:39:27","modified_gmt":"2024-12-27T08:39:27","slug":"deploy-react-app-on-heroku","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/deploy-react-app-on-heroku","title":{"rendered":"How to Deploy React App on Heroku?"},"content":{"rendered":"

Are you looking for the simplest tutorial to deploy React app on Heroku? Do you want to deploy a project last minute and don\u2019t know how to do it? Here\u2019s the tutorial for you! <\/strong><\/i><\/p>\n

In this tutorial, we have a simple to do ReactJS app which we will use to deploy. You can use any existing application or create a new one using create-react-app. Don\u2019t worry, we will discuss the steps from scratch.<\/strong><\/i><\/p>\n

Introduction<\/h2>\n

Done with the development? It\u2019s time to deploy now! There are many services with which you can deploy your application. Heroku is one of them. It is an obvious choice when it comes to deployment. It provides facility to deploy, manage, and scale the application. You may find it intimidating but working with Heroku is super easy!<\/p>\n

Login to Heroku Account<\/h2>\n

Go to Heroku <\/a> and login to your account<\/p>\n

After successful login you will be redirected to dashboard page.<\/p>\n

\"Heroku<\/p>\n

Create a New Application<\/h2>\n

Click create a new app<\/i> for getting started with application deployment.<\/p>\n

\"Create<\/p>\n

As shown below, fill in the required fields and hit the Create app button.<\/p>\n

\"Create<\/p>\n

Are you looking for proficient ReactJS developers highly-skilled with development and deployment as well?<\/span>
\nContact Bacancy today and hire React developers<\/a> to start building your dream project!<\/i><\/strong><\/p>\n

Add Buildpacks<\/h2>\n

To deploy React app on Heroku, we need to add buildpacks. Click on the Settings tab and then click on Add buildpack button inside the Buildpacks section.<\/p>\n

\"Add<\/p>\n

Our React buildpack URL is https:\/\/github.com\/mars\/create-react-app-buildpack. Copy this URL and add it to buildpack like below.<\/p>\n

\"React<\/p>\n

After that click on the Save Changes button. The Buildpacks section will now contain the URL which we have added. Refer to the below screenshot for the same.<\/p>\n

\"Save<\/p>\n

Deploy React App on Heroku: Using Heroku CLI<\/h2>\n

Click on the Deploy tab for deploying React app using Heroku Git.<\/p>\n

\"Deploy<\/p>\n

There are three deployment methods for deploying an app on Heroku.<\/p>\n

1. Heroku Git<\/p>\n

2. Github<\/p>\n

3. Container Registry<\/p>\n

Here we will choose the first option for deployment: Heroku Git. Click to proceed further.<\/p>\n

\"Heroku<\/p>\n

After clicking on the Heroku Git option the page below will appear. <\/p>\n

\"Deploy<\/p>\n

Now, we need to install Heroku CLI on our machine. Visit Heroku CLI<\/a> for the same.<\/p>\n

You can check the version using the following command<\/p>\n

heroku \u2013version<\/pre>\n
After successfully installing heroku-cli, go to your project directory and use these commands for setting up Heroku repository.<\/p>\n
\/\/ login\r\nheroku login\r\n\r\n\/\/ Create a new Git repository\r\ngit init\r\nheroku git:remote -a bacancy-todo-task\r\n\r\n\/\/ Deploy your application\r\ngit add .\r\ngit commit -am \"first commit\"\r\ngit push --set-upstream heroku master:main<\/pre>\n
Once done with firing the commands you have successfully deploy React app on Heroku.<\/p>\n
\"Tutorial<\/p>\n
Run the Application<\/h2>\n
Using heroku open<\/mark> you can check the application running on the URL.<\/p>\n
Now our application has been deployed successfully. So now we will go to https:\/\/bacancy-todo-task.herokuapp.com\/ URL and access our application.<\/p>\n
\"Run<\/p>\n
Conclusion<\/h2>\n
Voila! Done with our deployment! Now you see deploying your application on Heroku wasn\u2019t a tough job after all. I hope you have understood the tutorial: How to Deploy React App on Heroku. Now start building your demo application and successfully deploy it on Heroku. Feel free to write us back if you have any suggestions, feedback, or queries. <\/p>\n","protected":false},"excerpt":{"rendered":"
Are you looking for the simplest tutorial to deploy React app on Heroku? Do you want to deploy a project last minute and don\u2019t know how to do it? Here\u2019s the tutorial for you! In this tutorial, we have a simple to do ReactJS app which we will use to deploy. You can use any […]<\/p>\n","protected":false},"author":151,"featured_media":26850,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[988],"tags":[],"coauthors":[2429],"class_list":["post-26813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/26813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/151"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=26813"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/26813\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/26850"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=26813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=26813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=26813"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=26813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}