SSG with Angular, creating a blog with scully.io

This is a presentation I hold at Angular Summit '22

It explains basic Web Rendering techniques, focuses on SSG, Scully and introduces an open-source example project:
https://github.com/marcellkiss/scully-example

More about me:
https://marcell.tech

Transcript

1. Marcell Kiss, 2022 Creating a blog with Angular? Are you crazy? @marcelltech
2. Who am I? Marcell Kiss, MSc 
 Senior Software Engineer @marcelltech @marcellkiss @marcellkiss marcell.tech Contractor #EnterpriseArchitecture Organizer of Angular Hungary since 2015
3. Overview @marcelltech Example Web Rendering
4. Web Rendering CSR - Client-Side Rendering SSR - Server-Side Rendering SSG - Static Site Generation @marcelltech
5. CSR - Client-Side Rendering @marcelltech Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀
6. CSR - Client-Side Rendering @marcelltech Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀
7. @marcelltech Server Browser somesite.com Include main.js main.js 👀 SSR - Server-Side Rendering index.html [with content!] ⚙
8. @marcelltech SSR - Disadvantages • Multiple server requests • App server is involved • Higher latency
9. SSG - Static Site Generation @marcelltech Server Browser somesite.com index.html [with content!] Include main.js main.js 👀
10. CSR - Build & Deploy @marcelltech Your Angular App Index.html /home /impressum /user/:id
11. SSG - Build & Deploy @marcelltech Your Angular App Index 
 .html /home /impressum /user/:id Impressum .html ?
12. @marcelltech
13. @marcelltech
14. @marcelltech
15. jamstack.org @marcelltech The future is highly distributed - jamstack.org
16. What is Scully.io? @marcelltech
17. Example Repo marcellkiss/scully-example https://github.com/marcellkiss/scully-example Try it on Vercel! @marcelltech
18. Getting started with scully.io @marcelltech ng add @scullyio/init import { ScullyConfig } from '@scullyio/scully'; /** this loads the default render plugin, remove when switching to something else. */ import '@scullyio/scully-plugin-puppeteer' export const config: ScullyConfig = { projectRoot: "./src", projectName: "scully-example", // add spsModulePath when using de Scully Platform Server, outDir: './dist/static', routes: { } }; scully.scully-example.con f ig.ts
19. Scully - Build Process @marcelltech ng build dist/ scully-example/
20. Scully - Build Process @marcelltech ng build dist/ scully-example/ npx scully static/
21. Scully - serve @marcelltech npx scully serve
22. Creating a blog @marcelltech ng generate @scullyio/init:blog • Generates a blog folder with a sample markdown f ile • Adds the `/blog/:slug` route to the scully con f ig f ile • Adds a lazy loaded blog module to the project • Adds a blog component 
 with a <scully-content> tag inside it
23. Markdown blog post @marcelltech
24. Adding a new post @marcelltech ng generate @scullyio/init:post —name="New post" • run npx scully • Unpublished posts get a random slug 
 eg.: http://localhost:1668/blog/___UNPUBLISHED___l0yxualt_zz806SgS9ergj • Check the src/assets/scully-routes.json f ile time to time 
 npx scully —scanRoutes can help to recognize changed routes • ScullyRoutesService helps you to get the list of available pages during runtime
25. @marcelltech Do we know the possible values? dynamic-page/:id YES NO Pre-render these sites Fallback to CSR
26. @marcelltech Pre-rendering dynamic URLs scully.scully-example.con f ig.ts scully/plugins/plugin.ts
27. Before jumping into it @marcelltech • Build process slows down • Build process can be problematic • Testing is not easy • Be prepared for writing plugins
28. Example Repo marcellkiss/scully-example https://github.com/marcellkiss/scully-example Try it on Vercel! @marcelltech
29. Questions and Answers Thanks for listening! marcell.tech @marcelltech @marcellkiss @marcellkiss
30. Resources -[Docs] Scully.io 
 https://scully.io/ 
 -[Article] Rendering on the Web 
 https://developers.google.com/web/updates/2019/02/rendering-on-the-web -[Docs] Jamstack 
 https://jamstack.org/ -[Article] Angular Universal in Practice 
 https://blog.angular-university.io/angular-2-universal-meet-the-internet-of-the-future-seo-friendly-single-page-web-apps/ -[Article] Is Angular good for SEO? 
 https://proxify.io/articles/is-angular-good-for-seo - [Repository] Scully Example 
 https://github.com/marcellkiss/scully-example 
 
 @marcelltech