This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
Harnessing the Power of Threlte - Building Reactive Three.js Scenes in Svelte
Aug 14, 2023
Svelte 4: Unveiled Speed Enhancements and Developer-Centric Features
Jul 26, 2023
Svelte 4 Launch Party Recap
Jun 30, 2023
State of Svelte Wrap-up
Apr 28, 2023
Introducing the All New SvelteKit and SCSS Kit for starter.dev
Explore the power of SvelteKit with This Dot Labs' SvelteKit-SCSS starter kit. Harness SSR, CSR, and Vitest and Storybook all ready and configured for you to use....
Apr 12, 2023
A Deep Dive into SvelteKit Routing with Our Starter.dev GitHub Showcase Example
Introduction SvelteKit is an excellent framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. At the heart of SvelteKit is a filesystem-based router. The routes of your app — i.e. the URL paths that users can access — are defined by the directories in your codebase. In this tutorial, we are going to discuss SvelteKit routing with an awesome SvelteKit GitHub showcase built by This Dot Labs. The showcase is built with the SvelteKit starter kit on starter.dev. We are going to tackle: - Filesystem-based router - +page.svelte - +page.server - +layout.svelte - +layout.server - +error.svelte - Advanced Routing - Rest Parameters - (group) layouts - Matching Below is the current routes folder. 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. Filesystem-based router The src/routes is the root route. You can change src/routes to a different directory by editing the project config. ` Each route directory contains one or more route files, which can be identified by their + prefix. +page.svelte A +page.svelte component defines a page of your app. By default, pages are rendered both on the server (SSR) for the initial request, and in the browser (CSR) for subsequent navigation. In the below example, we see how to render a simple login page component: ` +page.ts Often, a page will need to load some data before it can be rendered. For this, we add a +page.js (or +page.ts, if you're TypeScript-inclined) module that exports a load function. +page.server.ts If your load function can only run on the server— ie, if it needs to fetch data from a database or you need to access private environment variables like API key— then you can rename +page.js to +page.server.js, and change the PageLoad type to PageServerLoad. To pass top user repository data, and user’s gists to the client-rendered page, we do the following: ` The page.svelte gets access to the data by using the data variable which is of type PageServerData. ` +layout.svelte As there are elements that should be visible on every page, such as top-level navigation or a footer. Instead of repeating them in every +page.svelte, we can put them in layouts. The only requirement is that the component includes a for the page content. For example, let's add a nav bar: ` +layout.server.ts Just like +page.server.ts, your +layout.svelte component can get data from a load function in +layout.server.js, and change the type from PageServerLoad type to LayoutServerLoad. ` +error.svelte If an error occurs during load, SvelteKit will render a default error page. You can customize this error page on a per-route basis by adding an +error.svelte file. In the showcase, an error.svelte page has been added for authenticated view in case of an error. ` Advanced Routing Rest Parameters If the number of route segments is unknown, you can use spread operator syntax. This is done to implement Github’s file viewer. ` svelte-kit-scss.starter.dev/thisdot/starter.dev/blob/main/starters/svelte-kit-scss/README.md would result in the following parameters being available to the page: ` (group) layouts By default, the layout hierarchy mirrors the route hierarchy. In some cases, that might not be what you want. In the GitHub showcase, we would like an authenticated user to be able to have access to the navigation bar, error page, and user information. This is done by grouping all the relevant pages which an authenticated user can access. Grouping can also be used to tidy your file tree and ‘group’ similar pages together for easy navigation, and understanding of the project. Matching In the Github showcase, we needed to have a page to show issues and pull requests for a single repo. The route src/routes/(authenticated)/[username]/[repo]/[issues] would match /thisdot/starter.dev-github-showcases/issues or /thisdot/starter.dev-github-showcases/pull-requests but also /thisdot/starter.dev-github-showcases/anything and we don't want that. You can ensure that route parameters are well-formed by adding a matcher— which takes only issues or pull-requests, and returns true if it is valid– to your params directory. ` ` ...and augmenting your routes: ` If the pathname doesn't match, SvelteKit will try to match other routes (using the sort order specified below), before eventually returning a 404. Note: Matchers run both on the server and in the browser. Conclusion In this article, we learned about basic and advanced routing in SvelteKit by using the SvelteKit showcase example. We looked at how to work with SvelteKit's Filesystem-based router, rest parameters, and (group) layouts. If you want to learn more about SvelteKit, please check out the SvelteKit and SCSS starter kit and the SvelteKit and SCSS GitHub showcase. All the code for our showcase project is open source. If you want to collaborate with us or have suggestions, we're always welcome to new contributions. Thanks for reading! If you have any questions, or run into any trouble, feel free to reach out on Twitter....
Mar 22, 2023
Introducing the SolidStart, TanStack Query and Tailwind CSS Starter kit
We are delighted to announce our SolidStart + TanStack + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidStart, TanStack Solid Query, and Tailwind CSS in no time. In this article, we will walk you through the kit and how it is great for building your next project. Why SolidStart? Solid.js is a really cool new framework with a lot of amazing features. Its syntax is mostly like React syntax. However, they work in completely different ways behind the scenes. Solid.js is a declarative, component-based library for building user interfaces. It is a highly customizable, low-level framework that gives you all of the building blocks you need to build bespoke designs without any opinionated styles that you have to fight to override. SolidStart is a meta-framework that helps you build your Solid.js apps with ease. It supports Client-side rendering, Server-side rendering, Streaming SSR, and Static site generation. Vite Vite is a new frontend build tool that significantly improves the frontend development experience. It consists of two major parts: - A dev server that provides rich feature enhancements over native ES Module imports (e.g. module hot-reloading, proper dependency analysis, etc). - A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production. Vite is designed from the ground up for the es-module era, and as such, it doesn't require a bundler like webpack or Parcel during development. It also doesn't require a complicated configuration file like snowpack. Instead, it leverages the browser's native support for ES modules (i.e. native ES imports) and the new spec proposal for importing CSS as modules. This means that Vite can provide instant feedback during development, and also enables features that are simply impossible with other tools, such as server-side rendering and static site generation. Vite is designed to be framework-agnostic. It is not opinionated about your choice of framework, and it is also framework-agnostic in the sense that it doesn't require you to use a specific framework-specific toolchain. You can use Vite with any framework that supports native ES imports, including React, Vue, Svelte, Angular, and even vanilla JS. Vite is also designed to be plugin-based. It is built on top of Rollup, which is a powerful and flexible bundler. However, Vite is not a wrapper around Rollup. Instead, it is a plugin-based build tool that uses Rollup under the hood. This means that you can use any Rollup plugin with Vite, and you can also create your own Vite plugins to customize Vite's behavior. Why Tanstack? TanStack is a full-stack framework for building web applications with Solid, Tailwind CSS, and TypeScript. It is a highly customizable, low-level framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles that you have to fight to override. Why Tailwind CSS? Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Testing This kit comes with Vitest pre-configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. Conclusion SolidStart is still in the beta phase. However, it has a lot of good DX improvements. This kit is great if you want to build a fast and lightweight fullstack web application. It provides you with everything you need from backend to frontend, even data caching and Tailwind configurations with two examples out of the box. For more SolidJS resources, check our solidjs.framework.dev, where you can find courses, tutorials, and libraries for SolidJS. Also, you can create your next SolidJS project. Try our SolidJS starter kit from Starter.dev. It has a lot of tools pre-configured for you. If you have any questions or suggestions, please feel free to send them to us or reach out to us on Twitter....
Mar 20, 2023
Integrating Storybook with SvelteKit, TypeScript, and SCSS
Introduction Storybook is a great tool for testing, and visualizing your components in different states. Storybook allows teams to collaborate to develop durable UIs in isolation. It allows users to implement reusable components without fussing with data, APIs, or business logic. In this article, we will discuss how to integrate Storybook in a SvelteKit project with TypeScript, and SCSS support. Zero-config set up To get started, run the following in the root of an existing Svelte project: ` This detects the project type, installs @storybook/svelte, and adds some sample files to demonstrate the basics of Storybook. Running npm run storybook gives you the following zero-config set up on http://localhost:6006 Project Structure Our project structure is already set up by SvelteKit, and Storybook initialization has created a .storybook folder. Still, we need to make some changes to the Storybook file extension, since our project is in TypeScript. This is a snippet of the folders in our project: ├── .storybook ├── main.cjs ├── preview.js └── preview-head.html ├── vite.config.ts └── src Add SCSS support To add SCSS support, we need the @storybook/preset-scss addon. Install sass, @storybook/preset-scss, and other relevant style loaders. ` Navigate to storybook/main.cjs Add @storybook/preset-scss to the addons' array. ` Add $lib alias support Navigate to .storybook/main.cjs. Import mergeConfig from Vite. This deeply merges two Vite configs. Import path. The path module provides utilities for working with file, and directory paths. Finally, we need to resolve the $lib to point to ../src/lib for Storybook. ` Your .storybook/main.cjs should contain the following: ` Creating Stories We will start by creating a Greeting.svelte file that receives a message from our server. ` Then a Greeting.stories.ts with a message argument: ` Simply run npm run storybook to see if your story is running: You can edit the argument to test different messages. Conclusion In this article, we learned how to set up Storybook in a SvelteKit project, and created our first story. If you are looking to bootstrap your next project, check out our starter kit that uses SvelteKit and SCSS. Thanks for reading! If you have any questions or run into any trouble, feel free to reach out on Twitter....
Mar 16, 2023
How to Quickly Build and Deploy a Static Markdown Blog with SvelteKit
Feb 6, 2023
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
How to Build a Counter App with SvelteKit
Jul 26, 2022
Declarative Canvas with Svelte
Jul 21, 2022