Heroku Hosting: Put Your Website on the Cloud

Get your angular.js website on the internet with Heroku. Write a Node.js backend, use the command line, and more!

Read the article or watch the video!

Today we are going to put a local web application on the Internet with Heroku. Heroku is a place we can host our code so that anyone around the world can see it. Let’s take the code from the Angular Endpoints tutorial and put it on the web. If you haven’t done the Angular tutorial, no worries! We will barely look at that code — we are just focused on getting it on the cloud. We’ll have to use Heroku because our angular code has directives, which are dynamic and won’t work on GitHub Pages.

Going into our folder, we’ll create a new file called package.json. This will contain all the metadata (details) about our application. Most importantly, it will list our dependencies that are needed to run our website and we will install those dependencies later. For now, just fill out your package.json like this…

We name our app, give it a version, and tell it to start at the server.js file. We will be writing the back-end (or server-side) of our application in the server.js file with something called Node.js. Node.js is a platform that allows us to write our server-side in JavaScript instead of some other back-end language. Before, when we created the HTML, CSS, and Angular.js side of our application, we were creating the front-end — now we are writing the back-end.

We also have one dependency, Express (Version 4.13.3), and this is a Node.js framework that makes it easy to get our server up and running. Next, we’ll create our Procfile, which will tell Heroku what command to run and where to look to start our server. In this case, it should look to the server.js file.

Lastly, we will write out server.js file with Node and Express.

First, we require Express and create an Express application. Then, we set the port number, which could evaluate to one of two things. With process.env.PORT, we allow Heroku to set the port number (usually port 5000) and if that doesn’t work, then we default to port 8080.

Next, we write app.use(express.static(__dirname))s so that our static files (images, CSS) can be served and shown on the webpage. __dirname evaluates to the file path of the directory (folder) so all of our static files should be in or nested within this directory. With app.get(), we set up some routing for our application. When it is first loaded (‘/’), we run a function with the request and the response as parameters and tell the response to render the index (really index.html) file. This file will be able to access all of our front-end code, including our directives, since everything is linked inside of it.

Finally, we start our server. In the world of the Internet, users search a URL and by doing so, they send a request. The server, which is always listening for requests, sends a response that contains the webpage. To start our server, we have to get it to listen so we run the app.listen() function with the port number we set earlier and print out that the app is running.

Going to the command line, we’ll cd into our current directory (learn basic command line / terminal here on my channel) and install our dependencies. We will be using npm, which is a part of the Node.js platform, so if you don’t have npm, you can download it here with node. Once in your directory with the package.json file, write npm install. This will install all of our dependencies or in this case, Express.

With our local code set up, we’ll go to the internet and create a Herkou account. To do this, we’ll go to https://signup.heroku.com/login and enter our information.

For primary development language, we’ll choose Node.js and then, we’ll click submit.

Now, we need to confirm our email…

And once it is confirmed, set the password and then proceed with the account.

Our Heroku account is set up! We just need to bring Heroku to our command line so we can push it up to the cloud. To do this, we’ll download the Heroku Command Line Tools at https://devcenter.heroku.com/articles/heroku-command-line.

With the tools downloaded, double check to see if you have it by writing heroku — version

Next, from the command line, we will login with the command heroku login. After entering your information, you should see something similar to this…

We can see if this application works if write go heroku local web in the command line…

… and then go to http://localhost:5000.

There’s our application! Now, this is only running locally on my computer — meaning if you go to localhost:5000, you will not see what I see. We’ll go ahead and stop our localhost with command (or control) C and get this code to the cloud where everyone can see it. To do this, we will deploy with Git. If you don’t have git, you can click here, download it, and come back to continue. You can check if you have git with git — version (similar to how we checked with heroku). Once you have git, you can intialize this directory as a GitHub repository with the command git init. To learn more about how git works, check out these tutorials.

Next, we’ll add all our changes to the staging area with git add . and then commit them with git commit -m “Initing”.

Now, we are ready to push to the cloud (Heroku), which will host our code! First, we’ll make this a Heroku application with the command heroku create.

This creates our application and names it guarded-brook-64454. If you are doing this tutorial along with me, yours will be named something else and that’s okay! If we go back to our Heroku dashboard, we’ll actually see our app created on the site — however, it doesn’t have our code yet!

To get our code up on Heroku, we’ll write git push https://git.heroku.com/guarded-brook-64454.git master. If you are creating your own Heroku app, instead of guarded-brook-64454, you should put your own app’s name.

It may take a minute for this command to run and so go get a coffee or something. Once it’s done you should see something like…

Notice, it says https://guarded-brook-64454.herokuapp.com/ deployed to Heroku. This means if we go to https://guarded-brook-64454.herokuapp.com/, we should see the result of our code — aka our website. Going to this URL…

And we see exactly what we were expecting! If you go to this URL right now, you’ll also see this code (as I won’t be changing it). If we changed our code, added and committed the changes, and pushed the altered code up to this Heroku application, we would see something different (our altered app). That’s it for this tutorial! Check back next Friday for another post.

Things to Remember:

<!-- Package.json -->
- This file holds the metadata for our application.
- All metadata is held within a JSON object.
- This also holds the dependencies that npm install will download.
<!-- Back-End Files -->
- package.json
- Procfile
- server.js

Plus a Little Extra:

<!-- More on Heroku Command Line-->
https://devcenter.heroku.com/articles/heroku-command-line
<!-- What are Node.js, Express, and Procfile? -->
Node.js - a platform that allows us to write our back-end in JavaScript
Express.js - a Node.js framework that makes writing our back-end easier
Procfile - allows us to declare what commands should be run by Herkou - here we are running a web application with Node.js that starts with the server.js file.

Code from this blog post