Knoldus Blog Audio
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:
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
You can run it by using these commands:
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.
Before running the scully, you need to build your angular project.
ng build --prod
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.
You can run the application with the help of this command.
npm run scully:serve
- 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.
- 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.
- 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.
- 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.
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