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.
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 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!