Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Rate this content
Bookmark

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

Alba Silvente Fuentes
Alba Silvente Fuentes
Roberto Butti
Roberto Butti
174 min
15 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's workshop focused on creating a website using SvelteKit and Storyblock CMS. It covered topics such as installing SvelteKit and integrating Storyblock, configuring SSL for localhost, connecting Storyblock SDK with a space, retrieving data and setting up preprocess, creating components and styling with Tailwind, compiling components and troubleshooting, creating dynamic pages and adding fields to the schema, working with the image service, and deploying and internationalization. The workshop also touched on advanced topics like multilingual support and emphasized the importance of being familiar with a good CMS and framework for job opportunities.

Available in Español

1. Introduction to Gemstack and Headless CMS

Short description:

Today we are going to see how to create a Gemstack site or in general a website using Svelkit and Storyblock. Storyblock is a CMS that allows you to create and manage content. There are different types of CMS, including traditional CMS and headless CMS. Traditional CMS allows you to build and manage websites without coding, but customization is limited. Headless CMS separates the backend for managing content from the frontend, giving you more flexibility to choose your frontend stack. Today, we will focus on creating and structuring content with Storyblock and building the frontend with Svelkit.

Today we are going to see how to create a Gemstack site or in general a website using Svelkit and Storyblock. Storyblock is a CMS, so is a tool where you can use for creating the content and for managing the content, but on the market, we have different kinds of CMS of content management system. We have traditional CMS and headless CMS, right.

In the past, we have monolithic CMS or traditional CMS and use a software application that allows the user or the content creator to build and manage website without having to code and so it was quite easy. But at the end, you can create the content and you can deliver the content or the website only for the website. Right. And you can start quickly to create a website with a traditional CMS, with a monolithic CMS.

But at the end, if you want to customize something, for example, in the frontend, you have to follow some best practice provided by the CMS, because the CMS provides the Udate template updating system. And so you have to follow their rules. Right. Some examples are, for example, WordPress, Drupal, Sikore, and so on. Right. And typically, if you want to manage the content and you want to deliver also the frontend, you have to deploy the whole system. Right. So even if you are changing a little bit in the CMS, you have to deploy all the CMS. Because, the frontend is as strictly related with the backend. The backend is used for managing the content.

We have on the market a different approach. Another approach is, for example, using a headless CMS. In this case, you have split two parts. One is the backend for just managing the content. And indeed the headless content management system is a software application that allows the user and team to manage the content, not to create the website. So, to manage the content and the process. For example, creating the content, reviewing the content, previewing the content, and deploy the content. So, you have multiple tools for managing the content. And then, on the other side, you can create your own frontend. And obviously, in this case, because the frontend is totally the couple with the content, you have to integrate it, right?

Typically, the headless CMS allow you to create the content and then expose this kind of content, the APIs. So, you, as a frontend developer, you have the freedom to choose your own framework, SvelteKit or Svelte or Next React or Nuxt and Vue. So, you have the freedom to choose your stack, frontend technology stack, and you have to integrate via API. So, what is provided by the headless CMS? Typically, it is an admin interface for managing the content, storing the content, and then providing the content via the API. In this case, today, we are going to create and structure the content with Storyblock, so for the part of the content editors. Then, Storyblock exposes the content delivery API. So, this is out of the box. So, today, as a frontend developer, we can focus on the part that we like and we love, so the frontend part. So, we can choose our frontend framework and today, obviously, Svelkit and we can build our frontend. When we need the frontend and the content, we can integrate the APIs provided by the Storyblock. We will use an SDK provided by Storyblock to integrate in an easy way the APIs. So, we will see what we need from the frontend perspective for integrating with Storyblock. And then we can create our applications in a SvelteKit way, right, and we can deploy also the applications somewhere on the cloud. For example, if we will have time, we are going to deploy on Netlify, and then we can allow the end-user to consume our applications that we are going to build.

I explained a little bit the past traditional CMS and monolithic CMS. Today, we are going to use headless CMS. But why headless is better than traditional CMS? Because you have more flexibility and freedom because you can choose your front-end stack Probably if someone of you come from WordPress, probably you know that you are stuck in with some technology stack and you have to use their templating system, right? So, probably as a front-end developer, you are not happy because you can't use your own tool. Another reason for using the Endless CMS is because of the content reusability, right? We will see how we can structure the content and reuse the component that blocks across the pages. Improved performance because the APIs are provided by a system, in the case of Storyblock, by CloudFront, so by a CDN. And then you can focus on optimizing the performance of the frontend, right? Scalability, because, at the end, the endpoints are managed by the CMS, because, typically, the CMS are a SaaS application, right? So it's deployed on the cloud, so you can scale it up in an easy way. Future-proofing, because sometimes in the past, if you used WordPress, and you want to update WordPress, probably you have to rebuild the website, mainly when you have to switch for the major release. In this case, you can focus mainly on the frontend. And security and maintenance, because, at the end, the interface between the end user and the backend system is limited by the APIs, right? So, in this case, you can consume the API. The APIs are mainly read-only, so you can have more security. And, typically, enterprise CMS like Storyblock are following some certification, some rules, OWASP rules. They are ISO 27001. So, what I'm trying to say is that they are enterprise level, so they are taking care about the security. Someone else checks the security, and so on, right? Good.

So, now we can start. So, a brief introduction, but now we can start. And we prepared some exercises. Probably, we can copy and paste the URL of this document that we already prepared, right Alba? Yes. Okay, then here, you can, if you click, Alba brought a URL in the chat, if you open the chat, and also you open the URL, you will access to some of our exercises. Yes. Please let us know if you have access, to double check with you. But I am pretty sure you will have access. Okay. I will publish it just in case. Just to guide you in this kind of exercise, let me explain a little bit. So now we are going to start to create a SvelteKit project. We can start for creating an empty SvelteKit project. So because, as far as understood, someone of you didn't use SvelteKit, so we can start creating Svelte, for example, a Svelte application. Do you agree? For installing a Svelte application, I think we can use npm. So now I'm going to create a name Total Empty SvelteKit application. As you can see, you can use npm, create Svelte, and then you can use the latest version. Then you can create MyApp. MyApp is the folder where we are going to create the application. If you want, you can use your terminal and then you can follow these kind of instruction to do the same on your local computer. If you have some doubt or you don't know, please raise your hands or write in the chat. Now I try to go slow, just to be sure that you can follow us. With this kind of command, we can create an empty application so we can answer to some question if we want a Svelte demo app, or a skeleton project, or a library project. In this case, skeleton project. Then you can decide to use JavaScript JSDoc, or TypeScript, or normal. For now, we want to see how to create a empty SvelteKit application so we can select JavaScript with JSDoc commands. Then we can add some nice tools. For example, Slink, Prettier, Playwright, and VTest. First two are about linking and formatting. Then we have also the opportunity to install some testing tool, for example, like Playwright and VTest. But for now, personally, typically I choose Prettier. You can choose more than one, but now we can choose only one. Then we can click Enter. Then we can enter into the new directory. The new directory, as you can see, we have some files created by the command, and then we can go via npm install. We are installing the packages.

2. Installing SvelteKit and Integrating Storyblock

Short description:

In this part, we learn how to install SvelteKit and understand its structure. We also explore the integration of Storyblock CMS using the Create Demo tool. The tool creates an empty SvelteKit application with Storyblock integration in place. We can launch the tool using MPX and provide the necessary details. The tool sets up the project with the required dependencies and instructions for the integration. We can then execute the server and see the simple page with content from Storyblock. The package.json file includes additional dependencies for the integration. We have the Story Block component in the routes directory. Now, we can proceed to create a project from scratch with Storyblock configuration and retrieve data from Storyblock.

Obviously, I'm using npm, you can use yarn or pmpm and so on. Then we can add the Git, but for now it's not important. Then we can run npm run dev, so the server. Running the server, we have the web server is running, so now, let me show you. This is the empty page of our SvelteKit application. It means that we are able to install SvelteKit. Why I want to create an empty application just to allow you to understand the structure of a typical empty SvelteTask application. In this case, we are not integrating the CMS, we are just installing the application. Probably you can see, put it, and then also the head. Probably you can see my editor, is correct. Then we can see that we have the directory with the source code, and then we have two files, app.d.ts and app.html. Then we have the routes directory mainly where we have the page. We will see a little bit later about the routing system, but for now, the page that we can see in the browser is in the pluspage.svelte. If we are going to change something here, and then we can switch, for example, to the browser. Too many screens. We can open it. Then as you can see, we have the Hello. It's very easy, but allow us to understand the structure of the empty application.

Now, what if we want to add the Storyblock integration? From the Storyblock side, let me start with using our tool named Create Demo. Create Demo is a tool provided by the Storyblock that allow you to create in the same way that we did before, an empty application with integration already in place with Storyblock. It means that we are going to launch a command. Now, we can see. Then we will see more or less the same structure, but with some integration with Storyblock. Storyblock is your CMS. Exactly, yes. Is the CMS that we are going to use. But today, we'll be mainly focused on the Svelki part. In this case, I can remove, for example, the empty application. Because we created an empty application just for example, and then we can use our created demo tool. To do that, we can do, we can launch more or less in the same way than before. We can use MPX and then we can create the demo. Storyblock create demo with the latter's version. Then we want to create a folder, MyDemo. Then we can define which framework we want to use, and today we are using Svelkit, so we are going to use Svelkit. Then we can define which kind of package manager we want to use, and optional thing, but just to allow you to understand, we are going to define the region, the AWS region that we can use for the CMS, not for the front end, for the CMS, for the part that you want to use and manage In this case, my expectation is to have a MyDemo folder. We does velgit application with some packages added and some instruction added for the integration with the Storyblock. More or less, similar, the same. We can execute the system, the tool asks us the access token because if you want to integrate your front-end with the Storyblock, you need to use an access token. For now, we can skip this part because we will use the full space. Then for this question, we can say, we will see later about the HTTPS and the tool create the demo. Take a while because under the hood, the command that takes a clone, better clone repository from GitHub, where we have already a Svelkit application, an empty Svelkit application with some packages for integrating Svelkit and Storyblock. Then we can jump into the directory and then execute npm install and then executing the server. Now the server is up and running. In this case, we have this kind of message because we have the configuration to serve the page via HTTPS even if we are in local, okay? It will be very important to serve the page via HTTPS because the configuration forстаrts using the 3G phone network. And the cuz we use the network via HTTPS. We will see why in a few minutes. So then we can accept the certificate because we are in local. So the Vita because under the hood we are using a Vita, create the certificate, self-assigned the certificate for running localhost. So it's okay because the machine is. And as you can see, we have already a very simple page. Okay, very simple page with some content. For example, this hello world, feature one, feature two and feature three. And a little spoiler, this kind of content come from Storyblock. So it means that we have already integration. We have already placed an integration. So let me do the same that I did before. So opening the editor and then see something about the structure, right? So in this case, we have more or less the same structure than before. But in this case, in the package.json, we have some dependency more. For example, this is the SDK that we provide for the integration with the Story Block. We have, for example, this plugin that allow us to start the local web server via HTTPS. And some other stuff, for example, because we are using a Tailwind CSS, but it's not mandatory. This is just an example, right. Then, we have in the routes directory, we have more files than before, but at the end, as you can see, we have page.swelt, where we have the Story Block component. Now, we're going to see every piece and commenting this. Just to let you know that via the Create Daemon application, you have the structure already in place, you have a minimal installation and you have some file already in place, but now we understand that we can start from Svelte kit application. We can add the integration with the Storyblock. Now with Alba, you can take the... we are going to create a project from scratch and with the configuration with Storyblock because we want to create the content in Storyblock and we want to create our Svelte kit application that uses and retrieves data from Storyblock. Exactly. Do you have some questions till now? No questions, okay. In general, if you have questions while we are explaining a little bit, you can write a message. Yeah, but now because we do a lot of magic using some commands, right? Now we can do the same thing like how you will be stepping step. So you can understand all the process, right? Exactly. So if you want, we can, you can share the screen Alba, you want or? Yeah, I can. Yeah, let's do that. So I can, okay, share the screen, the desktop too, that's the right one. Okay, perfect. Can you see properly the size of the screen is okay? Okay, nice. Well, yeah, the idea was I landed into the notion page that we have just to let you know that you have here all the resources we will be sharing and also the exercise that we will be making and also the versions that you need to have, for example, for node, because our SDK under the hood is using the fetch native API. So in order to support it, you need to use these kinds of versions or up, but as we are using SpellKit, and it's kind of modern, everyone will use this kind of node version. So I don't think it's a problem anymore. And here you have all the links to everything that we will explain. And also the boiler plate repositories we created for each of the exercises. You'll have a branch for each of the exercises. So in case you get lost, you can always on load the branch and get up to speed really fast. And here you have the repository that we will end up creating with all the exercise by branches, as I told you. And you can go one by one and check if you change something in your code or whatever. And the live version of the project we will be creating. That is just a basic stuff. I mean, nothing fancy, just an article inside a blog and yeah, some kind of text.

Watch more workshops on topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.