Skip to content

Deploy Node App

Jump to bottom
marcoFijan edited this page Jun 22, 2020 · 19 revisions

It is possible to deploy your webapp on multiple websites. I did my research on a couple of websites and my findings can be found here.

Using glitch

First make sure you have a dummy .env file. Like sample.env where you make a copy of your .env variables with dummy variables. Don't put your real sensitive variables in the file. Just dummy data so people know what kind of variables needs to be added.

For Glitch you can go to new project > Clone from Git Repo > Copy and Paste your Repo URL > OK Change the sample.env to .env and fill in the needed data.

Pros Is also an editor, so after you deployed your webapp, you can still edit your code online.

Cons You can't continue working on your git. So evertytime you edit your code, you must upload the files again by hand.

Using Heroku

Pros You can still use git for pushing and pulling your local data. That way you can continue to edit your code in your preffered code editor

Cons Is not an online editor. Once deployed, you can't edit it as quickly and easy online like in Glitch.

Heroku Commands

Command Meaning
heroku login Login to Heroku
heroku git:remote -a appName Create a remote to push data to heroku
git push heroku master push your added files to master branch on heroku
git push heroku localBranchName:master push your files from a non-master branch
heroku config:set env variables Set hidden env variables

PORT

Heroku uses it's own port. That's why you can't set your own port in your code like you can locally. You have to call the env variable Heroku uses like:

.listen(process.env.PORT)

That way Heroku can find its own port while running the node app.

You can also use your own local PORT, like 5000, with the || command:

.listen(process.env.PORT || 5000)

Procfile

A Procfile is essential if you want to deploy a node app on Heroku. A Procfile has a process type followed by a command:

<process type>: command

process types

  • web
  • worker
  • urgentworker
  • clock

The web process type is special. Heroku uses its own routes for HTTP trafficing. With web process you can receive external HTTP trafic routes. That way you can call the index.js like this:

web: node index.js

Setting .env variables in Heroku

The .env file shouldn't be uploaded to the cloud / github. But, Heroku must know it's values otherwise the app won't run. There are 2 ways to setup the env variables.

Version 1: via the command

It is possible to setup the heroku app without navigating to the website. After pushing your data with the Procfile and edited port, you can setup the env variables via the terminal with the following command:

heroku config:set

After the 'set' you can paste the variable with it's declaration:

heroku config:set MONGODB_URI=mongodb+srv://http...

Version 2: via the website

You can set the variables via the website by navigating to your app > settings > Reveal config files afbeelding.png

Here you can setup your env variables in an UI.

Short installation guide for Heroku

Step 1: Changing your port

Change your port in your app.js or index.js so Heroku can find it's own port. You can do this using the env variables:

.listen(process.env.PORT)

Step 2: Create your Procfile

Create your Procfile. This file is needed for Heroku so it knows which file he needs to read to start the application. The Procfile should not have a file-type and should look something like this: Procfile.png

Inside your Procfile you can add a lot of commands that Heroku can run. The 'web' command is essential for your Node-app. You can start your node app by adding this to your Procfile:

web: node index.js

Step 3: Edit your package.json RECOMMENDED

Heroku must know which version of Node your app uses. Most of the time the version of node can already be found at dependencies. If you add Node to your dependencies, you don't really have to change your package.json. But, if you don't have node as a dependency, you must add the version of node like this:

"engines": {
  "node": "12.x"  
}
> "12.x" is the version of Node. So with 12.x you say 12.+ or version 12.0 or newer. Make sure you edit your version to the version you are using

You can also add this part to your package.json if you have node.js as a dependency. That way Heroku can always find the version of your node.

Step 4: Deploy your app to Heroku

Option 1: Deploy your local code to Heroku

  • Login to Heroku via the terminal:
heroku login
  • Make a remote for Heroku with this command:
heroku git:remote -a appName

Change 'appName' with the name of your app

  • Create your Heroku app by going to the website, login, and create a new app

Or...

  • Stay in the teminal, and create your Heroku app with:
create appName

Change 'appName' with the name of your app

  • Add and commit your files and then push it to Heroku:
git add .
git commit -m "deploying webapp"
git push heroku master

Or...

  • If you want to push your files from another branch instead, use these commands instead of the commands above:
git add .
git commit -m "deploying webapp"
git push heroku _localBranchName_:master

Change 'localBranchName' with the name of your branch you want to push

  • Set your env variables for Heroku
heroku config:set env variable

Change 'env variable' to the complete variable with the declaration. Like this:

heroku config:set MONGODB_URL=mongodb+srv://thisIsSomeURI=MongoDB%20Compass&ssl=true

Option 2: Deploy your app via Github

  • Go to the website and login

  • Navigate to your app or create a new app on the website

  • Click on the button: Deploy from github afbeelding.png

  • Connect to your github account and give permission

  • Select your branch and click on the button 'automaticly deploy your branch'

  • Now your Heroku app will be automaticly updated with your selected branch!

It is best if you are not using your master branch during development. Heroku needs time to upload and update your app. The best thing to do is to deploy a (new) branch which only updates after a complete new version of your app has been developed. That way Heroku wouldn't be too busy with data trafficking.

Difference between local deploy and github deploy

With the local deploy, you can easily push your files through the console / terminal. That way you can, without visiting the website of Heroku, update your webapp. This is perfect if you are working alone.

But, if you are working in a team. There is a big chance you are using github as well. With git everybody can edit, push and pull the files. If you deploy your app with github, you give yourself and your team more flexibility and control about what and when files needs to be deployed. You can do this by making a seperate branch that automaticly deploys your files when a change has been committed.

I have chosen for deploy with github because that way we only have to keep one branch up to date. That way everybody has control over which files are on the heroku server.

Stap 5: All Done!

Go to your link from your app which is probably something like: https://app-name.herokuapp.com

Sources

General

Backend

📝 Backend Chosen Topics

Clone this wiki locally