Over the next few blog posts I'll go through the process of creating a single page blogging application using Ember.js that uses Windows Azure Mobile Services for data storage, and then deploy it to a Windows Azure Web Site.
Single Page Applications and Ember.js
I used Yeoman to create and maintain my project. Yeoman is a collection of tools that provides scaffolding (through the 'yo' tool,) build, preview, and testing through Grunt and dependency management through Bower. It's a little overkill for this project, and there were some rough edges, but overall it was valuable and I'll probably use it again in the future.
Here are the steps to setup Yeoman and associated tools:
Install Node.js. Note that you must have a recent version of Node, at least v0.8.something I believe. I used v0.10.4.
Install Ruby. There's a lot of ways to get this for each platform, including building from source. For this project I used RubyInstaller for Ruby 1.9.3-p392, and the associated DevKit install (TDM-32-452.)
After installing Node and Ruby, run the following commands to install Yeoman, Grunt, Bower, a scaffolding generator for Ember applications, and the Compass gem (required for CSS stuff):
npm install -g yo grunt-cli bower generator-ember
gem install compass
You may need to use sudo if you are on a Mac or Unix system. You can also go get a coffee or something while these install.
Create and test the application
To create a basic Ember-based application using Yeoman, perform the following steps from a command-prompt, bash or terminal:
Make a new directory, change directories into it, initialize a Git repository, and then use the 'yo ember' command:
If you get errors on that last command, you might want to update your version of Node.js to v0.8 or higher.
One of the Grunt tasks created by default is a development server that can be used to test the application. Start the server using the following command:
This should launch your default browser and display a page similar to the following:
One of the nice things about the grunt server task is that it monitors changes to the application in real time. For example, if you open the emberapp/app/index.html file and change the title from 'Ember Starter Kit' to 'My Ember Starter Kit', once you save the file the browser window should update to reflect the title change.
Understanding the application layout
At this point you've got a bunch of files and folders under your emberapp directory and are probably wondering where, exactly, your application is. It's under the app folder. In here you'll find:
Templates - the handlebar templates that are used to render the different 'pages' within the application. Currently there should only be two files here; application.hbs, which is the main body of your application, and index.hbs, which contains the view for the '/' or index route of the application.
Styles - the CSS style sheets used by the application
Images - any images used by the application
Components - this is where Bower installs components used by the application
While Grunt provides useful tasks such as the server used above, Bower provides component management. Sadly, not everything I'll be using is available through Bower yet, but let's add something that is - Twitter Bootstrap. Specifically, Sass-Bootstrap. If you're not familiar with Sass, it's an extension to CSS and the tools and tasks we have installed through Yeoman understand how to work with it and compile it down to basic CSS. But it provides a good example of using Bower to install a component.
Use the following command to install Sass-Bootstrap:
bower install sass-bootstrap --save
After the command completes, you should have a new emberapp/app/components/sass-bootstrap folder, and a emberapp/bower.json file entry that specifies the version of Sass-Bootstrap that was installed. Similar to how the package.json file that describes Node.js modules required by your application, the bower.json file describes Bower components required by your application. The actual components folder is excluded from your Git repository, just like the node_modules folder.
To modify the application to use styling from Sass-Bootstrap, perform the following steps:
Edit the emberapp/app/index.html and replace the contents with the following:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ember Starter Kit</title> <link rel="stylesheet" href="styles/main.css"> </head> <body> <!-- build:js scripts/components.js --> <script src="components/jquery/jquery.js"></script> <script src="components/handlebars/handlebars.runtime.js"></script> <script src="components/ember/ember.js"></script> <!-- endbuild --> <!-- build:js scripts/main.js --> <script src="scripts/app.js"></script> <!-- endbuild --> <!-- build:js(.tmp) scripts/templates.js --> <script src="scripts/compiled-templates.js"></script> <!-- endbuild --> <!-- build:js scripts/plugins.js --> <script src="components/sass-bootstrap/js/bootstrap-affix.js"></script> <script src="components/sass-bootstrap/js/bootstrap-alert.js"></script> <script src="components/sass-bootstrap/js/bootstrap-dropdown.js"></script> <script src="components/sass-bootstrap/js/bootstrap-tooltip.js"></script> <script src="components/sass-bootstrap/js/bootstrap-modal.js"></script> <script src="components/sass-bootstrap/js/bootstrap-transition.js"></script> <script src="components/sass-bootstrap/js/bootstrap-button.js"></script> <script src="components/sass-bootstrap/js/bootstrap-popover.js"></script> <script src="components/sass-bootstrap/js/bootstrap-typeahead.js"></script> <script src="components/sass-bootstrap/js/bootstrap-carousel.js"></script> <script src="components/sass-bootstrap/js/bootstrap-scrollspy.js"></script> <script src="components/sass-bootstrap/js/bootstrap-collapse.js"></script> <script src="components/sass-bootstrap/js/bootstrap-tab.js"></script> <!-- endbuild --> </body> </html>
Create a new file named main.scss located in the emberapp/app/styles folder:
$iconSpritePath: "../images/glyphicons-halflings.png"; $iconWhiteSpritePath: "../images/glyphicons-halflings-white.png"; @import 'sass-bootstrap/lib/bootstrap'; @import 'sass-bootstrap/lib/responsive';
Copy the glyphicons-halflinkgs.png and glyphicons-halflings-white.png from the emberapp/app/components/sass-bootstrap/img directory to the emberapp/app/images folder.
Save the index.html. If you have the Grunt server task running and a browser window open viewing the application, you should see the style of the page change once the index.html page has been saved. The difference is a little subtle at this point. Here's before and after screenshots:
At this point you should have a basic Ember site, along with some useful tools. In the next part, I'll cover setting up the routes and templates to handle displaying and authoring of blog posts.