You can read more about Yeoman here: http://yeoman.io/
In this section we're going to use the Yeoman Express generator to build an Express project.
First install Yeoman. As you would expect, we install it with npm. We're going to use the -g global flag because we want to call yeoman from outside of a project.
npm install -g yo
Installing a generator
Next we'll need a generator. You can find a list of them here: yeoman.io/generators/. Yeoman generators all start with the word generator, for example express-generator or angular-generator.
Create a project directory to hold your code. Now install the express generator. We'll make this local to our project in case we need a sub-generator again later:
mkdir myprojectcd myprojectnpm install generator-express
Build your Express application
Create an app using the express generator. At a command line type:
Choose the Express generator. Accept the defaults. Choose Jade for templates. As a build tool, choose gulp (or grunt if you prefer an old friend). For CSS choose SASS. Optionally choose MVC.
If you choose SASS you'll probably need the compass Ruby gem. Install Ruby if you don't already have it. For Windows this is a double click install:
test if from a terminal using:
Now install the gem. From a terminal:
gem install compass
Starting the server
We start the server using gulp:
View in the browser
We can now visit http://localhost:3000 to view our app in all it's glory.
Exercise - Create an Express scaffold with Yeoman
Use yo to generate a simple express site. Fire it up with by running Gulp.
- Try to add another route
Exercise - Gulp
Gulp is watching your project. Every time you change a view file, your browser will refresh.
Make a change to the SASS file and watch the browser reload automatically. This is a massive productivity gain, especially with multiple screens.
You ay need to install the livereload Chrome plugin.
Exercise - Modify a view
Look in your views folder. You'll find a file called layout.jade. Jade is an html preprocessor with semantic indentation. You don't need to use angled braces or close your tags, it handles that for you.
Read more on Jade here: http://jade-lang.com/
- Try to create a header and footer in your layout.jade file that will appear on every page.
- Create an about us page url with content.