Svelte SPA routing: Routify tutorial
How to use Routify with Svelte for client-side (SPA) routing. Source code: https://bitbucket.org/spinspire/svelte-routify-demo/
Index/TOC:
00:00 What's the problem: overview of client-side routing for SPA's
01:28 Intro: overview of Routify
02:20 Demo of the end result application
03:55 Start coding: project setup
05:40 Add Routify to project
09:10 Create "src/pages" and "index.svelte"
10:00 Add "Router" and "routes" to App.svelte
11:50 There's a bug.
12:15 Found the bug and fixed it.
12:55 It's working! Explanation of how it works.
14:10 Add a second page: about.svelte
14:35 Another bug fix: "sirv public" needs "--single" option to run in SPA mode
15:30 Create a nav bar: _layout.svelte and Nav.svelte
21:00 Generate links using Routify's "url" and "isActive" helpers
23:09 Add 404 page with _fallback.svelte
25:50 Add "blog" page with "src/pages/blog/index.svelte"
27:00 Create blog article links
30:00 Create blog/[slug].svelte for article view page
32:10 Create [type]/[id]/delete.svelte
37:20 Switching from Routify CLI to Routify Rollup plugin
42:20 Code splitting configuration
46:45 Conclusion and summary
For questions, post a comment. For business inquiries: email info@spinsprie.com.
Видео Svelte SPA routing: Routify tutorial канала SpinSpire
Index/TOC:
00:00 What's the problem: overview of client-side routing for SPA's
01:28 Intro: overview of Routify
02:20 Demo of the end result application
03:55 Start coding: project setup
05:40 Add Routify to project
09:10 Create "src/pages" and "index.svelte"
10:00 Add "Router" and "routes" to App.svelte
11:50 There's a bug.
12:15 Found the bug and fixed it.
12:55 It's working! Explanation of how it works.
14:10 Add a second page: about.svelte
14:35 Another bug fix: "sirv public" needs "--single" option to run in SPA mode
15:30 Create a nav bar: _layout.svelte and Nav.svelte
21:00 Generate links using Routify's "url" and "isActive" helpers
23:09 Add 404 page with _fallback.svelte
25:50 Add "blog" page with "src/pages/blog/index.svelte"
27:00 Create blog article links
30:00 Create blog/[slug].svelte for article view page
32:10 Create [type]/[id]/delete.svelte
37:20 Switching from Routify CLI to Routify Rollup plugin
42:20 Code splitting configuration
46:45 Conclusion and summary
For questions, post a comment. For business inquiries: email info@spinsprie.com.
Видео Svelte SPA routing: Routify tutorial канала SpinSpire
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Svelte Society Day 2020: Rich Harris: Frequently Asked Questionslive code: Svelte app showing realtime Postgres data changes (GraphQL subscriptions)call non-CORS REST APIs over AJAX with CORS proxy server (includes Svelte+Rollup setup)Drupal "component" module: part 3: using Svelte UI framework/compilerlive coding: Chrome/Firefox extensions and userscripts in SvelteDecoupled (headless) Drupal/GraphQL with Svelte & Sapper frontendDrupal "component" module: part 1: JS apps as Blocksbuild svelte modal dialog from scratchSvelteKit Dynamic Routing TutorialAlessandro Segala: So you want to pick a router?Svelte Society Day 2020: Jakob Rosenberg: Routify PresentationSvelte SPA RouterSvelte 3 Reaction & QuickStart TutorialInsanely fast mobile sites with Svelte, GraphQL and Drupal | Florida DrupalCamp 2020Tim Raderschad: Modern fetch in svelte using storesWhy frontend build tools are getting an overhaulSvelte vs React vs Angular vs VueSvelte live coding & demo at Jacksonville meetupReact Router Tutorial | React For BeginnersSvelte Tutorial for Beginners: Server-side Rendering Component API