What is Yeoman and this generator?
Apart from being a farmer, Yeoman is also a development tool, used for quickly setting up a frontend stack. Yeoman is installed via Npm and is typically used alongside NodeJs, Grunt and Bower. Yeoman generators are the actual stacks and can be used when you start a new project. So once you have Yeoman installed, you can install generators via Npm, then build your new project base using the generators. This means you don’t have to do all the nitty gritty stuff, like setting up test frameworks, task runners, static code analysis etc.
The creators of Yeoman have created a huge amount of generators for libraries like Angular, Backbone, Ember, Chromeapps etc. There are also around 1,000 created by third parties. So I thought I’d get on the bang wagon and make one more.
What is the React-Require generator?
After a bit of digging around I soon realised that no one had created a Yeoman generators for a React application that also used RequireJS. It may have something to do with Angular being so dominant right now, but I like React, so I thought I’d create a generator for it. The startup application that it creates is a todo list that updates all clients in real time using WebSockets.
The tools and libraries I chose to use as part of this generator include:
- Bootstrap – This is used to create the interface for the todo list.
- Node/Express – An Express server running on NodeJS, this is used to keep a persistent state of all items in the todo list, across all clients.
- Grunt – This is used to startup the Express server and create another server for the React application (So a server like Apache isn’t require)
- React/JSX – React is a tool developed by Facebook for creating templates using data bindings. JSX is XML language which can be used inside React to simplify usage.
- RequireJS – This is and AMD loader for browsers, which is useful for dependency injection.
- Socket.IO – Socket.IO is used by the clients and Express server to update changes across all clients, when changes are made.
- Karma/Jasmine – Karma is a test runner developed by Google, Jasmine is a BBD framework, Jasmine tests are run as part of Grunt.
- Sass – This is a CSS preprocessor, Sass is compiled to CSS using Grunt.
- Bower – This is a package manager and is used for installing libraries like Bootstrap and RequireJS.
How do I use the generator?
It’s all pretty simple stuff. I’ve create a README in the projects repository on Github, which explains everything.
I hope you find the generator useful and please do contribute.2 Love This