{"id":7420,"date":"2019-09-28T19:46:30","date_gmt":"2019-09-28T19:46:30","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7420"},"modified":"2019-09-28T20:33:35","modified_gmt":"2019-09-28T20:33:35","slug":"extending-our-express-based-server","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/extending-our-express-based-server\/","title":{"rendered":"Extending our Express based server"},"content":{"rendered":"<p>In my previous <a href=\"http:\/\/putridparrot.com\/blog\/express-server-with-typescript\/\" rel=\"noopener noreferrer\" target=\"_blank\">post<\/a> I showed how to create an Express server in TypeScript. Let&#8217;s now extend things&#8230;<\/p>\n<p>To start with, create some folders (the names are not important, in that this is not using convention based folder names). We&#8217;re going to set things up in a similar way to I&#8217;ve done for C# and Java&#8230;<\/p>\n<ul>\n<li>Add a new folder controllers<\/li>\n<li>Add a new folder models<\/li>\n<\/ul>\n<p>Create a file server.ts in the root folder. Here&#8217;s the code from the previous post plus some extras<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport express from &quot;express&quot;;\r\nimport bodyParser from &quot;body-parser&quot;;\r\n\r\nconst server = express();\r\n\r\nserver.use(bodyParser.json());\r\n\r\nserver.get(&quot;\/&quot;, (request, response) =&gt; {\r\n  response.send(&quot;&lt;h1&gt;Hello World&lt;\/h1&gt;&quot;);\r\n});\r\n\r\nconst port = 4000;\r\nserver.listen(port, \r\n  () =&gt; console.log(`Server on port ${port}`)\r\n);\r\n<\/pre>\n<p>The <a href=\"https:\/\/github.com\/expressjs\/body-parser\" rel=\"noopener noreferrer\" target=\"_blank\">body-parser<\/a> exposes middleware etc. in this case we&#8217;re adding the ability to work with JSON content type.<\/p>\n<p>Now let&#8217;s change the existing route \/ and add some more, below is the additional code required in server.ts<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport * as indexController from &quot;.\/controllers\/indexController&quot;;\r\n\r\nserver.get('\/', indexController.index);\r\nserver.get('\/users', indexController.users);\r\nserver.get('\/users\/create', indexController.create);\r\n\r\n\/\/ POST implementation\r\n\/\/ server.post('\/users\/create', indexController.create);\r\n<\/pre>\n<p>We now need to implement the model and the controller, so starting with the model, create the file user.ts within the models folder and it should look like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nexport default class User {\r\n  constructor(public firstName: string, public lastName: string) {\r\n  }\r\n}\r\n\r\nexport const stubData = &#x5B;\r\n  new User('Scooby', 'Doo'),\r\n  new User('Fred', 'Jones'),\r\n  new User('Velma', 'Dinkley'),\r\n  new User('Daphne', 'Blake'),\r\n  new User('Shaggy', 'Rogers'),\r\n];\r\n<\/pre>\n<p>The stubData ofcourse is just here to give us some data to start things off. <\/p>\n<p>In the controllers folder, add a new file named indexController.ts and the file should look like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport { Request, Response } from &quot;express&quot;;\r\nimport User, { stubData } from '..\/models\/user';\r\n\r\nexport const index = (req: Request, res: Response) =&gt; {\r\n  res.send(&quot;&lt;h1&gt;Methods are&lt;\/h1&gt;&lt;ul&gt;&lt;li&gt;users&lt;\/li&gt;&lt;li&gt;create&lt;\/li&gt;&lt;\/ul&gt;&quot;)\r\n};\r\n\r\nexport const users = (req: Request, res: Response) =&gt; {\r\n  res.json(stubData);\r\n};\r\n\r\nexport const create = (req: Request, res: Response) =&gt; {\r\n  const newUser = new User(req.query.firstName, req.query.lastName);\r\n  stubData.push(newUser);\r\n  res.json(newUser);\r\n};\r\n\r\n\/\/ POST implementation\r\n\/\/ export const create = (req: Request, res: Response) =&gt; {\r\n\/\/   const newUser = new User(req.body.firstName, req.body.lastName);\r\n\/\/   stubData.push(newUser);\r\n\/\/   res.json(newUser);\r\n\/\/ };\r\n<\/pre>\n<p>The scripts for package.json should also be taken from the previous <a href=\"http:\/\/putridparrot.com\/blog\/express-server-with-typescript\/\" rel=\"noopener noreferrer\" target=\"_blank\">post<\/a>.<\/p>\n<p>If you now run <em>yarn build<\/em> then <em>yarn start<\/em> your server will be up and running. Using the following URL&#8217;s<\/p>\n<ul>\n<li>http:\/\/localhost:4000\/<\/li>\n<li>http:\/\/localhost:4000\/users<\/li>\n<li>http:\/\/localhost:4000\/users\/create?firstName=Miner&#038;lastName=FortyNiner<\/li>\n<p><\/em><\/p>\n<p>will result in, the first URL returning a simple help screen using HTML, the second will list the current array of users using JSON and finally the third URL will create a new user, the response will show the new user as JSON, but if you call the <em>users<\/em> method again you will see the newly added user.<\/p>\n<p>I&#8217;ve also listed the POST implementations which you&#8217;d probably more likely use for mutations, but the GET implementations are fine in this instance and easier to test via our preferred browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous post I showed how to create an Express server in TypeScript. Let&#8217;s now extend things&#8230; To start with, create some folders (the names are not important, in that this is not using convention based folder names). We&#8217;re going to set things up in a similar way to I&#8217;ve done for C# and [&hellip;]<\/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":[268,45,46],"tags":[],"class_list":["post-7420","post","type-post","status-publish","format-standard","hentry","category-express","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7420","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=7420"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7420\/revisions"}],"predecessor-version":[{"id":7472,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7420\/revisions\/7472"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}