How to Run a Simple HTML/CSS/Javascript Application on Heroku

This is my first Medium post so bare with me on my writing skills (in a great desperate need for improvement).

Heroku allows web-hosting but what do you know? They do not host static websites straight up with HTML, CSS, and JS.

Initial attempt of trying to do so, I was hit with the following Build Log error:

!     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

After the anticipated relief of deploying a day’s worth of hard work, the push failed log showed up. So what did we do wrong this time? What is a buildpack? Buildpacks are composed of a set of scripts depending on the programming language used. These scripts are responsible in transforming the deployed code to be excuted on a dyno manager. (The scripts gather the dependencies, which then outputs generated code. When pushing onto Heroku, the code is received by the slug compiler which transforms the repo into a slug and off to a dyno for execution).

Listed on the Heroku reference page, the supported buildpacks offered are: Ruby, Node.js, Clojure, Python, Java, Gradle, Grails, Scala, Play, PHP, Go. These buildpacks are searched within the deployed repo for the specified language mentioned. However, the typical HTML, CSS, Javascript repo does not consist of any of those languages mentioned above. Hence for the reason for the “no default language could be detected for this app” error.

Don’t worry, it’s an easy fix for your portfolio or personal blog. A small little trick to get Heroku to recognize the files of your static website is to trick it into being a PHP app. That’s right, PHP.

I’ll assume the Heroku app is all set up and the final step is the deployment process. Here’s the simple but yet “not going to argue with you” solution:

  1. Head to root directory of the repo that contains index.html which dictates the main HTML page.
  2. Run touch composer.json to create a file called composer.json.
  3. Add the following line: {} inside.
  4. Run touch index.php to create a file called index.php.
  5. Add the line: <?php include_once("index.html"); ?> inside.
  6. Now update the repo on Github if it’s connected to your account or Heroku command git push heroku master . Wait for the automatic deploy to work its magic and tada!

Now you have access to your Heroku website up and running on ****.herokuapp.com

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.