Step 3: Use a generator to scaffold out your app

●Let’s Scaffold a Web App ●Step 1 ●Step 2 ●Step 3 ●Step 4 ●Step 5 ●Step 6 ●Step 7 ●Step 8 ●Keep going We’ve used the word “scaffold” a few times but you might not know what that means. Scaffolding, in the Yeoman sense of the word, means generating files for your web app based on your specific configuration requests. In this step, you’ll see how Yeoman can generate files specifically for your favorite library or framework — with options for using other external libraries like Webpack, Babel and SASS — with minimal effort.

Create a project folder

Create a mytodo folder for all your codelab work:

mkdir mytodo && cdmytodo

This folder is where the generator will place your scaffolded project files. Run yoagain to see your generators:

yo

If you have a few generators installed, you’ll be able to interactively choose from them. Highlight Fountain Webapp. Hit enter to run the generator.

Use generators directly

As you become more familiar with yo, you can run generators directly without the use of the interactive menu, like so:

yo fountain-webapp

Configure your generator

Some generators will also provide optional settings to customize your app with common developer libraries to speed up the initial setup of your development environment. The FountainJS generator provides some choices to use your favorite: ●framework (React, Angular2orAngular1) ●module management (Webpack, SystemJSorNone with Bower) ●javascript preprocessor (Babel, TypeScript or none) ●css preprocessor (SASS, LESS or none) ●three sample app (a landing page, hello world, and TodoMVC) For this codelab, we will use React, Webpack, Babel, SASS and the Redux TodoMVC sample.

Select successively these options with the arrows keys and the enter and watch the magic happen.

Yeoman will automatically scaffold out your app, grab your dependencies. After a few minutes we should be ready to go onto the next step.

« Return to overvieworGo to the next step » Stickers!

Show your love for Yeoman, wear our merch!

●API ●Improve this page

Sep	OCT	Nov
	30
2019	2020	2021