2.4 Yeoman

So far we have explored some kind of boilerplate framework such as the HTML5 Boilerplate, Twitter Bootstrap, or Zurb Foundation. Now when you get started writing a web application, imagine that you always have to go to the each of the websites, download them, do some basic customization, integrate with their project. And then kind of turn on the server and then start developing. Now this process when we do it day after day takes a little bit of time or in fact much time to get it all set up. This is where Yeoman comes in. It is basically a scaffolding tool that helps us get started with applications very fast. So Yeoman also works with two other frameworks. One of them is called Grunt. In the future videos, we will also go through Grunt, which is a build tool. And also, it depends on some kind of a package manager. And Yeoman uses Bower in this case. So before we get started with Yeoman, I wanted to point out the GitHub repository for Yeoman, and if you go to the GitHub account for Yeoman, here you will also find many other associated repositories. And later on when we learn what are generators, some of them are also written by the Yeoman team. And I also look to them to kind of learn how to build my own generator. Now as I mentioned, Yeoman works heavily hand in hand with Grunt and Bower. In order to get started with Yeoman, you already need a few things. So you will need, like, Git, Ruby, Compass. So here, you will have npm install a global install of yo, which is Yeoman, grunt-cli, which is the Grunt command line,. As well as Bower, so make sure you go ahead and install all of them. Now, once you get Yeoman into your system, If you do a yo --version, and there you go, I have the current version already, the beta version. I do want to go through the beta because I believe the stable version will be released in the coming weeks or months. And it is very important for us to get to know what are the Yeoman generators and how we can make our own. All right, and obviously the next command to know is just yo, which will basically come with this huge little welcome by the Yeoman logo, or rather the Yeoman mascot. And there are some general options here. But more importantly you can see here it says that if you want to see a list of available generators, go ahead and do this, npm search yeoman-generator. So this is the very first thing we will do. So let me clear the screen and let's search for all the Yeoman generators available. And once you do that, you'll see that there are tons of generators already created for you. Let's say, in the past few episodes we learnt things like Twitter Bootstrap, or even Zurb Foundation. Notice here there's a generator for Zurb Foundation, there's a generator for Webapp, which we will be installing and using it. There are even generators for things like WordPress or even HTML5 Boilerplate, Jekyll and many, many more. Really, they're very interesting. So why don't we get started with one of them, so that we can see how we can search for a generator and then install it and customize it and use it ourselves? So the official generator, or rather the generator that is built by the Yeoman development team is this thing called Yo Webapp, or rather just Webapp. So we'll install the Webapp, and then we will see how the generator works. So in order to install the Webapp, what we can do is npm and then install. You can either do a global install or just a local install depending on what you would want. And then there will be the keyword generator- and then the name. So our purpose, we'll just do webapp. Now that my generator webapp is completed, let me clear the screen. And let's make a new folder called, say, webproject and we will cd inside it. And now we can actually generate a full webapp. So let's try that, to the command for that will be yo and then the generator name for our case, it is simply webapp. And the generator will usually start with this kind of welcome sign, along with some questions, but of course this depends on the specific generator. For our webapp generator, these are the questions. Would you like to include Twitter Bootstrap for Sass? Hm, okay, yeah, sure, why not. Would you like to include RequireJS, maybe no. So it has finally completed and wow, so many things happened. So why don't we open this up in Sublime Text, and as you noticed just with one command, so many files have been installed and configured for our project. So inside the folder app, you'll have the project specific files, including the folder bower_components, the package manager. And of course, you have the assets folder, such as the styles, scripts, and images, along with index.html, robots, and so on so forth. Next, you have some kind of, service side package manager, which is in terms of the node modules, and then it also has the test folder in case you want to integrate testing in your project. And along with that you had some Git files. The Git attributes and Git ignore. You also have the Bower RC or rather the configuration file along with Grunt, the build file and also packaged JSON. Which basically says, what are the node packages needed, so that was really fast with just one command and that is the power of Yeoman. Now Yeoman can also do a little bit more based on what the Grunt file has defined. So let's look at the Grunt file a little bit. Now not to worry if you do not understand it yet, it might be a little bit overwhelming. You can fast forward and look at the Grunt video and come back. But basically Grunt will come with and define some of the task, for example, compass. And coming down further, you also have the server, which is opening up in localhost. You also have jshint, which we also go through, and it is for JavaScript linting. And you also have mocha, coffee. Some testing libraries, as well. Now imagine we have downloaded the entire files and folders required to start our development. Now all we need to do is call the grunt. And one of the grunt tasks is called server. Now once you execute this command, notice what will happen. It will actually open up in localhost. Now mine is not opening up because there is an error because livereload is already running in port 5729. So let's quickly query this in the Grunt file. I do have a livereload sub already running so I'm just going to change the port number in grunt.js. And let's run it once again. And there you go. I have a very simple web application running in just a few minutes. Notice how I didn't have to go to the individual project folders, download the files and then write some initial code to get it integrated in my project. Now, let me quit the server, and there is this, another thing that already comes with the webapp generator, and that is grunt test. This means that if you have a test written for your project, it will also do the testing. Now, of course, for the webproject it comes with its own test, so let's just run it and see what other test it has. So there you go, it will basically go through each of the task and it will run the test to see that everything is fine. And lastly I also wanted to point out that if you want to make the entire project ready for production, which means to say, minify and optimize the various files. In this case grunt also prepares for it. So if you come back right at the bottom you'll see that by default if you just press grunt in the command line it will do a jshinting, test, and build. So let's quickly run the grunt task in the command line. So once the build process runs, notice that there'll be a new folder here called d-i-s-t. And inside here, notice how you will have styles, and when you open the main.css, wow, everything is minified and concatenated. Of course, if you go to the original folder and if you go to main.scss, oh it's just a bunch of imports as well as some basic styling. Now this was just a demo on what a generator is. Obviously, if you do want to use this generator which is the web app generator, I highly recommend you to go through each of the files and understand what it does, and then kind of go on and customize it. But why don't we go ahead and create our own generator? And I think this is where the power of Yeoman comes into being. So I will go ahead and clear my desktop once again. And this time I will install something called a generator generator, which means it is a generator to create generators, very meta. So for that, it will be npm install, and we'll do a global install for it. And we'll do a global install for generator-generator. All right, so why don't we go ahead and create a generator? The previous one that we used was a generator for web app. Let's create a generator. So firstly I'll make a directory. And let me call it generator- and after the dash we'll put in the generator name. Let's, for simplicity, call it just shop. Great, so let me cd inside this. And over here all we need to do is yo, and then generator. All right, so would you mind telling me your Github username, yup? And the base name, yeah, I think shop is good. All right, so once that's done let me open this up in Sublime Text. And these are the files and folders that will be basically installed. Final thing before we create an instance of the shop, we need to do npm link. All right, great. Now, after this we have done, I'll come to a brand new folder, which is completely empty, as of now. And using the newly created Yeoman generator shop, we will basically create and initiate a lot of the files and folders. So let's do that first. So, all we need to do is just yo and then shop. All right, would you like to enable this option? Obviously, by this time you can see that these questions are meant to be configured. So for this I'll just press Enter. And there will be some very basic bunch of files. Why don't we also open this up in Sublime Text? Right, so that's a very bare bone shop. And obviously, the next step we need to do is to sort of customize it. So let's go back to the shop generator. Now, don't be confused. We have one kind of project which is the generator for the shop. And then we have the shop itself, which we are kind of generating from the Yeoman generator. So the file we should be looking at when starting to customize a generator resides in the folder app, and then this file called index.js. Once we go inside index.js and we sort of scroll a little bit and there you go, this looks a little bit familiar, isn't it? Welcome to Yeoman, ladies and gentlemen. And we saw this little prompt when we did yo shop. So that looks pretty cool. Why don't we go ahead and the say, Welcome to Shop Generator? So I will go back to the shop and just clear out everything here. And now that I have no files inside, let's try to do yo shop once again. And there you go! We have customized the prompt. Next one, why don't we go ahead and customize this question? For this, once again, I will come back to the shop generator, folder app and index.js. And let's scroll down a little bit more. There you go, we see the familiar question, Would you like to enable this option? So why don't we include something more reasonable for a shop generator? How about, Would you like to include books? And, by default, yup, the answer can be yes or no. And the warning, maybe we can say, Books will be included. Now here's the interesting thing. Here you see the name of the option. So for this, let's just say, include books. And we will refer this option right here. Let me replace this. Basically this.includebooks will include users option whether it's yes or no. Let's go down a little bit more. Over here, now you will see that when it's initiating the application it will create a directory called app, and then it will create a directory called templates. Now, what if I do not want this directory? Well, this is exactly where you can start customizing it. But I will definitely keep the package.json and bower because this is what we need for every project, some kind of package manager. And, let's just say I also don't need editorconfig jshint for now. But let's look inside the templates folder. Guess what? We are basically copying all of this from the folder templates. Now as we noticed before, we are not using editorconfig jshint, or travis.ymail, so let me go ahead and delete it. Instead of this, why don't we include a new file called books.txt? Hey there are all the books here! Obviously, in your actual project you'll probably include some kind of server-side language. But I just wanted it to be as language agnostic as possible so it's just a txt file. Great, so now all we need to do is books.txt and I want this inside the app folder, and I will not be copying jshint. All right, so now that we have included the books, notice here once again, we are actually asking, Would you like the books to be included? So whether it is yes or no, depending on that we will be including this. Well guess what? The user input was copied inside this this.includeBooks. So why don't we do a little check? That looks pretty good. Why don't we include one file by default? Let's call it music.txt. So I'm gonna come inside templates and say, music.txt. And I'll just say, List of songs. And inside here, once again, I will basically say, this and then music.txt. So I will just copy music, and copies inside app.music. So that now looks a lot more catered to our needs. And we kind of understand where are the template files coming from, and how it is actually being output as an instance of the shop. So I'm gonna come inside the shop once again, which is completely empty. So I'm gonna do yo shop. Yes, I would like to include the books. And there you go. It will have the package.json, bower.json, music, and books. And if we come back to our generated shop, this is exactly we will see. And yep, even the text inside music.txt has been copied. So let me delete the generated shop once again. And this time when I do yo shop, I'm gonna say, no, don't include books. And, guess what? The books.txt was missing. I hope this kind of gives you a glimpse into how you can expand it much, much more. To include the available framework such as Twitter Bootstrap or Zurb or many other frameworks available out there, and build your own customized generator with even questions. And of course the inspiration can come from the already built generators. Do look inside the one that you think can build upon or even customize. Now let's go back to the generator once again. The very last thing that we will explore is how to create a sub-generator. So a sub-generator will, basically, add on or extend our main generator, and in this case, it is shop. And let's create a sub-generator. So, in this case, we will say yo and then subgenerator, and we will call it music. And, notice, when you do this sub-generator creation and you come back to the generator, you'll find that there'll be a new folder will be created, and the folder name will be the sub-generator name. And, there you go, the familiar index.js will be there, and there you go, the familiar index.js will be there, and so will be the templates. This is very much similar to what we did to the main generator. All right, so let's look at the index.js. And over here you can see that it's copying some file. And obviously, this file is coming from the folder templates. Why don't we make it something more relevant? So I'm just going to call it music.txt. And I'll also rename this somefile.js as music.txt. Let's go to the main generator this time, index.js. And let's say by default, I will not include music.txt. All right, so let's run this, shop generator once again. So once again, it's empty, and when I do shop. So let's say I want the books, and yep, I do have the books but the music is obviously not there because it is a sub-generator. How do we bring on the music? For this case we will have to do, yo shop: and then the sub-generator name, music. Why don't we input in some value which is techno, and there you go, it will create a music.txt. And when we come back to the shop, yep, music.txt was now copied. Now this, as you can see, is barely dynamic based on the user input. I mean, where did the word techno go, and how can it come into use? So, in this case, let's go back to the generator project. And we will have a variable called viz.name and this is exactly where we can capture the parameter that we input here, which was, techno, in our case. Now just as a note, there is definitely a fantastic Writing Your First Generator documentation in the Yeoman website. And if you kind of scroll down to the part where they are telling us how we can create a sub-generator, I really liked this. So basically what it will do is it append the date to the created file. So I'm gonna copy this little code and customize it to our purpose. So, let me go to the sub-generator, which is music, in this case. And let me paste it here. All right, so it will get today's date, and then it will create a file name. So we will prefix it here, and then let's just put a -music.txt, so basically that will be the file name, the date, and then -music.txt instead of just plain old music. And this is the interesting part, this .write. So why don't we create the file inside app, once again? And it will be app/music.txt. And the second argument for the write function is, basically, the input contents. In this case, we will simply include this.name. Or how about something a little bit more dynamic. So maybe we can say Music type and then a little colon. Great. So now what it will do is when we initiate the sub-generator music, it will create a dynamic file with a dynamic name based on today's date. And it will also write in the content, which is input by the user. Let's try that out. So once again I'm in an empty folder and now I say yo shop. Yeah, sure I want books as well. And there were only books. And now let me initiate the sub-generator. In this case I'll say yo shop. And then the sub-generator is called music. And let's put in rock. And there you go. A little text file is created, as we expected with a little date, which is prepended to the name music.txt. Why don't we go ahead and look inside this file called music.txt? And there you go, music type is rock. So, once again, that was a little bit about Yeoman, and how you can get started by creating your own generator. I hope it makes you excited. And most importantly, do go ahead and look at the current projects, because even when you, kind of, integrate with Grunt and what not, if you look at the, some of the very popular projects in terms of generators, you see all this good stuff included there.