{"id":1507,"date":"2018-07-26T15:17:39","date_gmt":"2018-07-26T13:17:39","guid":{"rendered":"https:\/\/blog.thecodecampus.de\/?p=1507"},"modified":"2023-12-20T19:46:12","modified_gmt":"2023-12-20T18:46:12","slug":"locally-serving-the-build-distribution-of-an-angular-spa","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/","title":{"rendered":"Locally serving the build distribution of an Angular SPA"},"content":{"rendered":"<p>tl;dr<br \/>\nUse Node Package <a href=\"https:\/\/www.npmjs.com\/package\/local-web-server\">local-web-server<\/a> and its command <code>ws<\/code> with the <code>spa<\/code> flag like this: <code>ws --spa index.html<\/code><\/p>\n<p>While developing an Angular based SPA usually you will use the Angular CLI as build too. The CLI has an integrated development server which is able to handle client-side routing. So whenever a reload happens and you&#8217;re on a route, the browser and the application will stay on this route after the reload without any error. It is a complex team play of the server, the browser and Angular. It is described in detail <a href=\"https:\/\/angular.io\/guide\/router#browser-url-styles\">here at angular.io<\/a>.<\/p>\n<p>As soon as you build a production ready distribution of your Angular application you loose this comfort. The distribution is stored in dist folder and you can serve it with any HTTP server. There are some packages for Node like <a href=\"https:\/\/www.npmjs.com\/package\/http-server\">http-server<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/node-static\">node-static<\/a> and with Python it is also <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Common_questions\/set_up_a_local_testing_server\">really easy<\/a>.<br \/>\nBut whenever you&#8217;re at a specific route (like <code>http:\/\/localhost:8080\/my-route<\/code>) and hit reload, you will get a 404 error because the file my-route.html does not exist on the server. That&#8217;s how the web works.<\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/local-web-server\">local-web-server<\/a> is also an NPM package to start a local server. It has a handy feature: SPA mode. With <code>ws --spa index.html<\/code> you can tell the server to deliver the index.html file whenever a file is not found instead of a 404. That&#8217;s the same behaviour the dev server of the Angular CLI provides.<\/p>\n<p>The shown procedure does not only work for Angular but for all Single Page Applications, e.g. React or VueJs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>tl;dr Use Node Package local-web-server and its command <code>ws<\/code> with the <code>spa<\/code> flag like this: <code>ws --spa index.html<\/code> While developing an Angular based SPA usually you will use the Angular CLI as build too. The CLI has an integrated development server which is able to handle client-side routing. So whenever a reload happens and you&#8217;re [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,79],"tags":[],"class_list":["post-1507","post","type-post","status-publish","format-standard","hentry","category-angular","category-tooling"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Locally serving the build distribution of an Angular SPA - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Optimize Angular SPA delivery locally! Streamline development with our guide on serving the build distribution. Boost efficiency now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Locally serving the build distribution of an Angular SPA - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Optimize Angular SPA delivery locally! Streamline development with our guide on serving the build distribution. Boost efficiency now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-26T13:17:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T18:46:12+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Locally serving the build distribution of an Angular SPA\",\"datePublished\":\"2018-07-26T13:17:39+00:00\",\"dateModified\":\"2023-12-20T18:46:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/\"},\"wordCount\":259,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"articleSection\":[\"Angular\",\"Tooling\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/\",\"name\":\"Locally serving the build distribution of an Angular SPA - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"datePublished\":\"2018-07-26T13:17:39+00:00\",\"dateModified\":\"2023-12-20T18:46:12+00:00\",\"description\":\"Optimize Angular SPA delivery locally! Streamline development with our guide on serving the build distribution. Boost efficiency now.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/locally-serving-the-build-distribution-of-an-angular-spa\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Locally serving the build distribution of an Angular SPA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Locally serving the build distribution of an Angular SPA - Web Development Blog","description":"Optimize Angular SPA delivery locally! Streamline development with our guide on serving the build distribution. Boost efficiency now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/","og_locale":"en_US","og_type":"article","og_title":"Locally serving the build distribution of an Angular SPA - Web Development Blog","og_description":"Optimize Angular SPA delivery locally! Streamline development with our guide on serving the build distribution. Boost efficiency now.","og_url":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2018-07-26T13:17:39+00:00","article_modified_time":"2023-12-20T18:46:12+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Locally serving the build distribution of an Angular SPA","datePublished":"2018-07-26T13:17:39+00:00","dateModified":"2023-12-20T18:46:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/"},"wordCount":259,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"articleSection":["Angular","Tooling"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/","url":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/","name":"Locally serving the build distribution of an Angular SPA - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"datePublished":"2018-07-26T13:17:39+00:00","dateModified":"2023-12-20T18:46:12+00:00","description":"Optimize Angular SPA delivery locally! Streamline development with our guide on serving the build distribution. Boost efficiency now.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/locally-serving-the-build-distribution-of-an-angular-spa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Locally serving the build distribution of an Angular SPA"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=1507"}],"version-history":[{"count":6,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1507\/revisions"}],"predecessor-version":[{"id":1514,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1507\/revisions\/1514"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=1507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=1507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}