Hosting your react-native express.js backend on Heroku.

usaidpeerzada

Usaid

Posted on May 19, 2021

Hosting your react-native express.js backend on Heroku.

You have created an app in react native and written backend in expressjs/nodejs and you want to host your backend so you can get or post data on your app from anywhere?

Answer: Heroku.

Here's how:

// for mac:
brew tap heroku/brew && brew install heroku
// for ubuntu: 
sudo snap install --classic heroku

Enter fullscreen mode Exit fullscreen mode
  • After Heroku CLI has been installed, open the terminal and just login with your credentials

// type this in your terminal to login:
heroku login

Enter fullscreen mode Exit fullscreen mode
  • When you have logged in you can create a heroku app by executing this command:

heroku create

Enter fullscreen mode Exit fullscreen mode
  • Once the heroku app has been created you will see the app name, remote git link and the site url.

  • Add heroku remote branch:

heroku git:remote -a your-app-name

Enter fullscreen mode Exit fullscreen mode
  • Heroku git remote will be added and you can check that by:

git remote -v

Enter fullscreen mode Exit fullscreen mode
  • Add Procfile to the root of your backend folder, eg:
-ReactNativeAppFolder
 -MainBackendFolder 
  -routesFolder
    -Routes.js
  -modelsFolder
    -Schema.js
  -app.js
  -package.json
  -package-lock.json
  -Procfile

Enter fullscreen mode Exit fullscreen mode
  • Procfile is needed to tell heroku to run node app.js on it's server, so your app can start and run.

  • You don't need to push the whole react-native app to heroku you can just push your backend folder to it, here's how:


git subtree push --prefix MainBackendFolder heroku master

// this specific command makes sure that only backend folder gets pushed to heroku.

Enter fullscreen mode Exit fullscreen mode
  • After the build and push is successful heroku will tell you that your app is being hosted on a specific url.

  • You can then add the specific url however you want to on your get and post request urls. That is it.

💖 💪 🙅 🚩
usaidpeerzada
Usaid

Posted on May 19, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related