Deploying a Yeoman/Angular app to Heroku

So you’ve used Yeoman to Kickstart your AngularJS app and now you’re ready to show it to the world? Well you can, by deploying it to Heroku!

Prerequisites

To get the most out of this tutorial we recommend you have the following skills and resources available:

A terminal and basic knowledge of the command line
NodeJS and NPM installed
A Heroku account and the Heroku Toolbelt
An existing Yeoman generated static app

Files

You can find a repo of this tutorial project here.

Let’s show your app to the world!

Node Packages

Since our Yeoman site is just a set of static pages, we can’t just stick it up on Heroku and expect it to work. Heroku needs a server to serve up the pages for us. We’re going to use Node to serve up our static site with only a few files and changes. First, let’s install the necessary dependencies to deploy to Heroku.

npm install gzippo express --save

Gzippo lets us serve gzipped assets and Express is a simple application framework for Node which will make serving our site a little easier

Server File

We need to create a server file: web.js. We’ll put this in our root directory /web.js

var gzippo = require('gzippo');
  var express = require('express');
  var app = express();
 
  app.use(express.logger('dev'));
  app.use(gzippo.staticGzip("" + __dirname + "/dist"));
  app.listen(process.env.PORT || 5000);

That’s all we need to serve up our site.

The dist directory

Notice that our server is serving up the /dist directory. If you can’t see the /dist directory it’s because we haven’t built our app yet.

grunt build

This will compile everything, and give you a nice clean dist/ directory ready to be served up. Isn’t grunt fantastic?

Important
It’s worth noting that the dist/ directory is ignored by git by default (they assume you only want to version control the development project, not the compiled app). Since Heroku uses git to deploy, we’ll need to remove dist/ from .gitignore to make sure it gets committed.

Heroku

Now let’s add a Procfile, also in root. The Procfile tells Heroku how to kickstart our app. In this case we’re telling it to use NodeJS to run our web.js server file. /Procfile

web: node web.js

Right! It’s the moment of truth! Let’s deploy to Heroku! First let’s turn our project directory into a git repo

git init

Assuming you have a Heroku account and have the Heroku Toolbelt installed, just run:

heroku create <your_app_name>

Now commit your code and deploy it by pushing to Heroku!

git add .
  git commit -m "Initial Commit"
  git push heroku master

You may need to scale up your web workers to at least one:

heroku ps:scale web=1

To open your app on Heroku and marvel at your accomplishments, run:

heroku open

Let me know in the comments if you’d like me to write more about working with Angular.

Frequently Asked Questions (FAQs) about Deploying Yeoman/Angular App on Heroku

What are the prerequisites for deploying a Yeoman/Angular app on Heroku?

Before you can deploy a Yeoman/Angular app on Heroku, you need to have a few things set up. First, you need to have Node.js and npm installed on your local development machine. You also need to have Git installed and be familiar with its basic commands. Additionally, you need to have a Heroku account and the Heroku CLI installed. Lastly, you need to have an existing Yeoman/Angular app that you want to deploy.

How do I prepare my Yeoman/Angular app for deployment on Heroku?

Preparing your Yeoman/Angular app for deployment on Heroku involves a few steps. First, you need to create a Procfile in the root directory of your project. This file tells Heroku how to run your app. Next, you need to modify your package.json file to include a start script and specify the versions of Node.js and npm that your app requires. You also need to ensure that your app listens on the correct port and that it serves static files from the dist directory.

How do I deploy my Yeoman/Angular app on Heroku?

Deploying your Yeoman/Angular app on Heroku involves pushing your code to a Heroku remote repository. First, you need to create a new Heroku app using the Heroku CLI. Then, you need to initialize a new Git repository in your project directory and commit your code. Finally, you need to push your code to the Heroku remote repository using the git push command.

How do I troubleshoot deployment issues on Heroku?

If you encounter issues when deploying your Yeoman/Angular app on Heroku, you can use the Heroku CLI to view the logs of your app. The logs can provide valuable information about what went wrong during the deployment process. You can also use the Heroku CLI to run one-off dynos to debug your app.

How do I update my Yeoman/Angular app on Heroku?

Updating your Yeoman/Angular app on Heroku involves pushing your updated code to the Heroku remote repository. First, you need to commit your changes using Git. Then, you need to push your changes to the Heroku remote repository using the git push command. Heroku will automatically build and deploy your updated app.

How do I scale my Yeoman/Angular app on Heroku?

Scaling your Yeoman/Angular app on Heroku involves adjusting the number of dynos that are running your app. You can increase the number of dynos to handle increased traffic, or decrease the number of dynos to save costs during periods of low traffic. You can adjust the number of dynos using the Heroku CLI or the Heroku Dashboard.

How do I monitor my Yeoman/Angular app on Heroku?

Monitoring your Yeoman/Angular app on Heroku involves using the metrics provided by Heroku. These metrics include information about the performance of your app, such as response times and memory usage. You can view these metrics in the Heroku Dashboard.

How do I secure my Yeoman/Angular app on Heroku?

Securing your Yeoman/Angular app on Heroku involves configuring your app to use HTTPS and setting up environment variables to store sensitive information. You can configure your app to use HTTPS by adding a SSL certificate to your Heroku app. You can set up environment variables using the Heroku CLI or the Heroku Dashboard.

How do I connect my Yeoman/Angular app to a database on Heroku?

Connecting your Yeoman/Angular app to a database on Heroku involves adding a database add-on to your Heroku app and configuring your app to use the database. You can add a database add-on using the Heroku CLI or the Heroku Dashboard. You can configure your app to use the database by setting up a database connection in your app’s code.

How do I handle file uploads in my Yeoman/Angular app on Heroku?

Handling file uploads in your Yeoman/Angular app on Heroku involves using a file storage service, such as Amazon S3. You can configure your app to upload files to S3 by setting up a S3 bucket and configuring your app to use the bucket. You can also use a Heroku add-on, such as Bucketeer, to handle file uploads.