Create and deploy react app on Heroku
I am using create-react-app for every new react project. And it’s very easy and good.
If you don’t know how to setup react app, see my previous article on Setting up a React.js project with simple steps.
I have existing react project on my GitHub account and in this article, I deploy that project on the Heroku with simple steps. For making our react application live on the internet you know that would be cool as fuck ! 😂. Every time I make a new project then I put it to on Github for people like me, you and all over around the world who want to learn then they can see my project and gain some knowledge.
But sometimes I stuck 😥, how I show mine reactjs project output and how it looks and works. And how I show output to my friends, colleagues, people who visited my GitHub account.
Then I heard from my colleague you can deploy your reactjs small projects easily on the internet with the help of Heroku with simple steps. Then create an account on Heroku it's free. After creating the account install Heroku CLI by running the below command into your terminal :
Then log in with your Heroku account with the help of terminal and run the command below in the terminal:
After running the above command let’s first install Git in your system.
Note: This command is supported only for Debian/Ubuntu based operating system. If you have different operating system then go to the git offical site and see the installation process according to your operating system.
So, I already said we are using an existing react app which is on my GitHub account, then clone the repository from my GitHub on your local system easily by running this command on your terminal:
This will takes a few minutes, after the installation process. Then delete the package.json.lock and yarn.lock file from your react app :
At the build time, we don”t want this two file in our app. Because this will create an error if we will not delete them.
Then run the given command below for taking one step closer to live the react app on the internet.
This will takes a few minutes to end the build process. After doing all of this then you will see a link on your terminal which is your domain name if you copy that link and then paste it on your browser address bar then you will see that your react app is working live on the internet.
But, the problem is that the link is generated that is not matched with our project name so we have an option to rename our domain with simple step see the code below and run it on the terminal:
After doing all of this stuff we will generate a new domain link of our emojisapp that is https://emojisapp.herokuapp.com/ . Now, which is related to our project name right.
And that’s it this is the end of this article. Clap 👏 for this article if you find it useful 😃.
Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek.I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.
Want to learn more about JavaScript and React js? Check out my other articles:
3. Login with GitHub and Microsoft in reactjs
4. Login with Facebook and Google in reactjs
5. How to setup redux and react router v4 in your react app
6. Setting up a React.js project with simple steps
I hope you enjoyed this article on Create and deploy react app on Heroku.
Feel free to comment and like this article so that others can find it easily on Medium!
And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript,react.js stay connected with me.
