The landscape of web development has evolved significantly over the years, with content management systems (CMS) playing a crucial role in how websites are created and managed. In the past, traditional or monolithic CMSs allowed users to build and manage websites without coding, offering a quick start but limited customization options. Today, the emergence of headless CMSs has revolutionized the industry, providing greater flexibility and freedom to developers. This guide explores creating a Gemstack site using SvelteKit and Storyblok, emphasizing the advantages of headless CMSs over traditional systems.
Understanding Headless CMS and Its Benefits
A headless CMS separates the backend from the frontend, allowing developers to manage content without creating the website itself. This decoupling offers numerous benefits, including content reusability, improved performance, scalability, future-proofing, and enhanced security. With a headless CMS like Storyblok, content is managed through an admin interface and delivered via APIs, enabling developers to choose their preferred frontend framework, such as SvelteKit, React, or Vue.
By using Storyblok, developers can structure and manage content efficiently, focusing on what they love most: frontend development. The CMS provides an SDK for easy API integration, facilitating the creation of dynamic and interactive web applications.
Setting Up a SvelteKit Project
To create a Gemstack site with SvelteKit, start by setting up a new SvelteKit project using npm. SvelteKit offers a modern, flexible framework for building frontend applications, allowing developers to focus on creating engaging user experiences. Once the project is initialized, install the necessary packages, including Storyblok's SDK for seamless integration.
Organize the project structure by creating components and routes that reflect the site's architecture. With SvelteKit, you can leverage the routing system to create dynamic pages and layouts, enhancing the site's functionality and navigation.
Integrating Storyblok for Content Management
Storyblok simplifies content management by providing an intuitive interface for creating and editing content. To integrate Storyblok with your SvelteKit project, configure the CMS settings, including preview environments and access tokens. This setup allows you to manage content effortlessly, ensuring that changes are reflected in real-time on the frontend.
With Storyblok, content creators can enjoy a live preview of their changes, enhancing the editing experience. This feature is particularly beneficial for complex pages with multiple components, as it provides a clear overview of the content structure and layout.
Building Dynamic Pages and Components
One of the key advantages of using a headless CMS like Storyblok is the ability to create dynamic pages and components. By leveraging SvelteKit's capabilities, you can build reusable components that enhance the site's interactivity and responsiveness.
Create components for each content type, such as articles, features, and grids, ensuring that they align with the CMS schema. This approach allows for consistent and efficient content rendering, enabling content editors to focus on creating valuable content without worrying about the underlying code.
Deploying the Site as a Static Website
After building and testing the site locally, the next step is deployment. SvelteKit's adapter system allows you to generate a static version of the site, making it easy to deploy to platforms like Netlify, AWS, or GitHub Pages. This static deployment enhances site performance and scalability, ensuring a seamless user experience.
Configure the build settings to generate static HTML files, taking advantage of SvelteKit's pre-rendering capabilities. This setup ensures that the site is optimized for speed and security, providing a robust foundation for future updates and enhancements.
Conclusion
The combination of SvelteKit and Storyblok provides a powerful toolset for developers looking to create modern, dynamic websites. By leveraging the flexibility of a headless CMS and the performance of a static site generator, you can build a site that meets the needs of both developers and content editors. Whether you're creating a simple blog or a complex web application, this approach offers the scalability and efficiency needed to succeed in today's digital landscape.
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.
This workshop has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.
FAQ
SvelteKit integrates with Storyblock through APIs that Storyblock provides. Developers can use SvelteKit to build the frontend of a website, fetching and displaying content managed in Storyblock by making API calls and using SDKs provided by Storyblock for easier integration.
Using a headless CMS like Storyblock offers flexibility in choosing frontend technologies, facilitates content reusability across different platforms, improves performance through efficient content delivery networks, and enhances scalability and security by serving content through APIs.
To deploy a SvelteKit application integrated with Storyblock, developers need to configure the build settings to generate a static site if preferred, set up environment variables for API keys, and potentially use services like Netlify for continuous deployment. Changes in the Storyblock content can trigger rebuilds of the static site through webhooks.
Storyblock supports internationalization by allowing users to create and manage content in multiple languages. Content can be created for different locales, and the CMS can serve the appropriate language version of the content based on the user's preferences or settings.
In SvelteKit, adapters are used to configure how the application is built and deployed. For example, the static adapter can be used to generate a fully static site that can be hosted on any static web hosting service. This is particularly useful for optimizing performance and scalability.
Yes, Storyblock allows customization of content delivery. Users can manage how content is structured and delivered through Storyblock's admin interface and can define custom content types and components to fit their specific project requirements.
Storyblock is a content management system (CMS) used for creating and managing website content. It allows users to manage content through a backend system and integrate this content with various frontend technologies via APIs, making it adaptable for headless CMS architectures.
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.
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.
2. Installing SvelteKit and Integrating Storyblock
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.
3. Creating Sveltekit Boilerplate and Configuring SSL
In this part, we learn how to create the Sveltekit boilerplate from Storyblock and how to configure SSL for localhost. We also create a new space in Storyblock and set up the visual editor configuration. After approving the SSL without a certificate, we can see the actual welcome page of Svelte. Then, we install the necessary packages to work with Storyblock and create a layout file. The layout file contains code for fetching content from the Storyblock Svelte SDK using the useStoryblock API.
4. Connecting Stray Blocker SDK with Space
To connect the Stray Blocker SDK with our space, go to settings and access tokens. Copy the preview token for local machine or preview environments. Create a public token for production. Define the content in Storyblock and create a page in the roots folder to retrieve data from the homepage.
5. Retrieving Data and Setting Up Preprocess
To retrieve data from the homepage in our space, we copy the code and create a plus page. We specify that we want the draft version of the content. The history of work is connected to the UI of history book, providing a live preview of changes. If there are any errors, we need to set up the preprocess correctly and install the necessary packages. To do this, we import v preprocess, set it up in the svelte config, and use it at the same level as kit. We can also use the debug directive of Svelte Kit to view the components on the right side.
6. Creating Components and Styling with TypeWin
To create the components we want in our Storyblock space, we need to create one component per schema in a serial block. We copy and paste the Svelte components we created into a components folder. The components use the Storyblock editable action from the Svelte SDK to open the schema on the right side. We import the components in our layout so that the Storyblock SDK recognizes them. Now, we can see the components in the StreetBlock page without any styling. We can click on the components to view their schema and make real-time changes. We can also add new components and see the changes in real time. Other CMS platforms prefer a form view, but JavaScript allows for an overview of the building process, which is especially useful for complex pages like landing pages. To style the components, we add the Tailwind plugin and preprocess it. We remove the preprocess function and install the preprocessor for Tailwind. This allows us to add the TypeWin plugin and proceed with styling the components.
7. Compiling Components and Troubleshooting
To compile the Svelte and Storyblock component, remove the TypeScript dependency in the future. ThaiWin applies styles and allows for changes in feature order. The Bridge configuration is in the Layout JavaScript file. The StoryBlock unit is initialized in the layout and page, and a common function can be used for initialization. The StoryBlock API is used to retrieve content, and the StoryBlock Bridge is set up in the on-mount function. The Storyboard editor is needed for click behavior and interactivity. For troubleshooting, check the access token and API options. Sharing the screen can help identify and resolve issues.
8. Creating Dynamic Pages and Adding Titles
We will start by doing a recap of what we've done so far. The layout, page, and.js or.swelt files are all part of the framework. The load function prepares data for the Svelte component, which can be executed on the server or client side. The page.weld file focuses on user interaction. In order to create dynamic pages, we need to create a folder with a Slug and move the pages inside it. We can then change the static call to a dynamic one using the params from the routing system. Once the path is combined, we can retrieve the data from the API request. Finally, we need to add the title to the page using the content of the history.
9. Creating Dynamic Pages and Adding Fields to Schema
In this part, we learn how to create dynamic pages in Storyblock CMS and add new fields to the schema. We create pages for About and Blog, and generate URLs for them. We also add a new block to the schema and override the component in the frontend. The images and descriptions are retrieved from the digital asset manager in Storyblock. We can live edit the content and optimize the image URLs using Storyblock's image service.
10. Working with the Image Service
You can customize your images with the image service by adding a slash MS/ to crop them or slash m slash to deliver a WebP image. Adding filters like blur is also possible. Using slash m slash saves bytes and ensures proper image delivery. To resize images without considering the ratio, use a value followed by zero. The image service documentation provides more options and effects.
11. Creating Hero Component and Adding to Layout
Let's create a new component called Hero and add it to our bowl library. We define the fields for the schema, including text, sub-headline, background-image, and layout. We create a heroStyle component and extract the key-value pairs to add classes. We add the slash M slash for proper image resizing. We add the new hero component to the layout and refresh the frontend to see it. We can optimize the loading of the component based on the page. We can see the hero at the top of the homepage and adjust the layout to full width.
12. Using the Straight Blocks CLI and Migrations
In a real project, you would use the Straight Blocks CLI to programmatically create and modify components. You can create a repository on GitHub and generate components automatically. For migrations, the CLI provides commands to change component content. For personal projects, manual creation is also possible. No headaches, it works fine. Migrating is easier programmatically. That's the options we have. Everything working well for your site?
13. Creating a Blog and Defining Content Type
Now we will create a blog to see how a new template can be created in a storyblock. We will define the structure of the page using a content type. We can add fields for the content editor to change the aspect, layout, or theme. We can also organize fields in different tabs for better management. We can optimize the way content editors create articles by selecting a specific content type and defining its fields. This allows for easy creation of new histories, entries, and pages. We can create an article SVELT component in the components folder to represent the article view. The risk test field type allows for rendering HTML content using the SVELTkit SDK.
14. Rendering Rich Text and Showcasing Articles
We are creating a better rendering system that allows you to render different blocks inside the rich text. To render the HTML tags with proper styling, install the Tailwind typography package. The content is delivered by the API as type doc, which has different sections. Calling html.at will render the rich text field type. Configure the typography for a fancier appearance. Create multiple articles to showcase on different pages. Use a card to serve the articles between views.
15. Creating Article Card Component
We create a component called article card in the components folder to render article data in a small way, such as a teaser, title, and image. This component is not a Storyblock component, but a frontend component. It uses the article data to open the article content instead of opening a block. The image, title, and teaser are represented using the image service. The component does not need to be added to the layout as it is used only to represent the content.
16. Creating an Overview of Articles in the Blog
To create an overview of all the articles on the blog, we can create a component called 'all articles' that retrieves the articles from the blog folder. This component uses the 'article card' component to represent the articles in a small way. By defining the structure of the component and restricting the selection of components, we can provide flexibility to content creators while maintaining a well-defined structure. The 'all articles' component can be added to the layout, and the articles can be rendered with their respective images and titles. This allows for a structured representation of the articles while giving content creators the freedom to create and edit the content.
17. Creating Popular Articles Block Component
In the front-end, you can use the hero.svelte component in the components directory and access the headline and background image fields. This approach allows for reusability, especially when working on multiple projects. We have an ultimate tutorial on our website that covers the integration of Storyblock and SvelteKit in detail. If you prefer a slower pace, you can follow the tutorial at your own time. The notion page provides all the necessary resources to get started with Storyblock and SvelteKit.
18. Updating Data and Rendering in Svelte Kit
In Svelte Kit, when changing the structure of the data, such as the order of arrays, you need to notify Svelte to re-render the DOM using the key directive. This is different from frameworks like Next.js or React, where the virtual DOM is used. By using the key attribute, you can ensure that the changes in the data are reflected in the UI. This is also why Svelte is faster than other frameworks. You can easily add new articles and see the live preview. Storyblock allows you to select and resolve relations with any kind of data.
19. Generating a Static Site with SvelteKit
In this part, we learn how to set up SvelteKit to generate a static site instead of a dynamic one. We explore the use of Vite preprocess for loading components and the advantages of using the Layout.js file. We also learn how to import the user story block function and access tokens from the.env file. Additionally, we cover the use of the await import syntax for importing components dynamically. We discuss the adapter static for generating a static HTML file in the build phase and the necessary configuration. Finally, we run npm run build to generate the static website in the build directory.
20. Deploying and Internationalization
Svelkit can automatically render pages based on the endpoints you define. You can use the pre-render option in pluspage.js or pluslayout.js to enable swapping to MP2. There is a way to specify the entries in the configuration, allowing you to define exactly what you want to build. Once the code is ready, it can be deployed as static pages. Netlify can be configured to automatically trigger a new deploy when changes are pushed to GitHub. Internationalization in Storyblock allows you to translate the same structure into multiple languages. You can customize translations field by field and even create different websites for different countries.
21. Exploring Advanced Topics and Conclusion
In the second part of this workshop, we can explore more advanced topics like multilingual support. Next.js and SvelteKit have undergone changes in their structures, but now they are stable and easy to understand. It's important for developers to be familiar with both a good CMS and a good framework to have more job opportunities. Thank you for your time and I hope you enjoyed the session.
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.
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.
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
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
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
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
As a child, the speaker was fascinated with space and finding direction. Svelte is an HTML-first approach to web development that simplifies tasks and offers efficient reactivity. The speaker reflects on Svelte's growth, goals, and design philosophy. Svelte aims to fix broken software and prioritize user focus. The future direction includes error boundaries, better debugging, and AI's role. Building open source software is challenging, and Rust's impact is discussed. The speaker values framework diversity and highlights the advancements and challenges faced by web development.
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Comments