How to Deploy a Simple APP TO Heroku

Okay so you’ve built a simple single page app using nothing but plain HTML, CSS, and JavaScript. You want to throw it up on the internet for people to see. After all, you worked hard on this thing! I went through this, I had my app built and I wanted to deploy it to heroku so that other people could see it live. There is always GitHub pages, but that comes with some weird quirks that I don’t quite understand.

The solution? Build your own server and deploy it on Heroku! If you’ve never done that before, trust me, it is a lot easier than it sounds. We’re going to walk right through this.

There are a few things you are going to need to do this, and there is a good chance you already have most of them.

• Git
• NodeJS
• Heroku account
• Github account

1. Create your app

Build an app and get it pushed to a repository on GitHub. Exactly how to do that is beyond the scope of this article.

Once you’ve got your app built it’s time to add our back end to it!

Set Up the Folder Structure

Now that you’ve got your app built, we need to set our folder structure up in an app like way. That looks something like this:

• public

  • index.html
  • index.js
  • styles.css
• app.js

app.js is going to be our server, so your will need to create that. And go ahead and stick your app’s tiles in a folder titled public or whatever floats your boat. Now let’s build our server!

1. Add a Server

If you’ve never made a server before ( I hadn’t when I did this), this may sound like a big task. It could be for sure, but we are going to keep it as simple as possible.

Install Express

Let’s start by installing express. Express is the most popular server framework for NodeJS and makes building our server a million times easier. All you have to do is stick this in your terminal:

$ npm install express --save

This will create a package.json file, and a node_modules folder. You don’t even need to touch those!

Now head over to your app.js file, it’s time to write our server code. If you followed all the instructions so far you can copy and paste this basic server into your file. Take a minute and see if you can tell what this is doing.

// create an express app
const express = require("express")
const app = express()
var path = require("path")

// use the express-static middleware
app.use(express.static("public"))

// define the first route
app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname + "/index.html"))
})

// start the server listening for requests
app.listen(process.env.PORT || 3000, () => console.log("Server is running..."))

3. Procfile

Next you just need one more thing! Create one more file and name it Procfile. Be sure not to give it a file extension, just Procfile, with a capital P.

Inside of that Procfile we need this super complicated code:

web: node app.js

Did you get that? All this file does is tell Heroku what command to run to start our app. If you would have named your server file monkey.js then that would replace app.js.

4. Auto-Deploy from GitHub

Lastly, we need to set up Heroku and GitHub to work together. Head to the Heroku dashboard, and in the top right corner there is a ‘new’ button. Create a new app, give it a name.

Almost there!

Click on the app you just created, and go to the ‘deploy’ tab. The under deployment method, choose GitHub. You may need to log into your GitHub account.

Next, underneath deployment method, you can choose to link this app to a repository on your GitHub account. Choose your new apps repository.

Lastly, below that you can enable automatic deploys.

Go back to your text editor and push the changes to your app to GitHub. If you enabled auto-deploy on Heroku, your app will begin deploying automatically. If you didn’t, you will need to go back to Heroku and click Deploy under the manual deploy section.

That’s it! Your app should now be live on Heroku! Congratulations!

Potential Problems

One thing I ran into when doing this. I kept getting an error Push failed: cannot parse Procfile. in the build log on Heroku. I found an answer on stack overflow (I know, who would have thought), and it seems like this may be a problem with Windows. I had to actually open up Notepad and copy/paste the text from my Procfile, then save as, and overwrite my old Procfile. Worked perfectly after that!