{"id":408,"date":"2023-01-31T05:00:00","date_gmt":"2023-01-31T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=408"},"modified":"2023-01-31T08:58:50","modified_gmt":"2023-01-31T16:58:50","slug":"how-to-mock-you-entire-backend-server","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-mock-you-entire-backend-server\/","title":{"rendered":"How to mock your entire backend server?"},"content":{"rendered":"\n<p>This is the last post in our series on mocking data for testing purposes. So far, we have seen <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-generate-mock-data-for-my-application\/\" target=\"_blank\" rel=\"noopener\" title=\"\">how to generate mock data using Mockaroo<\/a> and then <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-use-mock-data-in-your-angular-application\/\" target=\"_blank\" rel=\"noopener\" title=\"\">how to incorporate such fake data in our Angular application<\/a>.<\/p>\n\n\n\n<p>Today, let&#8217;s push this one step further and use that same JSON data to <strong>mock our entire backend server<\/strong>, including CRUD (CReate Update Delete) operations, so you can also test data updates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Enter JSON Server<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/package\/json-server\" target=\"_blank\" rel=\"noopener\" title=\"\">JSON server<\/a> is a small npm library that reads a JSON file and turns it automatically into a <a href=\"https:\/\/developer.ibm.com\/articles\/ws-restful\/\" target=\"_blank\" rel=\"noopener\" title=\"\">RESTful web server<\/a>. Yes, you read that right: All we need as input is our JSON data in a file!<\/p>\n\n\n\n<p>The format of that JSON is one single object where each property will be turned into a backend endpoint. So, for instance, say you need to support two types of data: <strong>users<\/strong> and <strong>teams<\/strong>.<\/p>\n\n\n\n<p>Then your JSON database will look like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n   <span class=\"hljs-attr\">\"users\"<\/span>: &#91; \n      <span class=\"hljs-comment\">\/\/ Array of all users data<\/span>\n   ],\n   <span class=\"hljs-attr\">\"teams\"<\/span>: &#91; \n      <span class=\"hljs-comment\">\/\/ Array of all teams data<\/span>\n   ]\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You would substitute those arrays with the mock data generated with Mockaroo, and then running JSON server would give you the following RESTful API:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>HTTP GET \/users<\/code>  =&gt;  Returns the list of all users<\/li>\n\n\n\n<li><code>HTTP GET \/users\/21<\/code> =&gt; Returns the user with <code>id = 21<\/code><\/li>\n\n\n\n<li><code>HTTP POST \/user<\/code> =&gt; Creates a new user<\/li>\n\n\n\n<li><code>HTTP DELETE \/user\/21<\/code> =&gt; Deletes the user with <code>id = 21<\/code><\/li>\n\n\n\n<li><code>HTTP PUT \/user\/21<\/code> =&gt; Updates the user with <code>id = 21<\/code><\/li>\n<\/ul>\n\n\n\n<p>JSON server also supports <a href=\"https:\/\/www.npmjs.com\/package\/json-server#paginate\" target=\"_blank\" rel=\"noopener\" title=\"\">pagination<\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/json-server#full-text-search\" target=\"_blank\" rel=\"noopener\" title=\"\">full-text search<\/a>, and <a href=\"https:\/\/www.npmjs.com\/package\/json-server#add-custom-routes\" target=\"_blank\" rel=\"noopener\" title=\"\">custom routes<\/a> if you want to add more endpoints to your test backend. Any changes you make to your data persist in your JSON file, too. This means you have a single file database for testing purposes, which is excellent!<\/p>\n\n\n\n<p>If you want to try it, here is a complete <a href=\"https:\/\/blog.angulartraining.com\/fake-your-angular-backend-until-you-make-it-8d145f713e14\" target=\"_blank\" rel=\"noopener\" title=\"\">tutorial on how to use JSON server with Angular apps<\/a>. The <a href=\"https:\/\/www.npmjs.com\/package\/json-server#getting-started\" target=\"_blank\" rel=\"noopener\" title=\"\">getting started<\/a> section of the npm package is also very well documented.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the last post in our series on mocking data for testing purposes. So far, we have seen how to generate mock data using Mockaroo and then how to incorporate such fake data in our Angular application. Today, let&#8217;s push this one step further and use that same JSON data to mock our entire [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,17],"tags":[],"class_list":["post-408","post","type-post","status-publish","format-standard","hentry","category-testing","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=408"}],"version-history":[{"count":7,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/408\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/408\/revisions\/415"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}