Skip to content

🏁 Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!

Notifications You must be signed in to change notification settings

samuelfreiberg/learn-heroku

 
 

Repository files navigation

Learn (How to Deploy a Web Application on) Heroku

heroku logo

Why?

You know how to create a web application, but that knowledge is only useful if you how to show the app to people!

What?

Easily deploy your node.js web application to Heroku so you can start testing it with end-users as soon as possible!

You'll have a public URL for your app in 5 minutes which you can share with real people and get feedback/validation for your idea!

"Top 7" Key Benefits:

  • Basic apps are Free!! (e.g. Demo, Hackathon or "Low Traffic" Personal "Blog" or Portfolio site)

  • Quick and Easy Deployment from your development machine or GitHub! A couple of clicks or a single command is all it takes!

  • Excellent knowledge base / documentation for both simple and advanced topics! (if you get stuck, ask a question we can/will help!)

  • Continuous Deployment is easy from a GitHub repository using "Hooks". (see step-by-step tutorial below!)

  • Great Range of "Addon Services" you can use with your app in a couple of clicks (e.g: PostgreSQL, ElasticSearch, Monitoring etc.)
    and most have a "free tier" so you can get started without spending a penny! See: https://elements.heroku.com/addons

  • "Industry Standard" Service Quality is really good (under the hood Heroku uses Amazon Web Services but they do all the "plumbing" so you don't have to waste time on "DevOps" until you're ready to scale, at which point just pay for a pro!)

  • Cost-effective for your first 10k users (don't waste your time on "DevOps" till you have validated your App Idea with real people!)

Who?

Anyone building for the web who values their time and wants/needs a painless way to deploy, monitor and automatically scale an app!

How?

Beginner: Basic Heroku Deployment of Node.JS App in 5 Minutes

Pre-requisites:

No Experience/Knoweldge Required

  • No Node.js or other knowledge required
  • All web-based (no command line, we can learn that "CLI" later!)

1. Fork this repository on GitHub!

In your web browser navigate to: github.com/dwyl/learn-heroku (if you aren't already on the page)

Click the "fork" button:
learn-heroku-fork-button

You should now see something similar to this: image
(whith your GitHub username in place of mine)

2. Log into your Heroku Account and Create a New App

Note: if you don't already have a Heroku account set one up now!

Visit: https://dashboard.heroku.com/new and create your new app.
example:
create-new-app
(you will need to give your app a different name; all heroku apps are unique.)

3. Use Heroku (Web) UI to Deploy the Application

Once you create your app in Heroku you will be shown the "Deploy" screen:

learn-heroku-deployment

Connect your Heroku app to the GitHub Repository you created (by forking) in step 1 (above).

Steps:
  • Click on the "Connect to GitHub" button
  • Search for the repository learn-heroku in our case
  • Click on "Connect" button.

Now click "Enable Automatic Deploys" to ensure that any changes made on GitHub are automatically deployed on Heroku:

enable-automatic-deploys

4. Test The Deployment Works by Updating a File in the Forked Repo

Back in GitHub, use the Web user interface (UI) to edit one of the files in your fork of learn-heroku.

My suggestion is update (increment) the version number in the package.json file:

Click the edit icon:
edit-package-json-button

In the edit view, increment the version number: edit-version-number

Now scroll down to the Commit changes section of the edit view:

learn-heroku-commit-changes

write a descriptive commit message and click the "Commit changes" button.

Note: we typically don't encourage people to commit directly to master but given that this is your personal fork you can do it this one time.

You should see something like this: learn-heroku-changes-committed

That will trigger the Heroku deployment of the Hello World Application!

5. Visit the Heroku App in your Web Browser

In my case the URL for my app is: https://hello-world-heroku-node.herokuapp.com

You should expect to see:
learn-heroku-hello-world

Congratulations! You just deployed your first app on Heroku!




Intermediate: Detailed Step-by-Step Instructions a "Real" App

See: elixir-phoenix-app-deployment.md

Intermediate: Environment Variables on Heroku

See: github.com/dwyl/learn-environment-variables#environment-variables-on-heroku

Background Reading

Frequently Asked/Ansered Questions (FAQ)

Isn't Heroku "Expensive" for the CPU/RAM You're Getting?

Heroku costs more per unit of computing resource than the equivalent infrastructure provider (e.g: AWS / DigitalOcean / GoogleCloud / Azure / etc.) but it's cheap if you factor developer's time as your biggest cost/constraint!
Setting up deployment to AWS with all the benefits/features Heroku has out-of-the-box will take hours. So unless your developer's time is free or you are the developer and want to spend a day on deployment instead of building features to solve the end-user's problem, use Heroku and focus on building the product!
See: dwyl#3

About

🏁 Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%