Skip to content

Instantly share code, notes, and snippets.

@Suyash-Purwar
Created June 28, 2018 14:48
Show Gist options
  • Save Suyash-Purwar/1f38fdcce351ef7e43cbd3d7d790dc89 to your computer and use it in GitHub Desktop.
Save Suyash-Purwar/1f38fdcce351ef7e43cbd3d7d790dc89 to your computer and use it in GitHub Desktop.
Instructions to deploy your app to Heroku

Deploy to Heroku

Heroku

Heroku is a free hosting service for hosting small projects. Easy setup and deploy from the command line via git.

Pros
  • Easy setup
  • Free
Cons
  • App has to sleep a couple of hours every day.
  • "Powers down" after 30 mins of inactivity. Starts back up when you visit the site but it takes a few extra seconds. Can maybe be solved with Kaffeine

Install Heroku

1 . Create an account on https://heroku.com. This should be pretty straight forward. 2 . Install the Heroku CLI on your computer:
https://devcenter.heroku.com/articles/heroku-cli. Check that you have the heroku-cli installed by checking the version number in your terminal:

heroku --version

3 . Connect the Heroku CLI to your account by writing the following command in your terminal and follow the instructions on the command line:

heroku login

Use your credentials from the earlier account creation.

Create the project

1 . Create a new project, for example a simple express-server. You have to have a package.json and all your dependencies must be added to this package.json. Make sure of this otherwise the app will crash.

2 . Heroku will look for a startup-script, this is by default npm start so make sure you have that in your package.json (assuming your script is called app.js):

 "scripts": {
    "start" : "node app.js"
 }

3 . You also have to make changes to the port, you can't hardcode a dev-port. But you can reference herokus port without knowing it by a special variabel. So add the following to your code:

const port = process.env.PORT || 4000;

When you upload to Heroku it will use the environment-port but when you are developing it will use the port 4000. Then reference this port in your app:

app.listen(port);

4 . Then create a remote heroku project, kinda like creating a git repository on GitHub. This will create a project on Heroku with a random name. If you want to name your app you have to supply your own name like heroku create project-name. The command below will just create a random name:

heroku create

5 . Push your app to Heroku like pushing to GitHub expect for origin you have heroku (you will see a wall of code).

git push heroku master

6 . Visit your newly create app by opening it via heroku:

heroku open

If you are getting errors you can view the error logs by running this command:

heroku logs --tail

This might give you a hint on what's wrong.


Extra: deploy to Microsoft Azure

Azure

You can also use Microsoft Azure to deploy a smaller app for free to the Azure platform. The service is not as easy as Heroku and you might go insane because the documentation is really really bad at some times and it's hard to troubleshoot.

The pros are that on Azure the app will not be forced to sleep. It will sleep automatically on inactivity but you can just visit it and it will start up.

Installation

1 . Create a Microsoft Account that you can use on Azure:
https://azure.microsoft.com/sv-se/

2 . Install the azure-cli:
https://docs.microsoft.com/en-us/cli/azure/install-azure-cli This might cause some trouble, you will see. Remember to restart your terminal or maybe your computer if the commands after this does not work

3 . Login to the service via the command line and follow the instructions:

az login

You will be prompted to visit a website and paste a confirmation code

Create the project

1 . Create a new project, for example a simple express-server. You have to have a package.json and all your dependencies must be added to this package.json. Make sure of this otherwise the app will crash.

2 . Azure will look for a startup-script, this is by default npm start so make sure you have that in your package.json (assuming your script is called app.js):

 "scripts": {
    "start" : "node app.js"
 }

2 . Create a resource group for your projects, replace the name to whatever you want just be sure to use the same group name in all commands to come. You only have to create the resource group and service plan once, then you can use the same group and plan for all other apps you create if you like.

az group create -n NameOfResourceGroup -l northeurope

3 . Create a service plan:

az appservice plan create -n NameOfServicePlan -g NameOfResourceGroup

4 . Create the actual app and supply the service plan and resource group

az appservice web create -n NameOfApp -g NameOfResourceGroup --plan NameOfServicePlan

5 . Create deployment details. A git-repo is not created automatically so we have to create it with a command:

az appservice web source-control config-local-git -g NameOfApp -g NameOfResourceGroup

6 . From the command in step 5 you should get a url in return. Copy this url and add it as a remote to your local git project, for example:

git remote add azure https://jesperorb@deploy-testing.scm.azurewebsites.net/deploy-testing.git

7 . Now you should be able to push your app:

git push azure master

You should be prompted to supply a password, this should be the pass to your account. If not, you can choose a different password at your Dashboard for Azure: https://portal.azure.com/

Choose App Services in the sidebar to the left and the choose your app in the list that appears then go to Deployment Credentials to change your password for deployment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment