Site Launch

Underhood mechanics

Posted by ImgAnatoliy Tishaev on Jul 20, 2018

Chumaky is happy to announce our site launch. To make this fact more interesting from tech side in this blog post I'll describe how it was built & deployed

Layout

Site consists of three areas:

  • Team landing page
  • Individual user resume pages
  • Blog section with set of child pages

For quicker start I took free beautiful templates from Start Bootstrap site and used them for each individual section listed above. Each template was customized to fit chosen framework project structure and to allow dynamic data binding

Framework

Project is built with latest Angular 6 framework. Each section was projected into separate angular module, while content-rich Blog module was made as lazy-loaded

Angular also provides Server Side Rendering (SSR) feature, which allows page rendering be performed on server side and automatic switch to client version when application bundle become loaded by the browser. Nice thing about SSR is that you can programmatically ask Angular to render a page and get rendered html

This brings you a possibility to prerender any page of your application and store it as static html file. Our site content for now is purely static and having it pre-rendered was a good option

Pre-Rendering

Official angular documentation describes SSR feature but says nothing about pre-rendering. It may look strange but I beleive there is a reason for it. First of all, angular was designed for dynamic, data-rich applications. In contrast, pre-rendering makes sense only for pure static data. Other thing is that SSR feature, when implemented for application, actually does pre-rendering job

It provides rendered pages for web crawlers thus enabling SEO support. It also speeds up landing page loading time comparing to usual SPA launch time. So, what's is the reason to use pre-rendering at all? Key thing about it is that:

Pre-rendering is even quicker than SSR, because it doesn't ask angular to render a page. Actually it is the most quick method to serve a page, because server returns static html file

And if you have static content, for example a blog, having it pre-rendered is a nice possibility

You can check this great blog which provides detailed instructions how to implement pre-rendering. This approach was adopted for this site as well. You can check it by reviewing page source code via "Ctrl+U" command. If you will implement it please make sure to read a few comments for that post as well

As advised in mentioned post I used minify package to shrink generated html with following settings

minify(html, { collapseWhitespace: true, minifyCSS: true })

Another key difference between SSR and pre-rendered application is that

Pre-rendering doesn't require to setup web server that will render pages. They are already rendered during application build phase and can be served as any other static resource like image or file

This means that you can use for your site simple hosting like Amazon S3 or Bitbucket/Github pages, where you don't have access to anything except folder where to put your files

Deployment

Obviously, there are a lot of providers with different hosting options available today. But I wanted to mention one with extremely simply deployment procedure

All you need to do is install surge npm package and deploy your site with a single command

surge <directory-with-your-site-content> <domain-name>

It's also ideal tool for development process, because it's free and it supports setup of default fallback page, which is crusial for routed SPA such as angular one

Footnote

Chumaky provides Angular development services. We can handle project ourselves or be part of a bigger team