Getting started with Yeoman, a scaffolding tool for web apps
Yeoman is a scaffolding tool that helps you kick-start new
projects and pre-scribes the best practices and tools to help you stay productive. In order to achieve that goal, Yeoman basically provides you
with a generator ecosystem that helps to scaffold either a complete project or at least some part of it.
WHAT IS SCAFFOLDING AND WHY DO I NEED IT?
This concept basically came from Ruby, another very popular program-ming language where you can say something like rails generate
scaffold model_name and it would basically generate the required code that your application would need to interact with the system. This is some-
thing like maven archetypes if you are coming from a Java background.
WHEN TO USE YEOMAN?
It’s good to use Yeoman when you want to create an application that re quires some basic configuration. Sup-
pose there are similar types of projects being developed at your office and you know that there are some basic codesrequired to start off with the applica-
tion, then you can create a generator
for that. There are a lot of community-made generators available that can help you to scaffold the project. You can find all of the official generators on
their website or by going to:http://yeoman.io/generators/
Here, we are primarily focusing on how to create a generator. So the basic requirement of this article is some preliminary knowledge about nodejs
and JavaScript, specifically ES6. All of the code that is written over here is following ES6 Syntax whenever possible. You need to have nodejs and npm installed on your
system to follow along with this tutorial.
SETTING UP THE GENERATOR
First check whether you have nodejs installed in your system by typing $ node -v If you don’t have nodejs installed, do so from https://nodejs.org/en/
Next, you have to install Yeoman. Because it’s an npm package, this is simple: $ npm i -g yeoman Now, the Yeoman team has created a generator in order to create generators!
To install this, you will need to use npm: $ npm i -g generator-generator
Note: If you face any kind of access rule limits then you must run the above commands with admin access. After you are done with the steps above, you can now create your own generator. Our goal is to create a basic
express application. First you have to run the generator that you just installed, in the directory where you want to create the generator. $ yo generator
After running the above command you will be greeted with the basic prompt for Yeoman. Prompting is a very important concept in Yeoman.
You will be asked to give some basic information about the generator here. The generator also creates a folder and performs the necessary npm installation. Additionally, there are
some nifty features using inquirer.js where you can provide some checkboxes and various dropdowns and styles in your generator to enhance the user experience.
After everything is done the file structure should look like this: If we were to describe the folder structure, then the folder that you should be interested in is the generators folder. There is basically only one
folder in the generators folder and that is your app folder. This folder contains the necessary files that are required to start off with your generator. The
index.js contains the logic to run your generator and the templates folder contains the files that are required for your generator to run. Yeoman also creates some required files such as
.editorconfig, .eslintignore, etc. Now if you view the package.json (http://dgit.in/PckgJSON) file, you will find that the Yeoman generator has created some other files – some dependencies
and devDependencies. First coming to the dependencies, you can see a basic package Yeomangenerator has been added. That package is basically the heart of the project. Every generator must have this package
as a dependency. Other two packages are chalk and yosay. chalk is a package that helps to colorize the text in the console. Because Yeoman is a CLI-based application,
you’re going to want to enhance the user experience by colorizing it. yosay adds some cool things to your CLI. For example, you can get it to do something like cowsay, but without
the stupid cows! For example: const yosay = require(‘yosay’); const chalk = require(‘chalk’); console.log(`Hello ${chalk. red.underline(process.env.USER)}. This is a test
string.`);Will generate an output as shown below:
SET UP THE TEMPLATE FOLDER
Now, coming to the project your goal is to create a simple application, such as a basic express application. You will need a javascript file that is basically
the backend as well as a frontend filethat will be communicating with the javascript app. The file structure is very simple. The first step is to make sure all the required files exist in the project’s directory or
are created in the template directory. So we create the required files and folders accordingly. So after creation of the template files and folder the template
folder should look like this:Next, you need to add some code into the app.js and view.html. Remember that these code snippets are going
to be copied to the destination path where someone will eventually generate the sample project. Our suggestion is to make it as readable as possible right in the beginning, and to add comments
whenever possible, to give the person working with your code an idea of how and why things are working. Get sample code for app.js here: http://dgit.in/SampleCde.
If you look at line 38 and 39, we are using the EJS Template syntax to inject values – more on that later. Here’s a sample of the view.html: http://dgit.in/ViewHTML. Now that you’re ready with your
basic template files, you can move on to the bit where you need to take user inputs depending on your requirements, and scaffold the project accordingly.
CODING THE GENERATOR
In any generator, the main file resides at index.js within the generators folder. If you look inside the file, you will see a class that is extending the class
Generator that came from the yeoman generator package. If you are new to the concept of extending in JS, you need to read up on that now.
To be continued…
