SSG with Angular, creating a blog with scully.io

Slide 1

Slide 1 text

Marcell Kiss, 2022 Creating a blog with Angular? Are you crazy? @marcelltech

Slide 2

Slide 2 text

Who am I? Marcell Kiss, MSc   Senior Software Engineer @marcelltech @marcellkiss @marcellkiss marcell.tech Contractor #EnterpriseArchitecture Organizer of Angular Hungary since 2015

Slide 3

Slide 3 text

Overview @marcelltech Example Web Rendering

Slide 4

Slide 4 text

Web Rendering CSR - Client-Side Rendering SSR - Server-Side Rendering SSG - Static Site Generation @marcelltech

Slide 5

Slide 5 text

CSR - Client-Side Rendering @marcelltech Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀

Slide 6

Slide 6 text

CSR - Client-Side Rendering @marcelltech Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀

Slide 7

Slide 7 text

@marcelltech Server Browser somesite.com Include main.js main.js 👀 SSR - Server-Side Rendering index.html [with content!] ⚙

Slide 8

Slide 8 text

@marcelltech SSR - Disadvantages • Multiple server requests • App server is involved • Higher latency

Slide 9

Slide 9 text

SSG - Static Site Generation @marcelltech Server Browser somesite.com index.html [with content!] Include main.js main.js 👀

Slide 10

Slide 10 text

CSR - Build & Deploy @marcelltech Your Angular App Index.html /home /impressum /user/:id

Slide 11

Slide 11 text

SSG - Build & Deploy @marcelltech Your Angular App Index   .html /home /impressum /user/:id Impressum .html ?

Slide 12

Slide 12 text

@marcelltech

Slide 13

Slide 13 text

@marcelltech

Slide 14

Slide 14 text

@marcelltech

Slide 15

Slide 15 text

jamstack.org @marcelltech The future is highly distributed - jamstack.org

Slide 16

Slide 16 text

What is Scully.io? @marcelltech

Slide 17

Slide 17 text

Example Repo marcellkiss/scully-example https://github.com/marcellkiss/scully-example Try it on Vercel! @marcelltech

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Scully - Build Process @marcelltech ng build dist/ scully-example/

Slide 20

Slide 20 text

Scully - Build Process @marcelltech ng build dist/ scully-example/ npx scully static/

Slide 21

Slide 21 text

Scully - serve @marcelltech npx scully serve

Slide 22

Slide 22 text

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 tag inside it

Slide 23

Slide 23 text

Markdown blog post @marcelltech

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@marcelltech Do we know the possible values? dynamic-page/:id YES NO Pre-render these sites Fallback to CSR

Slide 26

Slide 26 text

@marcelltech Pre-rendering dynamic URLs scully.scully-example.con f ig.ts scully/plugins/plugin.ts

Slide 27

Slide 27 text

Before jumping into it @marcelltech • Build process slows down • Build process can be problematic • Testing is not easy • Be prepared for writing plugins

Slide 28

Slide 28 text

Example Repo marcellkiss/scully-example https://github.com/marcellkiss/scully-example Try it on Vercel! @marcelltech

Slide 29

Slide 29 text

Questions and Answers Thanks for listening! marcell.tech @marcelltech @marcellkiss @marcellkiss

Slide 30

Slide 30 text

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