Designers and developers have to be able to produce stunning and engaging products, packed full of features as well as great functionality. They have to ship these products out of the door with great speed and are then tasked with having to keep them updated often in order to stay on top of their game and ahead of the curve.
On top of all of this, one persistent concern that developers come up against is hosting – where do they go, what platform they use? Is it scalable, affordable and does it suit the requirements not only for their needs but for the application itself? There are so many options available that this can all get a bit confusing, to say the least.
This tutorial will take a look at the hosting features and options available through Heroku.
This is a cloud-based hosting solution that is as simple to use as it is powerful to play with. We will go from creating an account to pushing out a live application and along the way you’ll come to see how hosting and server management has never been easier!
Before you begin exploring the Heroku environment, you first need to create an account with them. Assuming you haven’t already registered, head over to www.heroku.com and create your free account. You will have to confirm your email address, but the steps are minimal and your account should be active in less than a minute.
Grab your toolbelt
Once your account is active you will be authenticated into the account dashboard. Heroku will give you some simple quick start guides here, but before you can really interact with the service you will need to download the Heroku toolbelt. This is a command line tool that is the key to effective Heroku application creation and management.
Head to toolbelt.heroku.com and download the application for your preferred operating system. You can also choose a standalone install using wget to download and run a bash script. Installation should take no more than a minute and will save you a lot more time in the future!
Once you have installed the toolbelt you will need to log in to your Heroku account through the command line. Enter ‘heroku login’ into the command line and follow the prompts to log in using your account credentials. If no public key is detected one can be created, otherwise it will upload the existing public key and associate it with your account.
Creating an application is simple. Using your command line, navigate to the directory in which your local code will live. Initialise a new Git repository within this directory using ‘git init’. Create an app using the ‘heroku create’ command. You can optionally pass in the name for the application, which will form the subdomain of the URL.
001 > git init 002 > heroku create pipsy
Remote Git repository
After creating your application, Heroku will first generate a hosted URL for your application. It will also create a remote Git repository for you. This will be added as a remote branch to your local repository, making it incredibly straightforward for you to push to the remote server from your command line by using the ‘heroku’ remote branch.
001 > git remote -v 002 heroku firstname.lastname@example.org:pipsy.git (fetch) 003 heroku email@example.com:pipsy.git (push)
One massive time-saver to make use of is the ability to open your application URL in the browser directly from the command line. This can be accomplished by simply entering ‘heroku open’ from within the local directory. We don’t yet have anything to display, so let’s start by creating a simple static site and uploading it to the server.
001 > heroku open
Simple static site
Heroku is designed to effectively manage and power your dynamic applications. It does not have any default ability to detect and host static HTML pages. We can bypass this by creating a PHP file and use that to include our static HTML file content. For example, write ‘<?php require_once(‘index.html’); ?>’ into a new file called ‘index.php’.
With your base static site ready to go, simply add the file changes to the local Git repository as part of your normal workflow, including a commit message. To deploy to the Heroku server, push the commit to the remote branch created for you. Heroku will detect the PHP file and set up the server for you by bundling Apache and PHP.
001 > git add --all 002 > git commit -m “Initial commit” 003 > git push -u heroku master 004
Following the brief Git command line responses from Heroku as it obtains, reads and builds your application onto the cloud server, let’s now make sure that the application is up and running. Once again, run the ‘heroku open’ command from the Terminal and the static site should now be visible in your browser, as can be seen below.
001 > heroku open 002 Opening pipsy... done
Detect Node apps
Heroku will detect a Node app if it finds a ‘package.json’ file. Create one using ‘npm init’ from the command line or use the project demo files. Any dependencies such as Express must also be included in this file in order for Heroku to process. You must also specify the versions of Node that are compatible with your application.
You also need to create a file called Procfile. Inside of this you need to include the declaration to request the web dyno for HTTP routing and to start the node application using app.js as the default file: ‘web: node app.js’. Test this works by using the toolbelt to call Foreman to run the application locally.
001 > foreman start 002 Fire default processes
Deploy Node app
Now that we have both the Procfile and package.json files and we have tested the application locally using the built-in Foreman tool from the toolbelt, we can now commit the code and push the updated repository to the remote branch and deploy it to the server. Heroku will install any dependencies and run the web dyno default process.
Scale and configure
After deployment we want to ensure that we have set the NODE_ENV value to production and that we have at least one web dyno running to serve the application for us. A single dyno is free and both commands are run from the Terminal through the toolbelt. You can also check the dyno status by entering the command ‘heroku ps’.
001 > heroku ps:scale web=1 002 > heroku config:add NODE_ENV=production
One of the really useful features available to use directly from the toolbelt command line interface is the ability to view the remote log file for the application. This can help you find any potential issues if your app is not running and gives an audit of changes made to the service, such as scaling.
001 > heroku logs
Enter Maintenance mode
If you are in the process of updating your site or you need to temporarily take it offline for whatever reason, the toolbelt utility lets you seamlessly slip your application into Maintenance mode. Doing so will display
a default maintenance page, which you can customise by setting a new config value URL. Entering Maintenance mode is very straightforward, all you have to do is input the following command.
001 002 > heroku maintenance:on 003
So far we have exclusively used the toolbelt utility for all Heroku interaction. You can manage your application, view logs, scale resources, set collaboration access and much more through the online dashboard for your applications too. To access these features and find out exactly what’s available, visit dashboard.heroku.com and select your application to configure. That’s all there is to it – now managing your apps can be made as simple as can be.