Hosting an Ember project and fixing urls using .htaccess

Are you looking for a way to host an Ember app? I’ll explain the easiest way to host an Ember app using good old FTP.

First, let’s build our Ember app! In your Ember project run the following command in your terminal: ember build -prod

This will generate a single index.html file, an assets folder containing your images, stylesheets (minified) and javascript (uglified) files. Copy the content of the generated ‘dist’ folder (located in your project root) to your server root or wherever you want to host the app and you’re pretty much good to go! Everything Ember related is loaded through your index.html file and your app should work out of the box.

The main problem you will probably encounter right now is only the homepage URL works (eg browsing to: gideonheilbron.nl), as soon as you try to visit a subpage (eg: gideonheilbron.nl/subpage-name) you get a nice error. This is because Ember only uses one file to process all pages.

To fix the ‘subpages’ not loading, edit your .htaccess file on your server to include the following rules:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule (.*) index.html [L]
</IfModule>

This tells Apache to direct all URL requests on this domain to the index.html file. The app gets loaded, Ember reads the entered URL and then processes the app to ‘load’ the correct page/url/model.

That’s it, enjoy!