This presentation will help you understand what is JAMstack and its values and how SSGs help to achieve JAMstack goals. We will dive deep into Scully, the first Static Site Generator for Angular, and how we can integrate Scully into our Angular projects.

1. JAMstack
your Angular
applications with
Scully

2. Steffi Keran Rani
Lead Engineer @
With Angular since 2018
SteffiKeranJ
steffi-keran-rani-j
@steffikeranj
2
Hi there!

3. JAMstack SSG Scully Demo Summary
Agenda
3

4. What is JAMstack?
4

5. Present Day Scenario
5
Website Server Caching server
Caching server
Database
Program
CDN
Cloud Provisioning Cache Invalidation
Versioning
Finger printing
Monitoring
Security updates
Release engineering
Replication
Migration

6. Present Day Scenario - Concerns
6
1.Site Speed
2.Reliability
3.Security

7. Is there a solution to this?
7

8. Solutions
8
1.Decouple building from hosting
2.Decouple frontend from backend
3.APIs rather than databases
4.Generate the markup and decorate it with JavaScript

9. JavaScript, API and Markup
9
Website
CDN
“Generate Markups, decorate with JavaScript and consume APIs”
- Matt Biilmann
API

10. 10
“Deliver safe, fast, and dynamic sites without relying on web servers!”
https://jamstack.org

11. JAMstack values
11
1.Pre-render all views
2.Cache maximum API calls
3.Supply them from CDN

12. A JAMstack site is a
dynamically generated static site!
12

13. 13
Static Site Generators (SSG)
▪ SSG apply data and content to templates, and
generate a view of a page which can be served to the
visitors of a site.
▪ Instead of waiting until a page is requested and
then generating its view on demand each time, a
SSG does this in advance so that the view is ready
to serve ahead of time, for every possible view of a
site at build time.
Image: netlify.com

14. Static Site Generators (SSG)
14

15. Oh c’mon!
But does Angular have
a Static Site
Generator?
15

16. 16
Yes!!!
Created by

17. 17
1. First Static Site Generator for Angular
2. ~ 0 effort in configuration
3. Support for Markdown
4. Automatic route discovery:
• Static routes (using guess-parser)
• Dynamic routes (Scully/ custom plugins)
5. Support for plugins
Scully – An Overview

18. Caching
TransferState – for making calls during
the build, caching and shipping them to
the CDN along with HTML/JS/CSS
Pre-rendering
Plugins play a major role in
• Route Discovery
• Pre-rendering
CDN
Puts your site closer to the user, further
increasing the performance
18

19. Route Discovery in
19

20. /
/home
/crew
/dragons
Route Discovery in Scully – Static Routes
20
1. Uses Angular routing config
2. guess parser library extracts
the routes
Examples:
https://github.com/guess-js/guess

21. 21
Route Discovery in Scully – Dynamic Routes
1. Uses Scully’s route config
2. Auto-extracted / expanded
using built-in & custom plugins
Examples:
https://scully.io/docs/Reference/plugins/overview/
/crew/123
/crew/456
/crew/789

22. npm run scully -- --scanRoutes
22
/assets/scully-routes.json

23. Scully in action
CLI Scully Puppeteer Project
1. ng build –prod
2. npx scully
DONE
3. Generate list of routes
4. Starts server for prod build
5. Starts puppeteer instances 6. Load specific route
/crew/1 7. App loads
1st navigation
done
8. Zone.js stable
9. AngularReady
10. Serialize and save html files
to /crew/1/index.html
… For every route

24. Scully – The Process
24
1. Traverse, read the source of the application to find all routes.
2. Merge in extraRoutes, where we specify routes we know, but can't automatically traverse
3. We now have a list of unhandled routes
4. Enrich/expand the found unhandled routes routes with router-plugins.
5. Process/change the resulting handled routes list with routeProcess plugins.
6. Write out the scully.routes.json files.
7. Trigger routeDiscoveryDone with results from 5
8. Trigger the render plugins for each route
9.Trigger allDone plugins

25. 25
Scully in action
Response page crew/1/index.html
Request page crew/1
Browser Static Server

26. Angular Static Site Development
26
Create an
Angular
project
Add Scully to
your Angular
project
Inject Scully
Route Service
for Dynamic
Routes
Host

27. SETUP
PREREQUISITES:
1. Angular versions: v9.x.x or higher
2. Node.js: 12 or higher
3. Route-enabled
27
INSTALLATION
LOCAL DEVELOPMENT
PRODUCTION

28. - Configuration
28
ScullyLibModule

29. Building for Production
29
ng build –prod && npm run scully -- --scanRoutes
1 2

30. Hosting Options
30
Azure Static Web Apps

31. Hosting on Firebase
31
https://angular-scully-b1ab1.web.app/

32. Performance Stats – Comparison
32
Courtesy: Lighthouse reports

33. Notes
33
Scully is a very young tool, which is evolving at a phenomenal speed.
The best part is the plugin ecosystem that Scully provides.
Generating thousands of pages in each build will be like going overboard. In this case, try considering
Universal.

34. 34
REFERENCE
 https://scully.io
 https://github.com/scullyio/scully
 https://jamstack.org
 https://www.ample.co/blog/from-static-to-jamstack
 https://samvloeberghs.be
 https://www.netlify.com/blog
 https://www.youtube.com/watch?v=Sh37rIUL-d4
 https://academind.com/tutorials/scully-introduction
 https://docs.microsoft.com/en-us/azure/static-web-
apps
 https://www.youtube.com/watch?v=XJ1WzPKPSQo

35. Thank you !