Deploy: Ionic 3 App to Heroku

Launch an App with this Ionic 3 and Heroku Cheatsheet

Getting Started

Heroku can run your ionic app in a NodeJS environment. To do that we will need to install the Express web application framework which is a compatible server for Heroku:

        $ npm install express --save

Configure your Ionic App

Create an app.json file in the root of your project and paste in this code with your app's details:

        "name": "AppName",
        "description": "App Description",
        "repository": "",
        "logo": "",
        "keywords": ["ionic2", "heroku", "pereless360"]

Configure your Express Server

Next, Create a server.js file in the root of your project and paste in this code as is:

    var express = require('express'),
    app = express();
    app.set('port', process.env.PORT || 5000);
    app.listen(app.get('port'), function () {
        console.log('Express server listening on port ' + app.get('port'));

Test your App

Now run your app with npm start and your app should be running at localhost:5000 in your browser:

    $ npm start

Create a Heroku App

Now that you have express.js configured on your app, you're ready to host it on Heroku! Just log on to your account and Create a New App:

Go to Deploy on Your Heroku App's Dashboard

After you created your Heroku App, you can then upload your Ionic 3 project by going to the Deploy tab for instructions, but for your convenience I have those below:

Login with Heroku CLI

If you don't have Heroku CLI installed, you need to do so first Heroku CLI

    $ heroku login

Create a new Git repository

Initialize a git repository in a new or existing directory

    $ cd my-project
    $ git init
    $ heroku git:remote -a todos360

Deploy your application

Commit your code to the repository and deploy it to Heroku using Git.

    $ git add .
    $ git commit -am "make a difference"
    $ git push heroku master

Updating you Heroku App

After you've made changes, (be sure to run ionic serve to save them). Then go into your project directory.

    $ heroku login
    $ git add .
    $ git commit -am "make it better"
    $ git push heroku master

Run your App

Check out this example application To Do List App by Pereless360

    $ heroku open

That's it, Congrats!

Subscribe to Newsletter for Upcoming Ionic 3 & Firebase App Posts.