Deploying Angular and Ember Apps on Firebase

I used to think that deployment is something you can just tack on at the end of a project and that the real hard work is in the initial coding and testing. Not so. It's hard to find a reliable set of instructions in any one piece of documentation, so here you go. Free hosting on Firebase for any shiny new Ember.js app or Angular2 app made with their respective CLIs. This will work with a Firebase database too.

This should work universally for any JavaScript project where your asset pipeline places your production-ready files into a build directory. What's nice about using the Command Line Interface tools for scaffolding Angular2 and Ember.js apps is that (as of the time of this writing anyway) both will create the final build directory for you, optimize your files and name the folder dist. So, in the case of your own manually generated apps, so long as you either create this folder yourself, or replace any mention of the name dist below with the name of your folder, all of the following instructions should still work for you. I have not tested this myself yet, but I will update these instructions when I get a chance to try it out.

Until then, happy deploying!

1. Make sure the app is serving locally.

Ember.js local build commands:

npm install
bower install
ember serve

Angular2 local build commands:

ng serve

2. Build for production.

This would be where you make sure your files are minified, moved into your final build directory, and otherwise optimized for production.

Ember.js

ember build --environment=production

Angular

ng build --prod

3. From the top level of the project directory install the following tools:

Both Angular and Ember projects require you to install firebase tools. You may need to run this command with sudo.

npm install -g firebase-tools

--or--

sudo npm install -g firebase-tools

Then, for Ember.js apps, we need two more tools:

ember install ember-cli-deploy-firebase 
ember install ember-cli-deploy-firebase-pack

4. Log into firebase and make sure that is setup.

Navigate your browser to the Firebase console and create a new project if you have not already done so. If you are already using a firebase database, then you can skip this step because you already have a project. Then, log into firebase from the terminal by running the following command (again at the top level of your project directory) and entering the login credentials you used to create your project on the firebase console:

firebase login

5. Initialize the firebase deploy tools.

firebase init

This will present you with a few configuration options:

It asks "What Firebase CLI features do you want to setup for this folder?" Leave both selected, use the arrow keys to select 'hosting' and then press enter.
It asks "What Firebase project do you want to associate as default?" Use arrow keys to select the one you created in step 4, and press enter.
It asks "What file should be used for Database Rules?" Leave the default and press enter. This creates the file database.rules.json
It asks "What do you want to use as your public directory?" Type in dist and press enter. We want to use the directory built for us when we built for production in step 2. If you were using a different build directory in your project you would tell Firebase to use that here in this step.
It asks "Configure as a single-page app (rewrite all urls to /index.html)?" I have not tested the outcome of this deeply, but for now, for Ember apps select 'no' and for Angular apps select 'yes'. I suspect that this difference is because the Angular CLI does not include the Router at the time of this writing. But if you have added the Router into your Angular project manually, you may want to select 'no' for this option, same as in an Ember app (which does use a router by default).
Finally, if it asks to overwrite the index.html file, type 'no' and press enter.

Now it will proudly display "Firebase initialized"!

6. Test your deployment on a local server by running:

firebase serve

7. Deploy live by running:

firebase deploy

And we're there! The above command will display the URL we can use to see our app live.