Deploying a Static Web Application to Heroku

Deploy your HTML,CSS & JavaScript Application to Heroku

Source: Unsplash

So you have created a beautiful web application which is sitting right there in your computer. What is it doing there ? Don’t you want others to see your creation, your skills ? How can you show your application to the world?

Host it online!!

After you have decided to host your web app online, you will have to decide where in the internet you want to host your application. The best thing to do is to host it on a cloud platform. There are many cloud platforms that allow you to host your application online like AWS, Google Cloud, Microsoft Azure just to name a few. But here we focus on Heroku.

Before starting let’s be clear on what is what.

What is Heroku ?

Heroku is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. It supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.

What is a Static Web Application ?

A Static Web Application is any web application that can be delivered directly to an end user’s browser without any server-side alteration of the HTML, CSS, or JavaScript content. In simple terms an application based on HTML, CSS & JavaScript is a static web application.

Assuming that you already have a web application created, you will have to follow these steps in-order to deploy your application on Heroku. The following steps are applicable to hosting all static web-applications on Heroku. As an example I will use my portfolio and deploy it to Heroku.

1. Create a GitHub Repository and upload your application files
2. Create an account on Heroku
3. Connect your GitHub Repository on Heroku and Deploy

1. Create a GitHub Repository and upload your application files

To learn how to create a new repository, click here. You can take help from here if you want to learn how you can upload files to your repository. Your repository should look somewhat like this once all files are uploaded.

Upload files to your GitHub Repository

Notice that in the above picture, I have created two more files in the same directory where my ‘index.html’ file exists.

But Why is there a need to create a PHP file ?

It is because Heroku will not recognize a static web application which is purely based on HTML, CSS & JavaScript. It will give you the following error message while deploying :

!     No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks!     
Push failed

What are Heroku Builpacks ?

Heroku Buildpacks determine the build process for an app, and which assets and runtimes should be made available to your code at runtime.

So your application needs to be converted to a PHP Application. Follow these steps:

a) Create ‘index.php’ file in the same directory in which your ‘index.html’ file exists. Add a single line to your php file. To know about include_once statement click here.

<?php include_once("index.html"); ?>

b) Create ‘composer.json’ file in the same directory in which your ‘index.html’ file exists. This file describes the dependencies of your project and may contain other metadata as well. Add the following line to your json file.(empty curly brackets)

{}

c) Commit and upload these additional files to your GitHub Repository as you saw in the picture above.

Now, our GitHub Repository is ready.

2. Create an account on Heroku

Visit Heroku and Sign up for a new account if you are a new user or log in to your account. To create a new app, click on the “New” button on the top right corner of the page and then select “Create new app”. The following page opens up where you need to name your app and then click on the “Create app” button.

Creating a new app in Heroku

3. Connect your GitHub Repository on Heroku and Deploy

Once you click on the “Create app” button, the following page opens up:

Connecting to a GitHub Repository on Heroku

Selecting GitHub as your Deployment Method for the first time will require you to login to your GitHub account. Once your GitHub is connected you will be asked to select a repository which contains your web-application. Click on the “Connect” button. This will give you the following options.

Deploying your GitHub branch

Select the branch where your repository exists. Finally click on the Deploy Branch button to deploy your application on Heroku. If the deploy is successful a message “Your app was successfully deployed.” appears at the bottom of the page. Below the message click on the “View” button to see your application on Heroku.

And That’s it !! Your application has been hosted on the Heroku Cloud Platform. You can share the application link with your friends and family to show them what you have created. Anyone with access to the Internet and your application will be able to use your application. How Exciting :)

Support me if you enjoyed reading this article. Click on the picture above. Thank You

My Portfolio on Heroku : https://nakul-portfolio.herokuapp.com/

Note : All the resources that you will require to get started have been mentioned and their links provided in this article as well. I hope you make good use of it :)

I hope this article will help you host your application online using Heroku. Don’t forget to click on the “clap” icon below if you have enjoyed reading this article. Thank you for your time.