Site Launch¶
Chumaky team 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.
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.
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 IT provides Angular development services. We can handle project ourselves or be part of a bigger team.