{"id":511,"date":"2020-06-26T14:53:31","date_gmt":"2020-06-26T09:23:31","guid":{"rendered":"https:\/\/webdesignerinc.com\/blog\/?p=511"},"modified":"2020-06-26T15:03:54","modified_gmt":"2020-06-26T09:33:54","slug":"angular-universal-ssr-with-firebase","status":"publish","type":"post","link":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/","title":{"rendered":"Angular Universal SSR with Firebase"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We can optimize the initial loading time of angular application using angular universal (server-side rendering).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Server-Side Rendering also helps in SEO (Search Engine Optimization) and Improving performance on mobile and low powered devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following lesson will show you how to setup Angular Universal with firebase. In addition, you will learn how to deploy the app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Implement Angular Server Side Rendering with Just One Command<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Angular 9 release, Angular Universal Team came up with a\u00a0<code>ng add<\/code>\u00a0schematic to implement SSR in angular application.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng add @nguniversal\/express-engine<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This schematic will add and update all required files to implement server-side rendering in angular application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will add the following files :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>src\/main.server.ts<\/li><li>src\/app\/app.server.module.ts<\/li><li>tsconfig.server.json<\/li><li>server.ts<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">and update the following files :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>angular.json<\/li><li>package.json<\/li><li>src\/main.ts<\/li><li>src\/app\/app.module.ts<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Server-Side Rendering on Local System<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@nguniversal\/express-engine<\/code>&nbsp;schematic also add the CLI builders to start server-side rendering on the local system and generating production build with SSR.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This schematic adds the following\u00a0<code>scripts<\/code>\u00a0in\u00a0<code>package.json<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"dev:ssr\": \"ng run &#91;project_name]:serve-ssr\",\n\"serve:ssr\": \"node dist\/&#91;project_name]\/server\/main.js\",\n\"build:ssr\": \"ng build --prod &amp;&amp; ng run &#91;project_name]:server:production\",\n\"prerender\": \"ng run &#91;project_name]:prerender\"<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Using the following command, We can start rendering our app with Universal on the local system.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev:ssr<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This will serve the angular application with server-side rendered pages on&nbsp;<code>localhost:4200<\/code>. you can confirm angular universal implementation by looking into the page source.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you find rendered HTML in the page source, Great !!! angular universal implementation is done.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Deploy Angular Universal App to Firebase<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Angular Firebase Team also has added a new feature in&nbsp;<code>ng add @angular\/fire<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While you add the&nbsp;<code>@angular\/fire<\/code>&nbsp;using&nbsp;<code>ng add<\/code>, it will check whether the current project is an angular universal project, if yes it will ask the following question.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>We detected the Angular Universal Project, Do you want to deploy it as a Firebase Function?<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you enter\u00a0<code>y\/yes<\/code>\u00a0here, it will install some more packages to implement firebase cloud functions to deploy angular universal project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once Firebase installation is done we can deploy our angular universal project to firebase using just\u00a0<code><strong>ng deploy<\/strong><\/code>\u00a0command.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can optimize the initial loading time of angular application using angular universal (server-side rendering). Server-Side Rendering also helps in SEO (Search Engine Optimization) and Improving performance on mobile and low powered devices. The following lesson will show you how to setup Angular Universal with firebase. In addition, you will learn how to deploy the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,5],"tags":[],"class_list":["post-511","post","type-post","status-publish","format-standard","hentry","category-angular","category-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Universal SSR with Firebase - Web designer Blog | Website Design and Development<\/title>\n<meta name=\"description\" content=\"A Complete tutorial to server-side rendering with Angular Universal and Firebase.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Universal SSR with Firebase - Web designer Blog | Website Design and Development\" \/>\n<meta property=\"og:description\" content=\"A Complete tutorial to server-side rendering with Angular Universal and Firebase.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"Web designer Blog | Website Design and Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Webdesignerinc\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-26T09:23:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-26T09:33:54+00:00\" \/>\n<meta name=\"author\" content=\"Teji\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@teji_tejinder\" \/>\n<meta name=\"twitter:site\" content=\"@teji_tejinder\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Teji\" \/>\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:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/\"},\"author\":{\"name\":\"Teji\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#\\\/schema\\\/person\\\/5e2f01e80461d9a5ca3c361b86f405e7\"},\"headline\":\"Angular Universal SSR with Firebase\",\"datePublished\":\"2020-06-26T09:23:31+00:00\",\"dateModified\":\"2020-06-26T09:33:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/\"},\"wordCount\":310,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#organization\"},\"articleSection\":[\"Angular\",\"Tutorial\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/\",\"url\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/\",\"name\":\"Angular Universal SSR with Firebase - Web designer Blog | Website Design and Development\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#website\"},\"datePublished\":\"2020-06-26T09:23:31+00:00\",\"dateModified\":\"2020-06-26T09:33:54+00:00\",\"description\":\"A Complete tutorial to server-side rendering with Angular Universal and Firebase.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/angular-universal-ssr-with-firebase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Universal SSR with Firebase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/\",\"name\":\"Web designer Blog | Website Design and Development\",\"description\":\"Practical web design, WordPress, and development guides for businesses, freelancers, and developers.\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#organization\",\"name\":\"Web designer Blog | Website Design and Development\",\"url\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/logo1.png\",\"contentUrl\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/logo1.png\",\"width\":409,\"height\":80,\"caption\":\"Web designer Blog | Website Design and Development\"},\"image\":{\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Webdesignerinc\",\"https:\\\/\\\/x.com\\\/teji_tejinder\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tejindersi\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdesignerinc.com\\\/blog\\\/#\\\/schema\\\/person\\\/5e2f01e80461d9a5ca3c361b86f405e7\",\"name\":\"Teji\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\\\/\\\/webdesignerinc.com\\\/blog\\\/wp-content\\\/plugins\\\/userswp\\\/assets\\\/images\\\/no_profile.png\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\\\/\\\/webdesignerinc.com\\\/blog\\\/wp-content\\\/plugins\\\/userswp\\\/assets\\\/images\\\/no_profile.png\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\\\/\\\/webdesignerinc.com\\\/blog\\\/wp-content\\\/plugins\\\/userswp\\\/assets\\\/images\\\/no_profile.png\",\"caption\":\"Teji\"},\"description\":\"i am admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Universal SSR with Firebase - Web designer Blog | Website Design and Development","description":"A Complete tutorial to server-side rendering with Angular Universal and Firebase.","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:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/","og_locale":"en_US","og_type":"article","og_title":"Angular Universal SSR with Firebase - Web designer Blog | Website Design and Development","og_description":"A Complete tutorial to server-side rendering with Angular Universal and Firebase.","og_url":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/","og_site_name":"Web designer Blog | Website Design and Development","article_publisher":"https:\/\/www.facebook.com\/Webdesignerinc","article_published_time":"2020-06-26T09:23:31+00:00","article_modified_time":"2020-06-26T09:33:54+00:00","author":"Teji","twitter_card":"summary_large_image","twitter_creator":"@teji_tejinder","twitter_site":"@teji_tejinder","twitter_misc":{"Written by":"Teji","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/#article","isPartOf":{"@id":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/"},"author":{"name":"Teji","@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/person\/5e2f01e80461d9a5ca3c361b86f405e7"},"headline":"Angular Universal SSR with Firebase","datePublished":"2020-06-26T09:23:31+00:00","dateModified":"2020-06-26T09:33:54+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/"},"wordCount":310,"commentCount":0,"publisher":{"@id":"https:\/\/webdesignerinc.com\/blog\/#organization"},"articleSection":["Angular","Tutorial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/","url":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/","name":"Angular Universal SSR with Firebase - Web designer Blog | Website Design and Development","isPartOf":{"@id":"https:\/\/webdesignerinc.com\/blog\/#website"},"datePublished":"2020-06-26T09:23:31+00:00","dateModified":"2020-06-26T09:33:54+00:00","description":"A Complete tutorial to server-side rendering with Angular Universal and Firebase.","breadcrumb":{"@id":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webdesignerinc.com\/blog\/angular-universal-ssr-with-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesignerinc.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Universal SSR with Firebase"}]},{"@type":"WebSite","@id":"https:\/\/webdesignerinc.com\/blog\/#website","url":"https:\/\/webdesignerinc.com\/blog\/","name":"Web designer Blog | Website Design and Development","description":"Practical web design, WordPress, and development guides for businesses, freelancers, and developers.","publisher":{"@id":"https:\/\/webdesignerinc.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesignerinc.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesignerinc.com\/blog\/#organization","name":"Web designer Blog | Website Design and Development","url":"https:\/\/webdesignerinc.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/logo1.png","contentUrl":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/logo1.png","width":409,"height":80,"caption":"Web designer Blog | Website Design and Development"},"image":{"@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Webdesignerinc","https:\/\/x.com\/teji_tejinder","https:\/\/www.linkedin.com\/in\/tejindersi"]},{"@type":"Person","@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/person\/5e2f01e80461d9a5ca3c361b86f405e7","name":"Teji","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png","url":"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png","caption":"Teji"},"description":"i am admin"}]}},"_links":{"self":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts\/511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/comments?post=511"}],"version-history":[{"count":2,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts\/511\/revisions"}],"predecessor-version":[{"id":514,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts\/511\/revisions\/514"}],"wp:attachment":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/media?parent=511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/categories?post=511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/tags?post=511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}