In the previous post we looked at the basics of getting started with yeoman and the tools etc. around it. Let’s now write some real code. This is going to be a generator for creating a node server using my preferred stack of technologies and allow the person running it to supply data and\/or options for the generator to allow it to generate code specific to the user’s needs.<\/p>\n
Input<\/strong><\/p>\n Our node server will offer the option of handling REST, websocket or GraphQL endpoints. So we’re going to need some input from the user to choose the options they want.<\/p>\n First off, DO NOT USE the standard console.log etc. methods for output. Yeoman supplies the log function for this purpose.<\/p>\n Here’s an example of our generator with some basic interaction<\/p>\n Now if we run our generator we’ll be promoted (from the CLI) for a project name and for the selected endpoint type. The results of these prompts will then be output to the output stream.<\/p>\n As you can see from this simple example we can now start to build up a list of options for our generator to use when we generate our code.<\/p>\n Command line arguments<\/strong><\/p>\n In some cases we might want to allow the user to supply arguments from the command line, i.e. not be prompted for them. To achieve this we add a constructor, like this<\/p>\n Here’s we’ve declared an argument name<\/em> which is not required on the command line, this also allows us to run yo server –help<\/em> to see a list of options available for our generator.<\/p>\n The only problem with the above code is that if the user supplies this argument, they are still prompted for it via the prompting method. To solve this we can add the following<\/p>\n Now change our code to require yeoman-option-or-prompt, i.e.<\/p>\n Next change the constructor slightly, to this<\/p>\n and finally let’s change our prompting method to<\/p>\n Now when we run yo server<\/em> without an argument we still get the project name prompt, but when we supply the argument, i.e. yo server MyProject then the project name prompt no longer appears.<\/p>\n Templates<\/strong><\/p>\n With projects such as the one we’re developing here, it would be a pain if all output had to be written via code. Luckily yeoman includes a template capability from https:\/\/ejs.co\/. <\/p>\n So in this example add a templates folder to generators\/app and then within it add package.json, here’s my file<\/p>\n Notice the use of <%= %> to define our template variables. The variable name<\/em> now needs to be supplied via our generator. We need to make a couple of changes from our original source, the const input<\/em> needs to change to this.input<\/em> to allow the input variable to be accessible in another method, the writing method, which looks like this<\/p>\n here’s the changed prompting method as well<\/p>\n Now we can take this further<\/p>\n and here’s the changes to the writing<\/em> function<\/p>\n The above is quite convoluted, luckily yeoman includes functionality just for such things, using JSON objects<\/p>\n In the previous post we looked at the basics of getting started with yeoman and the tools etc. around it. Let’s now write some real code. This is going to be a generator for creating a node server using my preferred stack of technologies and allow the person running it to supply data and\/or options […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[284],"tags":[],"class_list":["post-7876","post","type-post","status-publish","format-standard","hentry","category-yeoman"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7876"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7876\/revisions"}],"predecessor-version":[{"id":8430,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7876\/revisions\/8430"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\nvar Generator = require("yeoman-generator");\r\nmodule.exports = class extends Generator {\r\n async prompting() {\r\n const input = await this.prompt([\r\n {\r\n type: "input",\r\n name: "name",\r\n message: "Enter project name",\r\n default: this.appname\r\n },\r\n {\r\n type: "list",\r\n name: "endpoint",\r\n message: "Endpoint type?",\r\n choices: ["REST", "REST\/websocket", "GraphQL"]\r\n }\r\n ]);\r\n\r\n\r\n this.log("Project name: ", input.name);\r\n this.log("Endpoint: ", input.endpoint);\r\n }\r\n};\r\n<\/pre>\n\r\nconstructor(args, opts) {\r\n super(args, opts);\r\n\r\n this.argument("name", { type: String, required: false });\r\n\r\n this.log(this.options.name);\r\n}\r\n<\/pre>\n\r\nyarn add yeoman-option-or-prompt\r\n<\/pre>\n
\r\nvar OptionOrPrompt = require('yeoman-option-or-prompt');\r\n<\/pre>\n\r\nconstructor(args, opts) {\r\n super(args, opts);\r\n\r\n this.argument("name", { type: String, required: false });\r\n\r\n this.optionOrPrompt = OptionOrPrompt;\r\n}\r\n<\/pre>\n\r\nasync prompting() {\r\n\r\n const input = await this.optionOrPrompt([ \r\n {\r\n type: "input",\r\n name: "name",\r\n message: "Enter project name",\r\n default: this.appname\r\n },\r\n {\r\n type: "list",\r\n name: "endpoint",\r\n message: "Endpoint type?",\r\n choices: ["REST", "REST\/websocket", "GraphQL"]\r\n }\r\n ]);\r\n\r\n this.log("Project name: ", input.name);\r\n this.log("Endpoint: ", input.endpoint);\r\n}\r\n<\/pre>\n\r\n{\r\n "name": "<%= name %>",\r\n "version": "1.0.0",\r\n "description": "",\r\n "module": "es6",\r\n "dependencies": {\r\n },\r\n "devDependencies": {\r\n }\r\n }\r\n<\/pre>\n\r\nwriting() {\r\n this.fs.copyTpl(\r\n this.templatePath('package.json'),\r\n this.destinationPath('public\/package.json'),\r\n { name: this.input.name } \r\n );\r\n}\r\n<\/pre>\n\r\nasync prompting() {\r\n\r\n this.input = await this.optionOrPrompt([ \r\n {\r\n type: "input",\r\n name: "name",\r\n message: "Enter project name",\r\n default: this.options.name\r\n },\r\n {\r\n type: "list",\r\n name: "endpoint",\r\n message: "Endpoint type?",\r\n choices: ["REST", "REST\/websocket", "GraphQL"]\r\n }\r\n ]);\r\n}\r\n<\/pre>\n\r\n{\r\n "name": "<%= name %>",\r\n "version": "1.0.0",\r\n "description": "",\r\n "module": "es6",\r\n "dependencies": { <% for (let i = 0; i < dependencies.length; i++) {%>\r\n "<%= dependencies[i].name%>": "<%= dependencies[i].version%>"<% if(i < dependencies.length - 1) {%>,<%}-%>\r\n <%}%>\r\n },\r\n "devDependencies": {\r\n }\r\n }\r\n<\/pre>\n\r\nwriting() {\r\n\r\n const dependencies = [\r\n { name: "express", version: "^4.17.1" },\r\n { name: "body-parser", version: "^1.19.0" }\r\n ]\r\n\r\n this.fs.copyTpl(\r\n this.templatePath('package.json'),\r\n this.destinationPath('public\/package.json'),\r\n { \r\n name: this.input.name, \r\n dependencies: dependencies \r\n } \r\n );\r\n}\r\n<\/pre>\n\r\nconst pkgJson = {\r\n dependencies: {\r\n "express": "^4.17.1",\r\n "body-parser": "^1.19.0"\r\n }\r\n}\r\n\r\nthis.fs.extendJSON(\r\n this.destinationPath('public\/package.json'), pkgJson)\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"