This tutorial is the first in a series where I look at different techniques and addons to build and deploy your Ember project. Before we can deploy our project we need to learn a few basics on building our Ember project.

Building

As always we'll assume you are using Ember CLI to create your Ember project. If you are NOT using Ember CLI, stop this tutorial, go to the Ember CLI website and follow the instructions and get it installed.

Let's also assume you already have a project created and you are ready to build! The first step is to simply build it using the command line.

$ ember build

This command simply builds the contents of our project into the default dist folder. The directory structure will look like this.

.
├── assets
│   ├── deploy-me.css
│   ├── deploy-me.js
│   ├── deploy-me.map
│   ├── ember-data.js.map
│   ├── failed.png
│   ├── passed.png
│   ├── test-loader.js
│   ├── test-support.css
│   ├── test-support.js
│   ├── test-support.map
│   ├── vendor.css
│   ├── vendor.js
│   └── vendor.map
├── crossdomain.xml
├── index.html
├── robots.txt
├── testem.js
└── tests
    └── index.html

You'll notice first that the assets folder has all our JavaScript and css files. This will also include any files that were in the public/assets folder as well. What if we had an image at public/assets/images/image.gif? It would be included and it could be referenced in our css files as images/image.gif.

Next you'll see the tests folder. This is only included when we build for our development enviroment. When the test folder it's basically the same as running tests via localhost:4200/tests.

To make a build for production you run this command.

 ember build -prod

Another option is to change the default output folder from the default /dist.

ember build -prod -o=<directory>

This would generate all the files into the folder we specified.

After building what does the directory structure look like?

.
├── assets
│   ├── deploy-me-696a5a5c7e1708239b60a15012f5d5ed.js
│   ├── deploy-me-d41d8cd98f00b204e9800998ecf8427e.css
│   ├── vendor-c3ed3c00a34b9be1889d1d0ac89702a2.js
│   └── vendor-d41d8cd98f00b204e9800998ecf8427e.css
├── crossdomain.xml
├── index.html
└── robots.txt

This looks different then the development build. Our tests are no longer created and everything is fingerprinted and minified.

Fingerprinting is done by the broccoli-asset-rev addon. This will automatically fingerprint our js, css, png, jpg and gif assets by appending an md5 checksum to the their file names. In addition our html, js and css files will be re-written to include this new name.

You have several options you can use with fingerprinting, however the most important one might be the prepend option. For example let's say you wanted to host your assets on cloudfront. Add these lines to your Brocfile.js.

//Brocfile.js
 var app = new EmberApp({
   fingerprint: {
     prepend: 'https://subdomain.cloudfront.net/'
   }
 });

Now things like this.

<script src="assets/appname.js">
background: url('/images/foo.png');

Will turn into this.

<script src="https://subdomain.cloudfront.net/assets/appname-342b0f87ea609e6d349c7925d86bd597.js">
background: url('https://subdomain.cloudfront.net/images/foo-735d6c098496507e26bb40ecc8c1394d.png');

Deploy

Now we have our project built so what's next? The next step is to deploy our application of course. We have a lot of choices to choose from. Since we are dealing with a static site we can host our site on Amazon S3. To do that we would build with the production flag on ember build -prod and copy all the files under dist/ to the bucket. We could do the same with Azure.

If we have a node/Express or Ruby on Rails back-end we can copy the contents of the dist/ folder to the public folder in these frameworks and have it be hosted that way.

Another neat way of deploying our application is to send all the assets to store somewhere, like S3 and then have the index.html file be served by Redis. This is the model behind the ember-cli-deploy addon. We'll be exploring that in the future.

Future

In future tutorials I'll go into deploying using, S3, Azure, Heroku the ember-cli-deploy addon and Divshot. It was a little too much to add in this post.

Please leave a comment below with any questions.

Image credit to EricbHorn