Deploying an Ember.js App to Netlify

January 4, 2020(2 minute read)
ember.jsguide

Netlify is one of my favorite hosting services for front end projects, mainly because of how quick and easy it is to deploy. I use it for most of my simple ember.js and react projects.

Assuming you already have a running ember app locally and have a github repository for it, deploying is as easy as pushing your code to github. Once your code is in github, you can log in to Netlify (or create a free account) and add your repository there. Find the New site from Git button and go through the steps on adding your repository. The nice thing is that by default, a git push to master will auto deploy.

Netlify Redirects

The main caveat is dealing with the netlify redirects. The issue is that since ember.js is a single page app, all of the routing logic takes place on the main index.html page (handled by Ember's router). So routing to /, /posts, posts/1, /about, etc, are all handled by ember's router but this is all on the index.html page of the production build.

We need to tell this to Netlify, otherwise by default, Netlify will try to route these requests to different pages which don't exist. In our production build, there is only an index.html, and not a posts.html, posts/1.html, etc. Thankfully there is an ember addon to handle this!

ember-cli-netlify

ember-cli-netlify will help generate the config to handle all of the redirect rules and also has configuration for headers as well. You can see more of their documentation here. Here's the command to install:

ember install ember-cli-netlify

To get going quickly, simply add a .netlifyredirects file to the root of the project with the following:

/*    /index.html   200

This will simply redirect all of the routes to the main app since an ember.js app is a single page app. If you need more options, here's a blog post for Netlify redirecting rules.

And voila! You should be up and running with a simple ember.js app in the cloud!