If you are new to React JS and want to deploy to Heroku, these are few steps to ensure that you can deploy successfully.
In this example, we will be creating a basic single page application and deploy to Heroku.
Installing Node
- Node can be installed in this link. After it is install, type
node -v
2. If it is installed correctly, version of node will be displayed.
Node will install npx for version above 5.2.0 . npx is an npm package runner that can execute any package that you want from the npm registry without even installing that package
Installing Create React App
There are few ways to create a React project. We are going for the easier way — using Create React App.
We need to install Create React App. To go about this, input this in your command prompt / terminal :
npm i -g create-react-app
Creating your first React Project
Input this in the command prompt / terminal where you want to create the project
npx create-react-app my-app
npm start
Viola , your very first React project will launch in your browser (port 3000 as default) and looks similar like this image
Preparing Heroku
I assume that you have an Heroku account.
- Using buildpack to create an app in Heroku
If you want to create a app name https://helloworld.herokuapp.com/ , type this in the command prompt / terminal where your project lies :
heroku create helloworld — buildpack https://github.com/mars/create-react-app-buildpack.git
2. static.json
Create a file static.json in the root folder of your project. Input these in the file:
3. Deploying your app to Heroku
The rest of the steps are similar to how to upload a git project. But first you have to login to Heroku in terminal / command prompt
heroku login
Add and commit your project.
git add *
git commit -m “My first react project deploy in Heroku”
Finally deploy them
git push -u heroku master
You will find your project in xxx.herokuapp.com where xxx is your project name.
Reference :
