Deploying Static Website to Heroku using Node.js

Deploying to heroku is a fun and useful way to serve your apps to the interwebs quickly. And with the right knowledge, you can serve up your static websites as well.
This makes your rapid prototyping tools more powerful as well as centralizing all of your applications. You will need a couple of things to get started:

  • 1. NPM installed on your machine
  • 2. Heroku Account Sign Up
  • 3. Install Heroku CLI on your machine
  • 4. Install Heroku CLI on your machine
  • 5. Login to heroku via terminal or command prompt.
  • 6. Gulp/Bower Installed in your project.

Fun Facts: Heroku is a hosting platform that allows you to deploy dynamic applications for free! Heroku supports Rails, PHP, Node.js, Python, and Java.

Lets get to the meat. Deploying your site in a few steps

First you will need to navigate to your project directory and install express.

$ cd/your-projects/project

Once you get to the correct directory, open a new terminal window and install express using npm

$ npm install express --save

Then in the root directory of your project, create a new file named index.js

Inside of that file copy and paste the code below inside

var express = require('express')
                    var app = express()

                    app.set('port', (process.env.PORT || 5000))
                    app.use('/css', express.static(__dirname + '/css'))
                    app.use('/js', express.static(__dirname + '/js'))
                    app.use('/bower_components', express.static(__dirname + '/bower_components'))

                    app.get('/', function(request, response) {
                      response.sendFile('/', {root: __dirname })
                    })

                    app.listen(app.get('port'), function() {
                      console.log("Node app is running at localhost:" + app.get('port'))
                    })
                  

What this is doing is initializing express as well as setting some parameters to serve the data.
This app starts a server and listens on port 5000 (needed by heroku). The app also gets your css, js, and your initial / file.
You can add more routes to other html files if needed.

Next you will need to create another file named “Procfile” in your root directory. Add the code below inside:

web: node index.js

Heroku needs this file to launch app. If it cant find this file, it goes with standard procedure.

Only a few more steps! Now we need to rearrange our package.json file for heroku to start the app. Most of your dependencies will be under “devDependencies”. These need to be moved to “dependencies”.

Here is an example of my package.json file.

{
                  "name": "name of your app",
                  "version": "1.0.0",
                  "description": "Basic example for a new Foundation for Sites project deployed on Heroku.",
                  "main": "gulpfile.js",
                  "devDependencies": {
                    "bower": "^1.0",
                    "express": "^4.14.1",
                    "gulp": "^3.9.0",
                    "gulp-autoprefixer": "^3.1.0",
                    "gulp-load-plugins": "^1.1.0",
                    "gulp-sass": "^2.1.0"
                  },
                  "js": {
                    "start": "gulp",
                    "build": "gulp sass",
                    "postinstall": "bower install&& gulp sass"
                  },
                  "repository": {
                    "type": "git",
                    "url": "Hook up your repo here"
                  },
                  "bugs": {
                    "url": "http://github.com/zurb/foundation-sites/issues",
                    "email": "foundation@zurb.com"
                  },
                  "author": "ZURB <foundation@zurb.com>",
                  "license": "MIT",
                  "private": true,
                  "dependencies": {
                    "gulp-autoprefixer": "^3.1.0",
                    "bower": "^1.5.2",
                    "express": "^4.14.1",
                    "gulp": "^3.9.0",
                    "gulp-load-plugins": "^1.1.0",
                    "gulp-sass": "^2.1.0"
                  }
                }
              

I am using the foundation framework with my site, but the main takeaways should be the postinstall script, and the dependencies moved under “dependencies”. Heroku runs npm start to run our app, so we need to tell it to run gulp and bower as well. This is done in the postinstall script.

Now all we need to do is initialize our repo and create our app to push to heroku!
First initialize your git repository by navigating to the root directory of your project
$ git init
Then you will need to create your app on heroku.
First log into heroku and provide the correct credentials if you haven’t done so already
$ heroku login
Then you will need to create the app
$ heroku create nameofapphere
Once that is done, switch the empty repo to your newly created app
$ heroku git:remote -a nameofapphere
Then use these commands to push your initial commit
$ git add .
$ git commit -m "initial commit"
$ git push heroku master

Done! Your app should be live and ready to view at your heroku domain. (nameofapphere.herokuapp.com)

Comments
  • Bill Rogers
    Reply

    Great Read!

Leave a Comment