Understanding Scully for Angular projects

Introduction

For so many years Angular didn’t have any static site generator. But finally, here is Scully. So, in this blog, we will see what it is actually, how we can add it to our angular project and what its use.

Here we begin!!

What is scully?

It is the best static site generator for Angular projects. It will use your application and will create a static index.html for each of your pages/routes. Each and every index.html will have the content already there, and this will make your application show instantly for the user.

Basically, it is a Jamstack solution for Angular developers.

How does it work?

It analyzes the route structure of your Angular application and uses that to create a list of routes. Then it will go over this list, and generate an index.html for each of them.

Below is the example:

Prerequisitics

Before installing it, please make sure you meet the following requirements:

• Your Angular version should be v8.x.x or v9.x.x
• Node.js version which you are using should be 12 or higher
• Also, Chromium must be installed in your system

 Installing Scully

You can run it by using these commands:

Step 1:

You need to add scully in your project with the help of following command

ng add scullyio/init

This will made all the required changes in your project.

Step 2:

Before running the scully, you need to build your angular project.

ng build --prod

Step 3:

Once your Angular project is built, you can run Scully .

npm run scully

 You can find the generated static files under the ./dist/static folder. It contains all the static pages of your application.

Step 4:

You can run the application with the help of this command.

npm run scully:serve

Advantages

• The fastest initial load possible. Your app loads instantly on any device.
• You don’t have to write your app in any specific way, it does not require any structural changes.
• Your app can work on a much larger number of devices where JavaScript is disabled or not supported.
• It allows you to create super-fast user experiences.
• You have the access to whole application from the single place as you have the config file in each scully project.
• Relying on Google bots executing our JavaScript to finally see the content is not the best way. So, the objective of using it now is to pre-render each route’s HTML content, so bots can instantly see it, without the need of executing any JavaScript.
• It provide the best SEO performance as static site generator analyzes the route structure of our compiled Angular application and generates a static version of each page, which makes static HTML page more interactive.

Disadvantages

• You cannot use it in a performant way at run-time , as for the server- side rendering it would take too long to render and load on the server.

Conclusion

In this blog, we have seen getting started with Scully , how it works, its installation and what is the benefit of using it. To know more about it , click here