SvelteKit with Notion CMS

Original: https://codingcat.dev/podcast/sveltekit-with-notion-cms

▶ Watch on YouTube & Subscribe to CodingCat.dev

Introduction and Technical Setup

• New Streaming Setup: The live coding session is conducted through Streamyard with hosts adjusting to a new streaming setup. Brittany is teaching Alex about SvelteKit.
• Initial Project Setup: Steps through initializing a new SvelteKit project using npm init svelte@next and discusses the choices such as TypeScript, ESLint, Prettier, and Playwright.

SvelteKit Overview

• Project Structure: Overview of SvelteKit's project structure, including the significance of folders like source and routes, and comparison to similar directories in other frameworks like Next.js.
• Basic Routing: Introduction to routing in SvelteKit, demonstrating how to create routes and nested layouts by setting up a basic skeleton project and the initial routes.

Fetching Data with Notion API

• API Setup: Illustration of integrating SvelteKit with Notion's API, including the installation and configuration of required packages.
• Server-side Fetching: Walkthrough of creating an endpoint in SvelteKit to fetch data from the Notion API server-side and passing this data as props to Svelte components.

Handling Environment Variables

• Setup and Pitfalls: Discussion on setting up environment variables to securely handle API keys using dotenv. Explanation of how it integrates within the server-side code.
• Do's and Don'ts: Highlight the common mistakes and troubleshooting steps for environments in SvelteKit, such as correctly naming the .env file.

Rendering and Styling Content

• Data Display: Techniques to display fetched data on the frontend, including setting up the initial layout and styling within the Svelte components.
• Conditional Rendering and Loops: Demonstration of using Svelte's {#each} directive for loops and handling conditional rendering based on fetched data.

Markdown and Rich Media Content

• Markdown Rendering: Steps to convert Notion pages to Markdown using specific packages and discussing the possibility of rendering Markdown in Svelte.
• Inline HTML Integration: Handling HTML content rendered from Notion data and incorporating it into Svelte components to preserve rich media formats like embedded YouTube videos.

Final Integration and Summary

• Dynamic Routing: Setting up dynamic routes in SvelteKit to handle nested routes and fetching individual items based on slugs.
• Live Debugging and Adjustments: Addressing real-time bugs and adjusting code, with community input and troubleshooting on concepts like nested routes and API fetching.

Video Chapters & Timestamps

Jump directly to any segment of SvelteKit with Notion CMS on YouTube using the timestamped chapters below:

• 00:00: Introduction
• 00:00: First Live Coding
• 00:00: First Things First
• 00:00: Project Setup
• 00:00: SvelteKit Explain
• 00:00: Dynamic Routing
• 00:00: Fetching Data
• 00:00: Environment Variables
• 00:00: Listing Page
• 00:00: Page Content
• 00:00: Conclusion

Resources, Links & Official Documentation

• *Watch on YouTube: *SvelteKit with Notion CMS Full Video (plus Subscribe to CodingCat.dev)
• Brittney Postma (Guest) Guest Profile & Episodes on CodingCat.dev
• Brittney Postma (Guest) on GitHub
• Svelte & SvelteKit Documentation: Runes, compiler internals, and full-stack SvelteKit routing

Related CodingCat.dev Tutorials & Podcast Episodes

• SvelteKit with Notion CMS and Cloudinary: Tamas joins us to add Daisy UI and Cloudinary to our simple SvelteKit site.
• Simplyfing SvelteKit View Transitions with Paolo Ricciuti: sveltekit-view-transitions offers a straightforward approach for implementing these transitions without complexity, aiming to enhance the user interface with sm...
• Slicing Up SvelteKit with Prismic’s New Slice Machine: Sam joins the podcast to talk about his journey to Prismic and to give an in depth look at Slice Machine.

Frequently Asked Questions (FAQ)

What are the main takeaways from SvelteKit with Notion CMS?

We start to build CodingCat.dev by using Notion as our CMS. SvelteKit from Notion: Discover how to set up SvelteKit with a Notion backend in this engaging live coding session. We cover initial setup, dynamic routing, and fetching data. Join us! https://codingcat.dev/podcast/sveltekit-with-notion-cms 00:00 Introduction

00:28 First Live Coding

01:39 First Things First

02:48 Projec Throughout this podcast, Brittney Postma (Guest) breaks down real-world implementation details for Svelte so developers can apply these patterns directly in production.

How do you implement Svelte best practices in production?

When adopting Svelte in a production stack, start by validating your configuration against the Svelte & SvelteKit Documentation (Runes, compiler internals, and full-stack SvelteKit routing). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

Where can I watch the full SvelteKit with Notion CMS walkthrough and find related code resources?

You can watch the complete video session for SvelteKit with Notion CMS on the CodingCat.dev YouTube channel. For a deeper dive into Svelte, check out our related guide: SvelteKit with Notion CMS and Cloudinary.