Developer Insights

Join millions of viewers! Our engineers craft human-written articles solving real-world problems weekly. Enjoy fresh technical content and numerous interviews featuring modern web advancements with industry leaders and open-source authors.

Tags:Svelte

Introduction SvelteKit is an awesome framework for building Server-Side Rendered pages which addresses the performance and search engine optimization issues of single-page JavaScript applications. In contrast to client-side rendering, it generates static content on the server before sending it over to the user's browser. This allows you to spend less time building and more time writing awesome content for your audience. In this tutorial, we are going to use starter.dev to create a SvelteKit application that already provides you with TypeScript, SCSS, and Storybook to allow you to build applications on the go. Prerequisites You will need a development environment running Node.js; this tutorial was tested on Node.js version 16.18.0, and npm version 8.19.2. Development Setup project with SvelteKit and SCSS starter kit 1. Create a new starter kit project ` 2. Select SvelteKit and SCSS 3. Enter the name of the Project. markdown-blog-sveltekit 4. Run cd markdown-blog-sveltekit 5. npm install Let’s get started. Configuring Markdown We’re going to use mdsvex, a markdown preprocessor for Svelte, to render our Markdown posts. ` Then we will add a mdsvex.config.js in our root folder. This file is responsible for mdsvex config options. ` Next, we will import mdsvex in our svelte.config.js. ` Creating posts Each post is a Markdown file and lives in the /src/lib/posts directory we created before. Now let’s create three blog posts: ` ` ` Wonder what the triple dashed lines are? They indicate front matter, which is a way to set metadata for the page. They will be used for storing useful information such as the title, date, author, SEO metadata, etc. We need to get the posts data rendered on the posts page. We will create a function to get and parse this data in src/lib/server/posts.ts. ` There’s a bit going on so let’s break it down. SvelteKit has a feature that any lib in $lib/server can only be imported into server-side code and throws an error: Cannot import $lib/server/data/posts.ts into public-facing code:. To learn more about this feature, visit SvelteKit server-only-modules. Then, we collect all the post modules in the $lib/posts directory: ` Then, we sort the posts by date: ` Posts Page We then need to render all the posts on one page. We will add the src/routes/+page.server.ts file and the src/routes/+page.svelte file ` ` Single Post Page Finally, we need to render the layout of each individual post. We will create a blog/[slug] directory in routes, and create a new src/routes/blog/[slug]/+page.server.ts file. This will check the slug params against the post filename located in our posts directory src/lib/posts and return the post data to the client. ` Then we create src/routes/blog/[slug]/page.ts, which loads the markdown file based on the slug. ` Finally, we render the blog layout with src/routes/blog/[slug]/page.svelte. ` Conclusion Want to start building your blog with SvelteKit today? Check out our https://starter.dev/kits/svelte-kit-scss/ to help you get started! Thanks for reading! If you have any questions or run into any trouble, feel free to reach out on Twitter....

Feb 6, 2023

Ian Sam Mungai

3 mins

Svelte

Building Mobile Applications with Svelte and NativeScript

Have you ever wanted to build a mobile application using a language you already know? In this tutorial, we'll learn how to start building a mobile application using Svelte and NativeScript....

Oct 17, 2022

Ignacio Falk

5 mins

Svelte

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.