Scully pre-renders each page in your app to plain HTML & CSS. In Angular JAMstack app, you only serve HTML using a CDN without any server-side rendering. This results in faster loading times, and less security problems.
In this post, we will cover the understanding of what Scully (Static Site Generator for Angular) is. we will take a look at how it works and finally we are going to use Scully to build an Angular static website.
JAM stands for JAM stands for JavaScript, APIs and Markdown. These are free types of technologies in web development, which we combine to build web applications. we use JavaScript to build reactive web applications typically we do that by building a rich web application with a framework or library.
Why use Scully.io?
The Jamstack architecture has many benefits, whether you’re building a large e-commerce site, SaaS application or personal blog.
Better performance—no slow server-side calls, content served through CDNs.
Increased security— With server-side processes abstracted into microservice APIs. no server-side operations also means less potential breaches.
Saved development time & cost—no complex infrastructure to build and maintain, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans
Let’s create a first blog post using Scully in Angular JAMstack
Create a new Angular application using the command below.
ng new blogdemo The Angular CLI will prompt you and ask whether you would like to add Angular routing. Say Yes. It willll then ask which stylesheet format you would like to use. Choose SCSS
Add blog module with the below command
ng g m blog --routing Add Post component inside blog module with the below command.
ng g c post Go to the src/app/app-routing.module.ts file and add the following routes:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } How to add Scully to the Angular JAMstack project?
First, check the software requirements:
Angular versions: v8.x.x or higher
Node.js: 10 or higher.
Chromium: IMPORTANT: Scully uses Chromium. Therefore, your Operating System, as well as its administrator rights must allow its installation and execution.
Once the Angular application is created, to add Scully to an existing Angular app you just need to run the command below. The command will add all configuration required to add Scully support.
Now, it’s time to add Scully:
ng add @scullyio/init To add blog support run the below command
ng g @scullyio/init:blog Let’s now build our Angular app running this command:
ng build You’ll get the following output in your terminal:
Now run Scully with the following command:
npm run scully Now you can see your static files in a new dist folder called static inside your application(Angular JAMstack) folder.
Here are the different types of plugins
There are several types of plugins you can create for your Scully app, depending on when in the build pipeline your requirement. a brief explanation of each, pulled directly from Scully’s docs.
Router plugins teach Scully how to get the required data to be pre-render pages from the route-params.
postProcessByHtml plugins are used to transform the rendered HTML. After the Angular application renders, the HTML content is passed to a postProcessByHtml plugin where it can be further modified.
postProcessByDom plugins are used to transform the rendered HTML. After the Angular application renders, the HTML content is passed to a postProcessByDom plugin where it can be further modified.
routeProcess plugins are plugins that can modify the handled route array, before rendering the routes starts
fileHandler plugins are used by the contentFolder plugin during the render process. The contentFolder plugin processes the folders for markdown files or other file type the folders may contain. The render process processes any existing fileHandler plugin for any file extension type.
routeDiscoveryDone plugins are called automatically after all routes have been collected and all router plugins have finished.
allDone plugins are like routeDiscoveryDone plugins, except they are called after Scully finishes executing all its processes.