Download as PDF, PPTX
![Using Yeoman to Help Others Get Started
50
As we looked for a way to help the community
build and deploy production level MEAN
applications, we decided to go with a Yeoman
generator. […] provides a powerful, easy to
maintain, and open solution for scaffolding
applications.](https://image.slidesharecdn.com/slides-141203171254-conversion-gate02/85/Kickstarting-Node-js-Projects-with-Yeoman-54-320.jpg)
![Using Yeoman to Help Others Get Started
50
As we looked for a way to help the community
build and deploy production level MEAN
applications, we decided to go with a Yeoman
generator. […] provides a powerful, easy to
maintain, and open solution for scaffolding
applications.](https://image.slidesharecdn.com/slides-141203171254-conversion-gate02/75/Kickstarting-Node-js-Projects-with-Yeoman-54-2048.jpg)
Uploaded byPatrick Buergin
Kickstarting Node.js Projects with Yeoman
The document discusses the challenges of kickstarting Node.js projects and introduces Yeoman as a tool that simplifies project setup by providing best practices and scaffolding through generators. It highlights the use of various generators, including those for Express and MEAN stack applications, and demonstrates the process of generating a basic project structure and necessary files. Additionally, it emphasizes the importance of such tools in helping developers maintain productivity and streamline development workflows.
More Related Content
Similar to Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
- 1. Kickstarting Node.js Projectswith patrickbuergin.com 2014-12-04
- 2.
- 3. It Can BeHard to Get Started ‣ Naming things ‣ Searching for best practices ‣ Settling for a project structure ‣ Setting up build scripts ‣ Managing dependencies ‣ Writing boilerplate code … No Consensus TL; DR 3
- 4. Yeoman Overview yeoman.io Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive. Weekly #downloads @ npm 4
- 5. Yeoman It’s aWorkflow… Scaffolding Package Management Build System yo Bower & npm Grunt / Gulp 5
- 6. Yeoman …and anEcosystem of Generators 6
- 7. Yeoman …and anEcosystem of Generators 6
- 8. Front-End Example Launchinga Generator $ npm install -g yo $ npm install -g generator-webapp 7
- 9. Front-End Example GeneratorOutput + Minification, Testing, Linting, … $ grunt serve 8
- 10. Front-End Example Workflow Scaffolding Package Management Build System yo Bower & npm Grunt 9
- 11. Yeoman Isn’t Limitedto Front-End 10
- 12. Yeoman Isn’t Limitedto Front-End 10
- 13. Some Related Concepts Express Generator Archetypes Eclipse (Java) & new & generate 11
- 14. Popular Node Generators express kraken node Weekly #downloads @ npm “based on the express command line tool” builds upon Express and enables environment-aware, dynamic configuration, advanced middleware capabilities, security, and app lifecycle events. 12
- 15. Demo generator-node +generator-express Let’s create a small node module with the help of generator-node…
- 16. Demo generator-node +generator-express After a number of questions, it initializes a suitable project structure
- 17. Demo generator-node +generator-express After a couple of seconds we’re ready to go.
- 18. Demo generator-node +generator-express Among other things, it created a README template, as well as a build script that runs a linter (JSHint) and tests (Mocha)
- 19. Demo generator-node +generator-express This is where you would add the module functions…
- 20. Demo generator-node +generator-express …and this is the corresponding test
- 21. Demo generator-node +generator-express For the sake of demonstration, let’s implement a module function that generates fancy job titles — just like this page does
- 22. Demo generator-node +generator-express Let’s adapt the test accordingly…
- 23. Demo generator-node +generator-express …and implement a suitable generate function
- 24. Demo generator-node +generator-express We’re good to go. Let’s run the build script and pack the module
- 25. Demo generator-node +generator-express Let’s use this opportunity to check out generator-express as well. I choose the most basic options…
- 26. Demo generator-node +generator-express This, again, only takes a couple of seconds and initializes a basic express project structure for us
- 27. Demo generator-node +generator-express By default, the build script starts the server and will automatically restart it whenever you change the code
- 28. Demo generator-node +generator-express This is what the server returns by default
- 29. Demo generator-node +generator-express Let’s stop the server and integrate the node module we’ve just created…
- 30. Demo generator-node +generator-express Here you see the generated project structure, as well as the app.js file.
- 31. Demo generator-node +generator-express Let’s edit the index page, so that it returns a list of fancy job titles. The corresponding files are just where you would expect them
- 32. Demo generator-node +generator-express That should do.
- 33. Demo generator-node +generator-express And here’s the result. This example was kinda far from practice, but I guess you got the idea of what Yeoman generators can do for you.
- 34. The MEAN Stack Node.js + Express REST API socket.io Angular.js HTML / CSS server client MongoDB Wire Mongoose ODM 32
- 35. The MEAN Stack Node.js + Express REST API socket.io Angular.js HTML / CSS server client MongoDB Wire Mongoose ODM + Testing, Authentication, Preprocessors, … 32
- 36. Popular MEAN Generators angular-fullstack meanjs mean-seed meanstack Weekly #downloads @ npm 33
- 37. Demo generator-meanjs Youknow the deal…
- 38. Demo generator-meanjs Afterwe answer a number of questions, the generator initializes a fairly complex project structure
- 39. Demo generator-meanjs Let’sstart a MongoDB server so that we can check out the application…
- 40. Demo generator-meanjs …thenrun grunt to build and start it
- 41. Demo generator-meanjs Thisis the default page. As you can see on the upper right, the scaffold already includes some basic user management functionality
- 42. Demo generator-meanjs Let’sregister a new user. In order to use an external identity provider, we would have to add API keys and host the server on the internet (callbacks).
- 43. Demo generator-meanjs Afterlogging in, you can find some menu items to manage your profile
- 44. Demo generator-meanjs Thegenerated code is structured in a comprehensible manner. In the foreground, you see a part of the default schema for users (Mongoose)
- 45. Demo generator-meanjs Thegenerated code is structured in a comprehensible manner. In the foreground, you see a part of the default schema for users (Mongoose) /app (back-end) Express components, Mongoose Schemas /config (back-end) Authentication Strategies, API Keys, Addresses, … /public (front-end) AngularJS modules, view templates, …
- 46. Demo generator-meanjs generator-meanjsalso offers a number sub-generators in order to speed up your development — for example :crud-module
- 47. Demo generator-meanjs Itcreates both AngularJS and Express files, supporting full CRUD (create, read, update, delete) functionality, as well as basic test generation (Karma & Mocha).
- 48. Demo generator-meanjs Thisis what our new CRUD module looks like in the front-end
- 49. Demo generator-meanjs Aspromised, there is a list view, a detail view and views for adding/editing objects
- 50. Demo generator-meanjs Let’sadd a new job…
- 51. Demo generator-meanjs Thereit is — it has also been written to our database by means of a POST request to the corresponding API endpoint provided by Express
- 52. Demo generator-meanjs Hereis an excerpt of the generated code — a great starting point
- 53. Other Back-End Generators jhipster skinny Total #downloads ’14 @ npm Weekly #downloads @ npm “Skinny framework’s concept is Scala on Rails” 49
- 54. Using Yeoman toHelp Others Get Started 50 As we looked for a way to help the community build and deploy production level MEAN applications, we decided to go with a Yeoman generator. […] provides a powerful, easy to maintain, and open solution for scaffolding applications.
- 55. Building Generators 51 Well documented @ yeoman.io/authoring …and there is a generator for that :)
- 56. Discussion Bloat OutdatedGenerators Doesn’t fit your needs Agility Inspiration Focus on issue at hand Helping others Not invented here