React is a very popular and widely used library for building User Interfaces. So if you are thinking about deploying your React app to the cloud platform, there are various choices for doing that such as AWS EC2 or Heroku. But for testing your React app, Heroku will be the best option as it is free and very easy to get started with.
- Installed Node.js and npm.
- Knowledge about GitHub.
- Basic knowledge about Heroku.
- Already created a React app.
Note: Make sure all the commands shown below must run only inside your project folder.
Step 1: Install Heroku CLI in your system by running the following command. It will install the updated version of Heroku CLI into your system.
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
To check the version you may run the command.
Step 2: Now, get to https://www.heroku.com/ and register. After completing your registration go to the dashboard and create a new app named “myherokuapp” or name of your choice.
Step 3: Run the following command, it will prompt you to enter any key to continue, it will open a new tab in your browser asking you to log in to your Heroku account. After you enter the required credentials and login on the site, it is going to show in your terminal “Logged in”
Step 4: Initialize a Git repository by running the following command. Make sure you be at the top-level of your project directory.
Step 5: Now, add the Heroku remote by simply running the command which you will find in your Heroku Dashboard -> myherokuapp or Your App Name -> Deploy Section
Simply run the following command. Deployment method should’ve chosen as GitHub.
heroku git: remote -a myherokuapp
Step 6: Now the most important part and i.e Heroku provides the buildpack for Python, Node.js based app but it doesn’t provide buildpack for React apps. So we have to add an extra buildpack in the settings section of your Heroku app.
Step 7: Now run the following commands to push your project to the repository.
git add. git commit -m "First Commit" git push heroku master
Step 8: Successfully pushed your React app to the Heroku repository. Now finally to see your deployed app, run the following command.
Finally, the web app will be deployed on https://myherokuapp.herokuapp.com/
Note: It will open your deployed app to your browser. If there is any problem like if your React app is not showing up then you can run the following command to check logs what has gone wrong. Consider one thing that before deployment try to remove all warnings from your app as heroku considers all warnings as errors.
heroku logs --tail
- Deploy Python Flask App on Heroku
- How to Deploy Django application on Heroku ?
- How to Deploy a Basic Static HTML Website to Heroku?
- How to Deploy Your React Websites on GitHub?
- How to upload Laravel App to Heroku Cloud Application Platform
- What is the difference between React Native and React?
- Android & iOS App development using React Native with Expo
- How to Create Button in React-Native App ?
- How to display a PDF as an image in React app using URL?
- How React Native Make Mobile App Development Simpler?
- What's new in Create React App 2.0 ?
- Introduction and Installation of Heroku CLI on Windows machine
- Deploy cloud function on Google Cloud Platform
- Introduction to Xamarin | A Software for Mobile App Development and App Creation
- Deploying Your Web App using Azure App Service
- Progressive Web App - A Combination of Native and Web App
- How React Native works?
- React.js (Introduction and Working)
- ReactJS | State in React
- Introduction to React-Redux
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Improved By : codingbot