Hello. In this blog I would like to write about my experience of deploying React APP (with Rails backend and PostgreSQL DB) to Heroku Hosting. It was my first time deploying my app to a hosting so it took me about a week for all steps (deploying, connecting a custom DNS, connecting DB to my PG Amin, adding adds-on and other)! During deploying I had to solve many errors, but every error brought me to one step closer to the success.
First big question that I had on the start is How do I deploy my App to Heroku if my app is in 2 different repos (backend and frontend)! The answer is: I need to create 2 deferent Heroku apps, one for backend and one for frontend.
So lets get started.
I assume you already signed up for Heroku.com. Then you need to install Heroku Command Line Interface(CLI) on your terminal. The CLI makes it easy to create and manage your Heroku apps directly from the terminal. Here is the instructions how can you install it on different systems. I use VS Code on WSL and installed Heroku CLI with next command:
npm install -g heroku
(You must have node and npm installed already.)
heroku -- version — check if the installation was successful.
Next you need to authorize:
heroku login
Then you will be asked to press any key and browser window will open login page on Heroku. After you login, your Heroku CLI is set up !
- CD to your backend repo.
- Create Heroku app:
heroku create your-project-name
You should see this:
I use “test1” as App name for demonstration purpose. Your App name on Heroku does not have to be the same as your GitHub repo. You can call it any.
3. Initialize Heroku git remote:
git init
git add .
git commit -m "first deploy"
You can use the git remote -v command to confirm that a remote named heroku has been set for your app:
4. Finally :
git push heroku main
Now you can heroku open and check if the backend app is working and render all data from backend! If so, moving to frontend.
- CD to your frontend repo.
2. Update all urls in your app frontent.
Replace all http://localhost:3000 with the URL of your deployed backend, https://app-name.herokuapp.com If you have namespaces in your routes, keep them. (Example: https://app-name.herokuapp.com/api/v1/users).
Run npm start and check if it is fetching data from your deployed to Heroku backend.
3. Repeat steps 2, 3,4 that you made for your backend (create heroku app, initialize git remote and push your app)
If your App was successfully deployed, congratulation! Now visit your app heroku open. If you deploying was not successfully, (as it happened to me) read errors, google them and try to fix them.
Some hints that might help.
- Check if you set the right buildpack! Go to your Heroku Dashboard, click to your frontend app, Settings, scroll down and you will see the buildpack. One of my problems was exactly in the wrong buildpack. I set node.js buildpack and it was wrong! You can use next command to set up the right one
heroku buildpack:set mars/create-react-app - Build also could be failed with an error: “Two different lockfiles found: package-lock.json and yarn.lock”
To fix that remove package-lock.json - Create static.json file in the root directory of your frontend repo. Copy following code and paste to that folder.
{ “root”: “build/”, “routes”: { “/**”: “index.html” } }
4. Make sure you have https (not http) in your fetch urls.
In my next blogs I am going to show how to install the adds-on on Heroku and set up Config Variables.
