How to deploy your React Application on Heroku in 10 minutes?
If you want your local code to be up as a URL and want that application to share with people here is the simplest way you can do it in under 10 minutes only.
Step 1: Signup at Heroku here: Heroku
Make an account on Heroku if you haven't already and go to its dashboard.
Step 2: Add your local code to Git Repository
Assuming that you know about GIT and know how to push a code to the GIT repository on GitHub, if not go make a new repository and add your local code to that repository.
Step 3: Create a New App on Heroku
Check Heroku’s dashboard or main page on the Right-hand side you will find an option to create a new app under a button named New click on that option, fill in the details about naming your application, make sure you provide a meaningful and shorter name as it will appear as nameentered.herokuapp.com.
Step 4: Add a staging application
When you are done naming your new app, there will be 2 options to add a staging application and a production application. You can add a staging application for now and click on the application name you just entered. After this, it will open a whole dashboard kinda page for that application you can now go to the Deploy tab.
You can see your app name as Assigned staging in “your-app-name” as seen in the image above.
Step 5: Connect to GitHub
As shown in the picture above you will see a section with the name Deployment method.
You can click on 2nd one that is GitHub and click on the button “Connect to GitHub”. After clicking that button, it will ask you the permissions to connect to GitHub after providing that you will be asked the repository name to connect here. Enter the name of that repository and select that particular Git repository to connect and after the successful connection, the option will turn to green and marked as “Connected” as shown above.
Step 6: Deploy your app
This is the final step, under this step you will find two options:
1. Automatic Deploy
2. Manual Deploy
Automatic Deploy:
It will allow automatic deployment every time you push your code to Git, it will automatically add updates and deploy without asking. But you need to click on the “Enable Automatic Deploys” button. If you want to run CI before deploying to check for errors you can implement CI in local code and check that “Wait for CI to pass before deploy” checkbox (But it will only run CI if you have implemented that in your local code otherwise if you don't know what CI is you can just ignore this.)
Manual Deploy:
This option allows users to always come on Heroku and click on the “Deploy Branch” button to deploy the code. If you don't need to deploy the code every time you push it just choose this option to deploy. Select your working branch from the dropdown, the master will be auto-selected, and then click Deploy Branch.
And Tadaaaaaa! Your code will start deploying and Heroku will handle the rest and after a successful build, you will be provided a success message with a button to check your deployed app, click on it, and see your React Application working on Live Url!
Note: Issue I have faced during manual deploy, as the build was failing with the message: A module may be missing from ‘dependencies’ in package.json. Make sure whatever module you are using in the application is being present inside the package.json file because it will not exactly prints the name of module which is not present.
Thanks for reading, I hope it helps you deploy your react application on Heroku. Happy Coding :)
