Create a Full-Stack Rails and Ember App

3.1 Generate and Prepare the Ember-CLI Application

Hi, and welcome back to create a full stack Rails and Ember app. In this lesson, we will generate the Ember app with Ember CLI and add support for CoffeeScript, Sass, and Twitter Bootstrap 4. Let's jump right into the shell. The use you will need node.js since most of the tooling depends on it. I am going to use version 5.3 here. We start by installing the MPM package. And use the version specifier to install the tutor to either beta.1 prerelease. Globally with the dash GOP. Be sure to check the embassy ally releases page and link below to use the latest version. Since there will definitely be new version releases. And you see this. Anything through the two or above should be fired. Note that using the MPM that comes with new and old versions can take a bit longer. And you might be used to. If you don't already have it. You will also want to install power. Now it's time to initialize the new Ember application. The Ember CLI package provides the ember command. Which we are going to use with new then the name of the application relationship and I also want to add a dash there option to specify the directory in which it gets installed. This will generate the application scaffold and install all the packages needed for Ember development. While this installs, a little bit of history about Ember JS 2. At Ember Conf 2015 they announced a great plan for the future of Ember JS releases. With version 2.0 which was scheduled for release in June 2015, all the main components that are used for developing an Ember app show unify their release cycles. And when a new Ember chairs where action is released and but then later Ember CLI. They could fire and list few would release as well compile the compatible ability with the new version. Well Ember 2.0 released in August 2015 and Ember data was in September. MCLI [INAUDIBLE] now. They could fire. Sub 1.0 and list few will be replaced by Ember collection which is currently in 1.0 alpha. But even though I'm complaining a little bit about the still inconsistent releases, I really like Ember and this architecture. So having to deal with these issues is worth it. Now that the initialization process is finished. We change into the application's directory and add our add-ones. First we want to install Ember CRI. Coffee script with the Ember install command. This takes care of also installing necessary NPM and power packages. Then we want to install ember-cli-sass. For better bootstrap I want to use the version for alpha since this bridged over to south for that version. And it still feature complete enough to use in our project. So, welcome to a new Ember app. If you haven't seen an Ember application before. You can see, it is quite similar to rails. Having models, controller's, routes and templates. The only difference is controllers and rails are routes and what chairs and controls and Ember only take care of interacting with the few. Right now, we don't have any routes, models or controllers. But that doesn't matter. As soon as you define a route, in the route of file, Ember will take care of automatically generating a default route controller template for you. As for templates you can also use layouts, partials and so on. Instead of using yield though you're gonna have to use the double curly braces with the outlet keyword to signal Ember that this is the spot for every sub-template. To fire up the developments server, run Ember server, SAS or simple s in the shell. Since we are using SAS, it requires us to have an app.css file. Let's rename the present app.css to stop Ember from complaining. When you go back into the console you will see it detected the file change and automatically rebuilds the files. In the browser you can see the new app in all glory. The default part development is 4200. But it doesn't really look nice, as we have no styling yet. Let's add Bootstrap to our style sheet. Since it's written in SAS, we can simply import it. The path is two levels up. And then our components, bootstrap, SCSS, and then the Bootstrap-flexed file. To enable layouting with flex perks enabled as you can see, it just includes the normal bootstrap file that sets the enable flag spokes variable to true before doing that. Without me reloading the page it got refreshed. Since Ember CLI also supports live reload, which is very handy during development. As for our CoffeeScript support you can mix and match Javascript and CoffeeScript files with Ember CLI. We're going to use CoffeeScript for all our routes and controllers. But I will leave app JS and router chairs as is since when updating the Ember CLI version it will regenerate these files as JavaScript files regardless of existing CoffeeScript versions. And it's just too much of a hassle to always remember to delete them after the upgrade. In this lesson, we installed the Embassy Alive prerelease version. Generated our new application, and added support for Coffee script and SAS. As well as Bootstrap for our styling purposes. In the next lesson we will lay out the application of Bootstrap and add authentication between the end.lab and our race back end, see you there.