Ways to deploy simple Ember-CLI + Rails app to Heroku

Hello!

I’m researching deploying an Ember-CLI + Rails app to Heroku as a single app.

The entire app is contained in a single git repo, structured like so:

foo/ ← Rails.root
|__ client/ ← Ember app root (subdir in Rails.root)

foo/ is the root of the Rails app, and the Ember-CLI app lives in the foo/client/ directory.

What options are there to deploy this as a single Heroku app?

I’ve found ember-cli-rails as one option. It appears to be an ideal choice when you want to use Rails view templates and I’ve had success getting this working following the instructions in the ember-cli-rails README.

However, I’m wondering what alternative ways are being used to deploy apps like this to Heroku as a single app (I’m aware its possible to deploy 2 separate Heroku apps)?

Are there any ways you’d recommend to serve ember’s own app/index.html at the URL root (avoiding using a Rails view template for the home page)?

Kindest regards and thanks in advance for any guidance,

Eliot

I use GitHub - ember-cli-deploy/ember-cli-deploy: A deployment pipeline for Ember CLI apps

Thanks @varblob!

Do you have any feedback on if it’d be sensible/terrible to write an adapter that when ember deploy:assets is run, does the following:

  • performs a git push heroku master of the combined rails+ember app
  • instead of using ember-deploy-s3 or ember-deploy-redis, use a key-value store adapter that just uses the rails assets directory on heroku that’s generated as part of rake assets:precompile. Perhaps this would be contained within an ember-deploy-filesystem adapter.

The reason I’m trying to avoid Redis/S3 is I’m aiming for an app that has the minimal amount of infrastucture dependencies and maintains reasonable consistency between dev+prod environments. I’d like it to be as simple as possible for ember+rails newbies to grasp. It’d be a stepping stone to a more advanced setup on a later app.

So are you thinking ember deploy builds the files and then puts them into your rails apps public folder under assets with the index.html and then your rails app loads the index.html from file and serves it via some controller.

I can see how that may accelerate adoption as in the same way rails assets is optionally on S3 but not by default.

So are you thinking ember deploy builds the files and then puts them into your rails apps public folder under assets with the index.html and then your rails app loads the index.html from file and serves it via some controller.

That’s what I’m thinking, except index.html wouldn’t be served by a controller, it’d be served from public/index.html by the ActionDispatch::Static middleware. Rails controllers will be solely written for the app’s API.

My guess is that other developers are already doing something like this with their Heroku-deployed Ember-CLI+Rails apps, and I’m just not finding them.

Until I discover them, I’ll do the simplest thing I can think of and build the ember assets in my dev environment, commit them to the git repo, and git push them to heroku on deployment. That’s fine for now, especially for a training-wheels project.

Once that’s working I can start iterating on a cleaner solution that retains as much simplicity as possible for beginners.

If you do end up creating an actual adapter I would suggest being able to serve index as a string to maintain consistency with ember-cli-deploy. Serving the index as a string has some interesting side benefits such as adding csrf tags / ab testing/ or having multiple ember apps served from your rails app to name a few. I don’t think anyone has made an adapter like that yet, ember-cli-deploy has only become more of a thing rather recently.

1 Like

@eliotsykes, have you ever found any comprehensive resource on this topic? I am a ember newbie too, I built an ember app backed by a rails5 api. I’d like to find a step-by-step guide about how to put them together in the simplest way. … thanks

Hi @masciugo. No resource I’m afraid. My current approach for deploying a unified Ember-CLI+Rails app to Heroku is to use a multi buildpack with a .buildpacks that looks like this:

https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-ruby

However I’d hesitate calling this technique simple, it required a lot of experimentation to get the directory+symlink structure right to get the node buildpack to recognize & build the ember app on deploy.

I ended up using the method from Lightning fast deployment

I deployed my rails app on Heroku. I then activated RedisToGo on heroku as well. Finally, I used grunt to upload my ember app to S3 and the deployment keys to Redis. So this way, I didn’t need to deploy my ember app to heroku at all.

You will lose your live reload functionality that ember-cli offers though, which I don’t think is a big deal.

Some issues I ran into to get it working:

  1. In the example, make sure you have cloudfront working on top of s3, so that it points to your s3 bucket.

  2. use the command

grunt publish-release

instead of just “grunt” to avoid using canary to just get it working initially.

  1. locally do a

ember serve --environment production

this is to make sure that your uploaded ember app from /dist will have the correct cloudfront production links.

Reach out to me if you have any issues. This took me quite a bit to figure out, but it’s working now.