DEV Community

Usaid
Usaid

Posted on

5

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.

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

Top comments (0)

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay