[{"data":1,"prerenderedAt":597},["ShallowReactive",2],{"article:creating-a-static-site-with-angular":3,"\u002Fblog\u002Fcreating-a-static-site-with-angular-surround":586},{"id":4,"title":5,"author":6,"body":7,"date":573,"description":574,"extension":575,"image":576,"meta":577,"minRead":225,"navigation":579,"path":580,"published":579,"seo":581,"stem":582,"tags":583,"__hash__":585},"blog\u002Fblog\u002Fcreating-a-static-site-with-angular.md","Creating a Static Site With Angular","Baljeet Singh",{"type":8,"value":9,"toc":571},"minimark",[10,14,45,52,55,58,61,64,67,87,95,100,115,118,136,142,170,186,344,349,479,482,513,520,523,536,554,567],[11,12,13],"p",{},"In a typical Single Page Angular Application if we view the source of the application inside the browser. You will see something like,",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Capp-root>\u003C\u002Fapp-root>\n","html","",[22,23,24],"code",{"__ignoreMap":20},[25,26,29,33,37,40,42],"span",{"class":27,"line":28},"line",1,[25,30,32],{"class":31},"sMK4o","\u003C",[25,34,36],{"class":35},"swJcz","app-root",[25,38,39],{"class":31},">\u003C\u002F",[25,41,36],{"class":35},[25,43,44],{"class":31},">\n",[11,46,47],{},[48,49],"img",{"alt":50,"src":51},"null","\u002Fimg\u002Fchrome_2019-09-17_20-22-57.png",[11,53,54],{},"If we deploy our application like this, search engines won't be able to crawl through our content.",[11,56,57],{},"So, there are two ways to make our Angular application optimized for the search engines. we can either server side render (ssr) our application or we can prerender our application during the build time.",[11,59,60],{},"There are different use cases for the two. But, If we are creating a simple website (e.g. portfolio website) with Angular, we can choose to prerender our application.",[11,62,63],{},"So, let's see how we can prerender our Angular application.",[11,65,66],{},"Let's start by creating a new Angular Project by typing the following,",[15,68,72],{"className":69,"code":70,"language":71,"meta":20,"style":20},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ng new ng-static\n","bash",[22,73,74],{"__ignoreMap":20},[25,75,76,80,84],{"class":27,"line":28},[25,77,79],{"class":78},"sBMFI","ng",[25,81,83],{"class":82},"sfazB"," new",[25,85,86],{"class":82}," ng-static\n",[11,88,89,90,94],{},"Here, ",[91,92,93],"strong",{},"ng-static"," is the name of the application",[11,96,97],{},[48,98],{"alt":50,"src":99},"\u002Fimg\u002Fcode_-_insiders_2019-09-17_20-30-41.png",[11,101,102,103,108,109,114],{},"You can select ",[91,104,105],{},[22,106,107],{},"Y"," for routing and use ",[91,110,111],{},[22,112,113],{},"SCSS"," for styles",[11,116,117],{},"Now, let's start by generating couple of components. We'll generate regular component for users,",[15,119,121],{"className":69,"code":120,"language":71,"meta":20,"style":20},"ng generate component users\n",[22,122,123],{"__ignoreMap":20},[25,124,125,127,130,133],{"class":27,"line":28},[25,126,79],{"class":78},[25,128,129],{"class":82}," generate",[25,131,132],{"class":82}," component",[25,134,135],{"class":82}," users\n",[11,137,138,141],{},[48,139],{"alt":50,"src":140},"\u002Fimg\u002Fcode_-_insiders_2019-09-17_21-07-41.png","\nNext, we can generate lazy loading module\u002Fcomponent using the following command,",[15,143,145],{"className":69,"code":144,"language":71,"meta":20,"style":20},"ng generate module todos --route todos --module app\n",[22,146,147],{"__ignoreMap":20},[25,148,149,151,153,156,159,162,164,167],{"class":27,"line":28},[25,150,79],{"class":78},[25,152,129],{"class":82},[25,154,155],{"class":82}," module",[25,157,158],{"class":82}," todos",[25,160,161],{"class":82}," --route",[25,163,158],{"class":82},[25,165,166],{"class":82}," --module",[25,168,169],{"class":82}," app\n",[11,171,172,175,176,179,180,183,184],{},[48,173],{"alt":50,"src":174},"\u002Fimg\u002Fcode_-_insiders_2019-09-17_21-08-01.png","\nNow, let's add some content to ",[22,177,178],{},"app\u002Fusers\u002Fusers.component.html"," and ",[22,181,182],{},"app\u002Ftodos\u002Ftodos.component.html"," template.\nSo, paste this code inside the ",[22,185,182],{},[15,187,189],{"className":17,"code":188,"language":19,"meta":20,"style":20},"\u003Cdiv>\n  \u003Ch2>Users Component\u003C\u002Fh2>\n  \u003Cp>\n    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti sequi\n    facere, quo impedit assumenda debitis, distinctio id dolorem sed, fuga earum\n    culpa. Animi architecto facere perspiciatis eum hic mollitia! Quam?\n  \u003C\u002Fp>\n  \u003Cul>\n    \u003Cli>one\u003C\u002Fli>\n    \u003Cli>two\u003C\u002Fli>\n    \u003Cli>three\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n",[22,190,191,200,223,232,238,244,250,260,270,290,308,326,335],{"__ignoreMap":20},[25,192,193,195,198],{"class":27,"line":28},[25,194,32],{"class":31},[25,196,197],{"class":35},"div",[25,199,44],{"class":31},[25,201,203,206,209,212,216,219,221],{"class":27,"line":202},2,[25,204,205],{"class":31},"  \u003C",[25,207,208],{"class":35},"h2",[25,210,211],{"class":31},">",[25,213,215],{"class":214},"sTEyZ","Users Component",[25,217,218],{"class":31},"\u003C\u002F",[25,220,208],{"class":35},[25,222,44],{"class":31},[25,224,226,228,230],{"class":27,"line":225},3,[25,227,205],{"class":31},[25,229,11],{"class":35},[25,231,44],{"class":31},[25,233,235],{"class":27,"line":234},4,[25,236,237],{"class":214},"    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti sequi\n",[25,239,241],{"class":27,"line":240},5,[25,242,243],{"class":214},"    facere, quo impedit assumenda debitis, distinctio id dolorem sed, fuga earum\n",[25,245,247],{"class":27,"line":246},6,[25,248,249],{"class":214},"    culpa. Animi architecto facere perspiciatis eum hic mollitia! Quam?\n",[25,251,253,256,258],{"class":27,"line":252},7,[25,254,255],{"class":31},"  \u003C\u002F",[25,257,11],{"class":35},[25,259,44],{"class":31},[25,261,263,265,268],{"class":27,"line":262},8,[25,264,205],{"class":31},[25,266,267],{"class":35},"ul",[25,269,44],{"class":31},[25,271,273,276,279,281,284,286,288],{"class":27,"line":272},9,[25,274,275],{"class":31},"    \u003C",[25,277,278],{"class":35},"li",[25,280,211],{"class":31},[25,282,283],{"class":214},"one",[25,285,218],{"class":31},[25,287,278],{"class":35},[25,289,44],{"class":31},[25,291,293,295,297,299,302,304,306],{"class":27,"line":292},10,[25,294,275],{"class":31},[25,296,278],{"class":35},[25,298,211],{"class":31},[25,300,301],{"class":214},"two",[25,303,218],{"class":31},[25,305,278],{"class":35},[25,307,44],{"class":31},[25,309,311,313,315,317,320,322,324],{"class":27,"line":310},11,[25,312,275],{"class":31},[25,314,278],{"class":35},[25,316,211],{"class":31},[25,318,319],{"class":214},"three",[25,321,218],{"class":31},[25,323,278],{"class":35},[25,325,44],{"class":31},[25,327,329,331,333],{"class":27,"line":328},12,[25,330,255],{"class":31},[25,332,267],{"class":35},[25,334,44],{"class":31},[25,336,338,340,342],{"class":27,"line":337},13,[25,339,218],{"class":31},[25,341,197],{"class":35},[25,343,44],{"class":31},[11,345,346,347],{},"and, let's add the following inside ",[22,348,182],{},[15,350,352],{"className":17,"code":351,"language":19,"meta":20,"style":20},"\u003Cdiv>\n  \u003Ch2>Todos Component\u003C\u002Fh2>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae enim libero\n    eveniet voluptate molestiae earum labore corporis nobis non pariatur modi\n    tempore ad, nulla accusamus quibusdam? Ipsum quia in dolore.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae enim libero\n    eveniet voluptate molestiae earum labore corporis nobis non pariatur modi\n    tempore ad, nulla accusamus quibusdam? Ipsum quia in dolore.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae enim libero\n    eveniet voluptate molestiae earum labore corporis nobis non pariatur modi\n    tempore ad, nulla accusamus quibusdam? Ipsum quia in dolore.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n",[22,353,354,362,379,387,392,397,402,410,418,422,426,430,438,446,451,456,461,470],{"__ignoreMap":20},[25,355,356,358,360],{"class":27,"line":28},[25,357,32],{"class":31},[25,359,197],{"class":35},[25,361,44],{"class":31},[25,363,364,366,368,370,373,375,377],{"class":27,"line":202},[25,365,205],{"class":31},[25,367,208],{"class":35},[25,369,211],{"class":31},[25,371,372],{"class":214},"Todos Component",[25,374,218],{"class":31},[25,376,208],{"class":35},[25,378,44],{"class":31},[25,380,381,383,385],{"class":27,"line":225},[25,382,205],{"class":31},[25,384,11],{"class":35},[25,386,44],{"class":31},[25,388,389],{"class":27,"line":234},[25,390,391],{"class":214},"    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae enim libero\n",[25,393,394],{"class":27,"line":240},[25,395,396],{"class":214},"    eveniet voluptate molestiae earum labore corporis nobis non pariatur modi\n",[25,398,399],{"class":27,"line":246},[25,400,401],{"class":214},"    tempore ad, nulla accusamus quibusdam? Ipsum quia in dolore.\n",[25,403,404,406,408],{"class":27,"line":252},[25,405,255],{"class":31},[25,407,11],{"class":35},[25,409,44],{"class":31},[25,411,412,414,416],{"class":27,"line":262},[25,413,205],{"class":31},[25,415,11],{"class":35},[25,417,44],{"class":31},[25,419,420],{"class":27,"line":272},[25,421,391],{"class":214},[25,423,424],{"class":27,"line":292},[25,425,396],{"class":214},[25,427,428],{"class":27,"line":310},[25,429,401],{"class":214},[25,431,432,434,436],{"class":27,"line":328},[25,433,255],{"class":31},[25,435,11],{"class":35},[25,437,44],{"class":31},[25,439,440,442,444],{"class":27,"line":337},[25,441,205],{"class":31},[25,443,11],{"class":35},[25,445,44],{"class":31},[25,447,449],{"class":27,"line":448},14,[25,450,391],{"class":214},[25,452,454],{"class":27,"line":453},15,[25,455,396],{"class":214},[25,457,459],{"class":27,"line":458},16,[25,460,401],{"class":214},[25,462,464,466,468],{"class":27,"line":463},17,[25,465,255],{"class":31},[25,467,11],{"class":35},[25,469,44],{"class":31},[25,471,473,475,477],{"class":27,"line":472},18,[25,474,218],{"class":31},[25,476,197],{"class":35},[25,478,44],{"class":31},[11,480,481],{},"Now, once this is done, we can go ahead and generate the static site or prerender our application during the build time using the following commands,",[267,483,484,490,496,502],{},[278,485,486,487],{},"First, let's add Angular Universal to our project ",[22,488,489],{},"ng generate universal --client-project ng-static",[278,491,492,493],{},"Then we can build the application using ",[22,494,495],{},"ng build",[278,497,498,499],{},"Then we can run the server using ",[22,500,501],{},"ng run ng-static:server",[278,503,504,505,512],{},"At last we can use a package called ",[506,507,511],"a",{"href":508,"rel":509},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fangular-prerender",[510],"nofollow","angular prerender",".",[11,514,515,516,519],{},"We can install ",[506,517,511],{"href":508,"rel":518},[510]," as a dev dependency in our application or we can use it using npx.",[11,521,522],{},"Let's use it with npx, so we can run the following,",[15,524,526],{"className":69,"code":525,"language":71,"meta":20,"style":20},"npx angular-prerender\n",[22,527,528],{"__ignoreMap":20},[25,529,530,533],{"class":27,"line":28},[25,531,532],{"class":78},"npx",[25,534,535],{"class":82}," angular-prerender\n",[11,537,538,539,542,543,179,546,549,550,553],{},"Once you run this, inside the ",[22,540,541],{},"dist\u002Fng-staic"," you'll see the routes folders ",[22,544,545],{},"todos",[22,547,548],{},"users"," in our case and If you open the ",[22,551,552],{},"index.html"," there, you can entire content of the template there.",[11,555,556,559,562,563,566],{},[48,557],{"alt":50,"src":558},"\u002Fimg\u002Fcode_-_insiders_2019-09-17_21-26-17.png",[48,560],{"alt":50,"src":561},"\u002Fimg\u002Fcode_-_insiders_2019-09-17_21-27-58.png","\nSo, once you deploy the ",[22,564,565],{},"dist\u002Fng-static"," folder to any static host, search engines will be able to crawl through the content now.",[568,569,570],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":20,"searchDepth":202,"depth":202,"links":572},[],"2019-09-21","In this article we will see how we can create a Static Site with Angular or Prerender Angular Application","md","\u002Fimg\u002Fangular-static-site.jpg",{"type":578},"post",true,"\u002Fblog\u002Fcreating-a-static-site-with-angular",{"title":5,"description":574},"blog\u002Fcreating-a-static-site-with-angular",[584],"Web Development","IVvZHukv-Wz6_G4mi3bOAf8CazYJinSKKD12UlWwWrU",[587,592],{"title":588,"path":589,"stem":590,"description":591,"children":-1},"CINNABAR – A WORDPRESS THEME FRAMEWORK BASED ON BOOTSTRAP 3","\u002Fblog\u002Fcinnabar-wordpress-theme-framework-based-bootstrap-3-284","blog\u002Fcinnabar-wordpress-theme-framework-based-bootstrap-3-284","In this article we will take a look at the new wordpress theme that I created and is open source",{"title":593,"path":594,"stem":595,"description":596,"children":-1},"Creating Figma Logo with TailwindCSS","\u002Fblog\u002Fcreating-figma-logo-with-tailwindcss","blog\u002Fcreating-figma-logo-with-tailwindcss","Step-by-step guide to recreating the Figma logo using only TailwindCSS utility classes.",1775568346555]