Building with SvelteKit and GraphQL

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

Want to get familiar with the framework that took the top spot for most loved framework on the Stack Overflow developer survey in 2021?

Svelte is a super versatile framework with no virtual dom unlike React and Vue, it's a compiler that builds your projects into vanilla HTML, CSS and JavaScript.

This workshop will go over the basics of setting up with SvelteKit and querying data from a GraphQL API and using that data in SvelteKit to retrieve data for use in the client (browser).

Key learnings:

How to use SvelteKit to build a simple project retrieve data from a GraphQL API and display it in the client. Many of the core concepts of Svelte and SvelteKit will be covered in this workshop.

This workshop has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

SvelteKit is a framework for building Svelte projects, incorporating modern web development best practices like root splitting and file-based routing. It is inspired by Next.js and uses Svelte instead of React or Vue.

Svelte is a component framework that compiles your code to vanilla JavaScript, HTML, and CSS, eliminating the need for a virtual DOM. This results in faster performance and less code.

GraphQL is a query language for APIs that allows you to request exactly the data you need. In SvelteKit, you can integrate GraphQL to fetch data from a backend like GraphCMS, and use it to dynamically populate your Svelte components.

To deploy a SvelteKit project, you can use platforms like Vercel. After building your project with 'npm run build', you can deploy it directly using Vercel's CLI tool, ensuring you configure environment variables as needed.

SvelteKit provides a seamless development experience with features like server-side rendering and static site generation. It's designed for efficiency, offering faster load times and improved performance compared to traditional SPA frameworks.

SvelteKit allows for dynamic page transitions using Svelte's transition features. You can define animations and transitions that trigger on route changes to enhance user experience.

Scott Spence
Scott Spence
170 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Workshop focuses on building a small blog with a GraphQL backend using SvelteKit for the front end. It covers topics such as reactive programming, props, styling, and file-based routing. The workshop also explores setting up a GraphQL client, fetching data from the backend, and rendering components. It discusses dynamic endpoints, error handling, theme switching, and deploying the site with Vercel.
Video transcription and chapters available for users with access.