Yeoman Teaching Case: Building WebApp with Yeoman

STEP 1: Setting up the development environment

All interactions with Yeoman are through the command line. MAC systems use the Terminal.app,linux system to use the Shell,windows system to use Cmder/powershell/cmd.exe.

1.1 Installation Conditions

Before installing Yeoman, you need to install the following:

• Nodejs V4 or later
• Npm
• Git

Check if the Node environment and NPM management tools are installed by using the following command.

$ node-v && npm-v

NPM is installed with Node by default. Some Node versions may have an older version of NPM, and you can update NPM with the following command

$ NPM install-g [email protected]

Check if Git is installed with the following name

$ git--version

1.2 Installing the Yeoman Toolbox

If you already have a node environment installed, you can install Yeoman by using the following command

$ npm install-g yo

1.3 Confirm Installation

First verify that the Yeoman is installed correctly

$ Yo--version

STEP 2: Install the Yeoman generator

In traditional Web development, you need to spend a lot of time setting up template code for your webapp, downloading dependent packages, and manually creating a file directory structure. Yeoman's generator will help you get this done. Let me install a generator for the FOUNTAINJS project.

2.1 Installing the Generator

You can install the Yeoman generator with the NPM command, which currently has more than 3,500 generators, most of which are contributed by the open source community.

Install Generator-fountain-webapp with the following command

$ NPM install-g Generator-fountain-webapp

This command installs the node package required by the generator.

As with use npm install , you can search for generators through the Yeoman interactive menu.

Run yo and then select Install a generator to search for the published generator.

STEP 3: Build our app using the Builder

We have used the word "scaffolding" many times, but you may not yet know what it means. In the context of yeoman, scaffolding materials represent the creation of files for your webapp through some configurations. In this step, you will see how Yeoman generates files for your favorite libraries and frameworks, as well as the configuration of some additional libraries such as Webpack/babel/sass.

3.1 Creating a project folder

Create a mytodo  folder

$ mkdir Mytodo && CD Mytodo

The scaffolding files generated by the generator are placed in this folder.

3.2 Using the Builder from the Yeoman menu

Run againyo

$ yo

If you have more than one generator installed, you need to choose one from it. With Fountain Webappselected, press Enter enter to run the generator.

3.3 Configuration Generator

To speed up the initialization of your development environment, some generators also provide options to customize the underlying development library for your app.

The FOUNTAINJS Generator offers some options to match your preferences.

• Framework (REACT,ANGULAR2,ANGULAR1)
• Module management tool (Webpack,systemjs,none with Bower)
• JavaScript Preprocessor (Babel,typescript,none)
• CSS Preprocessor (sass,less,none)
• Three templates app (a landing Page,hello World,todomvc)

In this case, we will use React, Webpack, Babel, SASS,Redux todomvc templates.

Arrow key selection, enter confirm.

Yeoman will automatically build your app to get a dependency package. A few minutes later we will proceed to the next step.

STEP 4: View the directory structure of Yeoman-produced apps

Turn on yourmytodo

Catalogue and see what the scaffolding has built. Should look like the following:

In the Mytodo folder, we have:

src: The parent directory of the Web App

• app: React+redux's Code
• index.html: Base HTML file
• index.js: Todomvc app's entry file

conf: Configuration file and parent directory for third-party tools (Bowersync,webpack,gulp,karma)

gulp_tasksand gulpfile.js : Build tasks

.babelrc, package.json , node_modules : Configuration and required Dependency packages

.gitattributesand .gitignore : Configuration of Git

STEP 5: Preview your app in the browser

If you want to preview your Web app on your favorite browser, you don't need to do anything on your computer to set up a local server. These are all part of Yeoman's work.

5.1 Open the server

Run the NPM script to create a node-based local HTTP server that previews on localhost:3000 (or 127.0.0.1:3000).

$ NPM Run serve

Open a new page in the browser localhost:3000

5.2 Stopping the server

If you want to stop the server, press Ctrl + C to stop the current CLI process

Note: You cannot run multiple HTTP servers on the same port (default 3000)

5.3 View your files

Open your favorite text editor and start making some changes. Every change will force the browser to refresh without you having to do it yourself. This is called instant load (live reloading), which allows you to see the app status in real time.

The immediate load functionality is implemented through the Gulp tasks in the configuration gulpfile.js and gulp_tasks/browsersync.js the Browsersync in. It will monitor changes to your files and then automatically load.

As below, we edit the header.js under the src/app/components path

Changes take effect immediately

STEP 6: Use Karma and jasmine testing

Some people may not be familiar with karma, which is not dependent on the framework of the Test Runner. The Fountainjs generator already contains the Jasmine test framework ....

6.1 Running the test unit

Let's return to the command line and press CTRL + C to stop the local server. package.jsonthere is already a NPM script running the test unit. Can be run as follows

$ NPM Test

Every test should pass.

6.2 Upgrading Unit Tests

You can src find the unit test script in the folder and open the src/app/reducers/todos.spec.js . This is a unit test written for Todos reducers. For example, let's take a look at the first test to verify the initial state.

It (' should handle initial state ', () = {  expect (Todos    (undefined, {})  ). Toequal ([    {      text: ' Use Redux ',      completed:false,      id:0    }  ]);

Modify as follows

It (' should handle initial state ', () = {  expect (Todos    (undefined, {})  ). Toequal ([    {      text : ' Use Yeoman ',//<=== here      completed:false,      id:0    }  ]);

Re npm test -run, you can see the following error

If you want the run test automatically on the change can use npm run test:auto instead

Open itsrc/app/reducers/todos.js

Change the initial state to

Const INITIALSTATE = [  {    text: ' Use Yeoman ',    completed:false,    id:0  }];

You successfully repaired the test.

If your app is getting bigger or more developers are involved, writing unit tests can make it easier to spot bugs.

STEP 7: Permanently save Todos with Local Storage

Let's take a look again at the problem that React/redux Mytodo can't save when you refresh your browser.

7.1 Installing the NPM Package

To solve this problem easily, we can use another Redux module "Redux-localstorage", which can quickly execute the local storage.

Run the following command

$ npm Install--save [email protected]

7.2 Using Redux-localstorage

Redux needs to be configured to use, will be src/app/store/configureStore.js modified as follows

Import {compose, createstore} from ' Redux '; import rootreducer from '. /reducers '; import persiststate, {mergepersistedstate} from ' Redux-localstorage '; import adapter from ' Redux-localstorage/lib/adapters/localstorage '; Export default function Configurestore (initialstate) {  const Reducer = Compose (    mergepersistedstate ()  ) (Rootreducer, initialstate);  Const STORAGE = adapter (window.localstorage);  Const Createpersistentstore = Compose (    persiststate (storage, ' state ')  ) (createstore);  Const STORE = Createpersistentstore (reducer);  if (module.hot) {    //Enable Webpack Hot module replacement for reducers    module.hot.accept (' ... /reducers ', () = {      Const Nextreducer = require ('.. /reducers '). Default;      Store.replacereducer (Nextreducer);    });  return store;}

If you view the app in your browser, you'll see a "use Yeoman" in the To-do list.

If the local store is empty when the application is initialized, there are no items in the list.

Go ahead and add some items to the list:

Now when we refresh the browser list item still exists. Hail!

We can confirm that the data is stored in the local storage, open the Chrome browser's check tool, produce the Resources panel, select the local Storage from the left column

STEP 8: Preparing for production

Ready to show your Todo app to the world? Let's try to build a production ready version.

8.1 Optimizing product Documentation

In order to create a production version of the application, we need

• Lint Code
• Merging and shrinking our scripts and styles to save those Web requests,
• Compiles the preprocessor's output results,
• Make your application more refined

Wow! Surprisingly, all runs can be done by:

$ NPM Run Build

Your ready-to-use application in the mytodo Project dist directory, you can publish to the server using FTP.

8.2 Creating and previewing production applications

If you want to preview your app locally, you can run the following NPM script

$ NPM Run Serve:dist

It will create your project and start the local server.

Yeoman Teaching Case: Building WebApp with Yeoman