Have you ever tried viewing the source code of your application in angular? The only thing you will notice is <app-root></app-root>. This task of pre-rendering can be done easily by Scully. In this blog, I will guide how to pre-render each page of HTML content on the browser. Let us now understand what Scully is and how to use it for pre-rendering your application.
What is Scully?
Scully is a static site generator for Angular. A static site generator creates static HTML pages from your templates. In a static site, we do not make any API calls for data. Instead, we put all the data on the pages. For example portfolios, blogs, etc. Also, it is not just a static site generator but also a Jamstack tool for Angular. You must be wondering what is Jamstack? So Jamstack is an architecture that is used for making the web faster and more secure. Let us now come back to Scully and check some of the requirements for using it in your application.
- It supports Angular v9.x.x and v10.x.x or higher.
- Node.js version 10 or higher.
- Chromium (your Operating System, as well as its administrator rights must allow its installation and execution).
Apart from all these, your application must be having router installed because Scully depends on the router module of your application.
How does Scully work?
We define routes for our application and Scully goes through the list of that routes and creates an index.html for each of your routes. If you have 100 routes in the application, then 100 index.html will be created.
To understand it let us use it in a simple project. In this project, I have defined two components and two links are there. By clicking on them some text appears. Here is my application:
And here is how the page source looks before using Scully:
Follow these steps:
- Add scully into your project with the given command
ng add @scullyio/init
After successfully running this command you will see a new file named as scully.<projectName>.config.ts
You will need to modify this file in order to cover all your dynamic routes for your application.
- Now you need to build your angular application. This will create a dist folder.
After this a dist folder will be created.
- Now you ready to run the scully with this command
npm run scully
This will create index.html for each of your routes. You can check this is the dist/static folder.
- Now, finally we can run the application with this command
npm run scully:serve
This command will run two servers. One hosting results of ng build and the second hosting the result of scully build.
Pros and Cons of Scully
- The fastest initial load possible. Your app loads instantly on any device.This is because you are pre-rendering your code to a static format so there are no long loading times.
- Best SEO performance.
- It allows you to create super-fast user experiences.
- Your code is not secure because you can view the source code by checking the page source.
So we had a look at how Scully uses the routes in our application to generate pre-rendered HTML files. We also understood how it enables better performance for users and also gives better SEO performance. To know more about its process you can click here. So, if you are planning to convert your application into a static site in Angular, then this is the best option.