SvelteKit Route Naming Conventions

TODO: collapasable, copyable, download, etc

I see a SvelteKit repo in github and under routes, some of the directory names say (auth). What is up with that? What directory naming convensions are there for routes in sveltekit?search("SvelteKit route directory naming conventions")# 【0†Advanced routing • Docs • SvelteKit†kit.svelte.dev】 repo: 'kit', branch: 'master', file: 'documentation/docs/04-advanced-routing.md' } src/routes/a/ [...rest]/z/+page.svelte will match /a/z (i.e. there's no parameter at all) as well as /a/b/z and /a/b/c/z and so on. Make sure you check that the value of the rest parameter is valid, for example using a matcher. 404 pages

【1†Shallow routing • Docs • SvelteKit†kit.svelte.dev】

Shallow routing Edit this page on GitHub On this page On this page. As you navigate around a SvelteKit app, you create history entries.Clicking the back and forward buttons traverses through this list of entries, re-running any load functions and replacing page components as necessary.. Sometimes, it's useful to create history entries without navigating. For example, you might want to show a ...

【2†A Guide to Routing in SvelteKit - MUO†www.makeuseof.com】

In SvelteKit, routing follows a file-based system. This means that your pages' directory structure determines your application's routes. To understand the SvelteKit routing system better, first, create a SvelteKit project. To do this, run the following code in your terminal: npm create svelte@latest my-app

【3†Everything About SvelteKit Routing - Joy Of Code†joyofcode.xyz】

SvelteKit uses file-based routing where routes of your app are defined by the directories in your project. The routes are defined inside a src/routes folder. Each directory inside the routes folder can have or more route files using the + prefix. To define a page in SvelteKit you use a +page.svelte file which becomes a route that maps to a URL.

【4†Advanced routing / Route groups • Svelte Tutorial†learn.svelte.dev】

We can do this with a route group, which is a directory in parentheses. Create an (authed) group by renaming account to (authed)/account then renaming app to (authed)/app. Now we can control access to these routes by creating src/routes/ (authed)/+layout.server.js: src/routes/ (authed)/+layout.server.js.

【5†Routing / Route parameters • Svelte Tutorial†learn.svelte.dev】

Learn how to use route parameters to create dynamic pages with SvelteKit, a framework for building web applications with Svelte. This tutorial will show you how to access the parameters from the load function and the page component, and how to use them to fetch data and render content.

【6†A Deep Dive into SvelteKit Routing with Our Starter.dev GitHub Showcase ...†www.thisdot.co】

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.

【7†Routing / Layouts • Svelte Tutorial†learn.svelte.dev】

Learn Svelte and SvelteKit with an interactive browser-based tutorial. Skip to main content learn.svelte.dev learn. Tutorial ... Instead of repeating it in each +page.svelte component, we can use a +layout.svelte component that applies to all routes in the same directory. In this app we have two routes, src/routes/+page.svelte and src/routes ...

【8†Sveltekit Routes - Jarrods Blog†blog.jarrodkane.com】

Dynamic routes are made using square brackets in their naming of the file [slug].svelte we do not need to use the word slug, but that word is what you'll be using in that file in the load function. Let's make a dynamic route, we already have a done folder that contains a file called [slug].svelte. First, with our app running we will navigate to ...

【9†Learn SvelteKit - Part 1: SvelteKit Project Setup and Core Concepts ...†egghead.io】

The SvelteKit’s routing system is a file system approach to define a route. You need to create a folder inside the src/routes folder. Each folder you create there can have one or more route files. These files have a special naming convention. They all use the + prefix.

【10†Advanced Routing - Fullstack Svelte with SvelteKit | Frontend Masters†frontendmasters.com】

The "Advanced Routing" Lesson is part of the full, Fullstack Svelte with SvelteKit course featured in this preview video. Here's what you'd learn in this lesson: Rich provides examples of SvelteKit's advanced routing features, including optional parameters, rest parameters, parameter matchers, routing groups, and breaking out of the layout ...

【11†What’s the recommended naming convention for SvelteKit files and folders?†webdeveloper.com】

What’s the recommended naming convention for SvelteKit files and folders? @cosmic → + 3,000 Oct 04.2023 In a new SvelteKit project, we’re deciding how to name files and folders. One approach is using kebab-case for all files, including .svelte files.

【12†Learn SvelteKit - Part 2: Routing In SvelteKit | egghead.io†egghead.io】

Here's an example of what a SvelteKit home page might look like. This file is named +page.svelte.. Server Side Rendering (SSR) SvelteKit comes preconfigured to perform Sever Side Rendering (SSR), this means that the component will render twice, once in the server for the initial request and once in the client (hydration process).. Remember a page in an SvelteKit application is just a Svelte ...

【13†Sveltekit Changes: Routes - DEV Community†dev.to】

We all have been fan of file-based routing but sveltekit comes with new routing which is directory based. So now you define a folder than add your +page.svelte, +page.js, +page.server.js files as per need where: +page.svelte is for your client side code with all the html, css and js for client. +page.js is for Load function which i have ...

【14†SvelteKit: A Simple Solution for Web Development - Atomic Spin†spin.atomicobject.com】

I particularly like the file-system based route definitions. The path of each file indicates its route, and the naming structure (+page.server.ts, +page.svelte.ts, etc) indicates its role (server vs UI, in this example). You can also use these conventions with +layout.svelte files to pass along common components throughout the child routes ... Visible: 0% - 100%mclick([0, 4, 11]) src/params/integer.js

ts

/** @type {import('@sveltejs/kit').ParamMatcher} */

export function match(param) {

	return /^\d+$/.test(param);

}

src/params/integer.ts

ts 

import type { ParamMatcher } from '@sveltejs/kit';

export const match: ParamMatcher = (param) => {

	return /^\d+$/.test(param);

};

...and augmenting your routes:

src/routes/archive/[page]
src/routes/archive/[page=integer]

If the pathname doesn't match, SvelteKit will try to match other routes (using the sort order specified below), before eventually returning a 404.

Each module in the params directory corresponds to a matcher, with the exception of *.test.js and *.spec.js files which may be used to unit test your matchers.

Matchers run both on the server and in the browser.

Sorting【14†permalink】

It's possible for multiple routes to match a given path. For example each of these routes would match /foo-abc:

src/routes/[...catchall]/+page.svelte
src/routes/[[a=x]]/+page.svelte
src/routes/[b]/+page.svelte
src/routes/foo-[c]/+page.svelte
src/routes/foo-abc/+page.svelte 

SvelteKit needs to know which route is being requested. To do so, it sorts them according to the following rules...

• More specific routes are higher priority (e.g. a route with no parameters is more specific than a route with one dynamic parameter, and so on)
• Parameters with 【9†matchers】 ([name=type]) are higher priority than those without ([name])
• [[optional]] and [...rest] parameters are ignored unless they are the final part of the route, in which case they are treated with lowest priority. In other words x/[[y]]/z is treated equivalently to x/z for the purposes of sorting
• Ties are resolved alphabetically

...resulting in this ordering, meaning that /foo-abc will invoke src/routes/foo-abc/+page.svelte, and /foo-def will invoke src/routes/foo-[c]/+page.svelte rather than less specific routes:

src/routes/foo-abc/+page.svelte
src/routes/foo-[c]/+page.svelte
src/routes/[[a=x]]/+page.svelte
src/routes/[b]/+page.svelte
src/routes/[...catchall]/+page.svelte

Encoding【15†permalink】

Some characters can't be used on the filesystem — / on Linux and Mac, \ / : * ? " < > | on Windows. The # and % characters have special meaning in URLs, and the [ ] ( ) characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.

To use these characters in your routes, you can use hexadecimal escape sequences, which have the format [x+nn] where nn is a hexadecimal character code:

• \ — [x+5c]
• / — [x+2f]
• : — [x+3a]
• * — [x+2a]
• ? — [x+3f]
• " — [x+22]
• < — [x+3c]
• > — [x+3e]
• | — [x+7c]
• # — [x+23]
• % — [x+25]
• [ — [x+5b]
• ] — [x+5d]
• ( — [x+28]
• ) — [x+29]

For example, to create a /smileys/:-) route, you would create a src/routes/smileys/[x+3a]-[x+29]/+page.svelte file.

You can determine the hexadecimal code for a character with JavaScript:

ts

':'.charCodeAt(0).toString(16); // '3a', hence '[x+3a]'

You can also use Unicode escape sequences. Generally you won't need to as you can use the unencoded character directly, but if — for some reason — you can't have a filename with an emoji in it, for example, then you can use the escaped characters. In other words, these are equivalent:

src/routes/[u+d83e][u+dd2a]/+page.svelte
src/routes//+page.svelte 

The format for a Unicode escape sequence is [u+nnnn] where nnnn is a valid value between 0000 and 10ffff. (Unlike JavaScript string escaping, there's no need to use surrogate pairs to represent code points above ffff.) To learn more about Unicode encodings, consult 【16†Programming with Unicode†unicodebook.readthedocs.io】.

Since TypeScript 【17†struggles†github.com】 with directories with a leading . character, you may find it useful to encode these characters when creating e.g. 【18†.well-known†en.wikipedia.org】 routes: src/routes/[x+2e]well-known/...

Advanced layouts【19†permalink】

By default, the layout hierarchy mirrors the route hierarchy. In some cases, that might not be what you want.

(group)【20†permalink】

Perhaps you have some routes that are 'app' routes that should have one layout (e.g. /dashboard or /item), and others that are 'marketing' routes that should have a different layout (/about or /testimonials). We can group these routes with a directory whose name is wrapped in parentheses — unlike normal directories, (app) and (marketing) do not affect the URL pathname of the routes inside them:

src/routes/
│ (app)/
│ ├ dashboard/
│ ├ item/
│ └ +layout.svelte
│ (marketing)/
│ ├ about/
│ ├ testimonials/
│ └ +layout.svelte
├ admin/
└ +layout.svelte

You can also put a +page directly inside a (group), for example if / should be an (app) or a (marketing) page.

Breaking out of layouts【21†permalink】

The root layout applies to every page of your app — if omitted, it defaults to <slot />. If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups except the routes that should not inherit the common layouts.

In the example above, the /admin route does not inherit either the (app) or (marketing) layouts.

+page@【22†permalink】

Pages can break out of the current layout hierarchy on a route-by-route basis. Suppose we have an /item/[id]/embed route inside the (app) group from the previous example:

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

Ordinarily, this would inherit the root layout, the (app) layout, the item layout and the [id] layout. We can reset to one of those layouts by appending @ followed by the segment name — or, for the root layout, the empty string. In this example, we can choose from the following options:

• +page@[id].svelte - inherits from src/routes/(app)/item/[id]/+layout.svelte

• [email protected] - inherits from src/routes/(app)/item/+layout.svelte

• +page@(app).svelte - inherits from src/routes/(app)/+layout.svelte

• [email protected] - inherits from src/routes/+layout.svelte

  src/routes/ ├ (app)/ │ ├ item/ │ │ ├ [id]/ │ │ │ ├ embed/ │ │ │ │ └ +page@(app).svelte │ │ │ └ +layout.svelte │ │ └ +layout.svelte │ └ +layout.svelte └ +layout.svelte

+layout@【23†permalink】

Like pages, layouts can themselves break out of their parent layout hierarchy, using the same technique. For example, a [email protected] component would reset the hierarchy for all its child routes.

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte  // uses (app)/item/[id]/+layout.svelte
│ │ │ ├ +layout.svelte  // inherits from (app)/item/[email protected]
│ │ │ └ +page.svelte    // uses (app)/item/[email protected]
│ │ └ [email protected]   // inherits 

URL: https://webdeveloper.com/bounties/whats-the-recommended-naming-convention-for-sveltekit-files-and-folders/ 【0† Web Developer】

Menu

Login / 【1†Sign up ×】

【0† Home】【2† Articles】【3† Bounties】【4† Community】【5† Reference】【6† Jobs】【7† Tools】【8† SATS】

【1†Create a profile】

【3† Bounties /】【9† Pin to Profile】【10† Bookmark】

What’s the recommended naming convention for SvelteKit files and folders?

[Image 0][Image 1]【11†@cosmic】 → + 3,000

【12†Copy link】【13†Tweet this†twitter.com】Alerts:

Oct 04.2023

In a new SvelteKit project, we’re deciding how to name files and folders. One approach is using kebab-case for all files, including .svelte files. Another is using kebab-case for most files but switching to PascalCase for .svelte files without the + prefix. Are there any established naming conventions for Svelte or SvelteKit, and what’s the best practice?

Sign in

to post a answer

【14†Front-end】【15†Open-source】【16†Svelte】

1 Replies ↴

【17†Davinci•003 auto-reply】SvelteKit doesn't enforce a strict naming convention for files and folders, but it does have some recommendations and requirements based on its file-based routing system. Here are some guidelines:

1. File and Folder Names: Use kebab-case (lowercase letters with hyphens) for file and folder names. This is a common practice in web development to avoid issues with case sensitivity on different operating systems and servers. For example, use my-component.svelte instead of MyComponent.svelte.

2. File Extensions: Use the .svelte extension for Svelte components. For scripts that are part of the routing (like layout files or error pages), use the .js or .ts extension if you're using TypeScript.

3. Special Files: There are some special file names that SvelteKit recognizes:

• _layout.svelte: Defines a layout component. This can be in the root of the src/routes folder or nested inside other folders to create nested layouts.
• _error.svelte: Defines an error page.
• index.svelte: Defines the default route for a folder.

4. Dynamic Parameters: To create a dynamic route, use square brackets in the file or folder name. For example, [id].svelte would match routes like /1, /abc, etc. and the matched part will be available as a parameter in the page's load function.

Here's an example of a SvelteKit project structure:

/src  
/routes  
index.svelte  
_layout.svelte  
_error.svelte  
/blog  
index.svelte  
_layout.svelte  
[slug].svelte  
/lib  
utility.js  

In this example, index.svelte is the homepage, _layout.svelte is the main layout, and /blog/[slug].svelte is a dynamic route for individual blog posts.

Was this helpful?

YesNo

Also in 【15†#Open-source】 ↴

【18†What's the big deal with the ECMAScript RegExp.escape proposal?】【19†Can PartyKit truly simplify the complexities of real-time application development?】【20†Thoughts on JSX email for email template development?】

×

Success!

Help @cosmic spread the word by sharing this article on Twitter...

【21† Tweet This†twitter.com】

Sign in

【22†Forgot password?】

【23† Sign in with Twitch†id.twitch.tv】【24† Sign in with Github†github.com】【25†Create Account】

The web is an endless sea of information. Don't miss the boat... Subscribe!

about: ({
version: 0.1.9 — BETA 12.21,
whats_new: community page,
up_next: more 【17†Davinci•003】 tasks,
coming_soon: events calendar,
social: 【26†@webDeveloperHQ†twitter.com】
});

legal: ({
terms: 【27†of use】,
privacy: 【28†policy】
});

【29†↴】changelog: (
version: 0.1.9,
notes: added 【4†community page】

version: 0.1.8,
notes: added 【17†Davinci•003】

version: 0.1.7,
notes: upvote answers to 【3†bounties】

version: 0.1.6,
notes: article editor refresh
)...

【8†↴】recent_tips: (
tipper: 【30†@phpsecure】,
tipped: 【31†article】
amount: 50 【8†SATS】,

tipper: 【32†@phpsecure】,
tipped: 【33†article】
amount: 100 【8†SATS】,

tipper: 【34†@phpsecure】,
tipped: 【35†article】
amount: 500 【8†SATS】,
)...

Social

【26†@webDeveloperHQ†twitter.com】

Version

0.1.9 — BETA 12.21In SvelteKit, the routing system is quite flexible and offers a variety of ways to organize files and folders for routing. Here's a breakdown of some key concepts and conventions:

1. File and Folder Naming: It's recommended to use kebab-case (lowercase letters with hyphens) for naming files and folders. This is a common practice in web development, which helps to avoid issues with case sensitivity on different operating systems and servers. For instance, you should name your components like my-component.svelte rather than MyComponent.svelte.

2. Special Files: SvelteKit recognizes certain special file names:

   • _layout.svelte: Defines a layout component. This can be placed in the root of the src/routes folder or nested within other folders to create nested layouts.
   • _error.svelte: Defines an error page.
   • index.svelte: Serves as the default route for a folder.

3. Dynamic Parameters: For dynamic routes, square brackets are used in the file or folder name. For example, [id].svelte would match routes like /1, /abc, etc., and the matched part will be available as a parameter in the page's load function.

4. Grouping Routes: You can group routes using directories whose names are wrapped in parentheses. These groups, such as (auth), do not affect the URL pathname of the routes inside them but can be used to organize routes conceptually or to apply specific layouts or functionalities to a set of routes.

5. Special Characters in Routes: Certain characters can't be used directly in routes due to filesystem or URL constraints. To include these characters, you can use hexadecimal or Unicode escape sequences. For instance, to use a colon (:), you would use [x+3a].

6. Advanced Layouts: SvelteKit allows complex layout structures, where you can have nested layouts and even break out of layout hierarchies on a route-by-route basis. This feature is particularly useful for creating distinct sections within your application, each with its own layout and style.

These conventions and features provide a robust and flexible system for organizing routes in a SvelteKit application. The use of specific conventions like kebab-case for naming and the use of parentheses for grouping routes helps maintain clarity and consistency in your project structure.

For more detailed information and examples, you can refer to the SvelteKit documentation and discussions on web development forums:

• Advanced Routing in SvelteKit
• Recommended Naming Conventions for SvelteKit Files and Folders

SvelteKit Route Naming Conventions created at Tue Jan 20 1970 17:06:27 GMT+0000 (Coordinated Universal Time)