deploying ionic2 as a web app with rails5 and heroku February 6, 2017

I recently wanted to host an ionic2 app as a web app. I wasn’t able to find a clear walkthrough out there so I figured I write it down in hopes of helping the next person.

Creating the App

  1. If you’re starting from scratch, create a new rails app with rails new your_name_here and move into the new directory.
  2. Using git submodules clone your Ionic2 app into a new folder named “client” in your rails root folder. git submodule add <YOUR_IONIC_GIT_REPO_HERE> client
  3. Get your ionic app up and running. Move into the client directory, cd client, and install its dependencies, npm install. Then run ionic build.
  4. In order for rails to be able to serve the app symlink public/ to client/www. From the rails root folder run rm -rf public && ln -s client/www public.
  5. Run rails server and you should see your ionic app running on localhost:3000.

Deploying to Heroku

  1. Ok, now create your heroku app. heroku create and add two buildpacks. heroku buildpacks:add https://github.com/JWesorick/heroku-buildpack-nodejs && heroku buildpacks:add heroku/ruby. The order is important. Run heroku buildpacks to double check they are in the correct order. Nodejs should be first and ruby second. The nodejs build pack is the same as herokus nodejs buildpack but with /client added in two spots.
  2. Heroku needs the devDependencies from your package.json file installed on production to properly build. You can enable this by running heroku config:set NPM_CONFIG_PRODUCTION=false. Alternatively you can add the needed devDependencies to dependencies in your package.json file.
  3. Heroku also uses postgres as a database so comment out gem sqlite3 in your Gemfile and add gem pg, then run bundle.
  4. Heroku also needs to build your ionic app once it’s on heroku’s servers. Add "heroku-postbuild": "ionic-app-scripts build" under "scripts" in your package.json file.
  5. That’s it. Commit all your changes and do a git push heroku master. Then heroku open. You should see your app running on Heroku.

Protected Repo’s

If you’re hosting your ionic app in a private repo heroku will throw an error when you deploy. Edit your .gitmodules file and add authentication. See some options at https://devcenter.heroku.com/articles/git-submodules#protected-git-submodules.

Adding an api

At this point rails will be able to serve your angular app, but not much else. If you want to host your api through rails, or host other pages through another subdomain, you’ll need to do a few more things.

  1. Prevent rails from rendering public/index.html by defalut. Add config.public_file_server.index_name = 'other-index' to your application.rb file.
  2. Edit your routes.rb file. Mine looks like this:
# routes.rb
Rails.application.routes.draw do
  namespace :api,
    path: '/',
    constraints: { subdomain: ->(sd) { !sd.blank? && !!/^api.*$/.match(sd) } } do
      mount APIBase => '/'
  end

  root to: 'welcome#index'
end

and welcome_controller.rb ruby # welcome_controller.rb class WelcomeController < ApplicationController def index render file: 'public/index', layout: false end end

This routes traffic with the api subdomain to my api and everything else to my angular app.

What Next

I’m just getting started with this setup so there may be more pain points that need to get ironed out. As I come across them I’ll be updating this post or adding a new one.


@JakeWesorick