> Canonical URL: https://codingcat.dev/course/intro-to-svelte/lesson/fundamentals-file-based-routing # Fundamentals - File Based Routing | Intro to Svelte | CodingCat.dev Course [šŸ§¶ Intro to Svelte](/course/intro-to-svelte)Section 2.5 Ā· Lesson 6 of 14[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)[ā† Prev Lesson](/course/intro-to-svelte/lesson/fundamentals-performance)[Next Lesson ā†’](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) # Fundamentals - File Based Routing ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/5e283fb0d0ffe55c9c179aca147a1c03dd88d599-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTubeā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ā†—](https://www.youtube.com/watch?v=XdhthjV9R7o&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 6 / 14Course Lessons Outlineā–¾1Section 1 - [1.1VSCode Extensions and Settings](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings) 2Fundamentals - [2.1Fundamentals - What is Svelte](/course/intro-to-svelte/lesson/fundamentals-what-is-svelte) - [2.2Fundamentals - Why SvelteKit](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) - [2.3Fundamentals - Benefits of SvelteKit](/course/intro-to-svelte/lesson/fundamentals-benefits-of-sveltekit) - [2.4Fundamentals - Performance](/course/intro-to-svelte/lesson/fundamentals-performance) - [2.5Fundamentals - File Based Routing](/course/intro-to-svelte/lesson/fundamentals-file-based-routing) - [2.6Svelte Fundamentals - Styling in Svelte](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) 3Svelte Basics - [3.1Svelte Basics](/course/intro-to-svelte/lesson/svelte-basics-getting-started) - [3.2Svelte Basics - Sugar Syntax Markup](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup) - [3.3Svelte Basics - Sugar Syntax Logic and Each Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) - [3.4Svelte Basics - Sugar Syntax Await and Key Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) - [3.5Svelte Basics - Reactivity](/course/intro-to-svelte/lesson/svelte-basics-reactivity) - [3.6Svelte Basics - Props](/course/intro-to-svelte/lesson/svelte-basics-props) - [3.7Svelte Basics - Slots](/course/intro-to-svelte/lesson/svelte-basics-slots) Letā€™s dive into the next benefit of SvelteKit, file based routing. Any time you create a SvelteKit project, it automatically comes with a routes directory. Any new file created inside of the routes directory becomes a new url that you can visit. This means the structure of your project is defined and easily tracked inside the routes folder. At the base level, the index.svelte file goes to the home route or the ā€˜/ā€™ slash that appears after your domain name. Any new file inside that folder, will automatically track to a url of the same name. The about file will be at /about. New folders can also be created to hold files that are relevant to the routes inside it. For example, in the blog directory, the index.svelte file would go to /blogroute. We can also add dynamic routes by using square brackets around the name of the file as seen in [post].svelte. This tells SvelteKit that whatever is inside the brackets is changeable. What you put inside the brackets doesnā€™t matter, you can name it whatever you want,. It relates to the route parameter, what comes after the last / in the route you are on. So, in this blog example it would grab each of the posts id and add it after /blog giving us a route for each individual post. We also get access to [endpoints in SvelteKit](https://www.youtube.com/https://www.youtube.com/watch?v=NHWCtmmDIjo). Endpoints are where you handle all of your backend logic with HTTP requests like GET and POST . This allows us to communicate between other internal or external APIs and what shows on the page. They only run on the server and bridge the gap between the backend and frontend code. You get all of this out of the box with SvelteKit without having to set anything up yourself. Next weā€™ll look at some options you can use to style your SvelteKit projects. [https://www.sitepoint.com/svelte-fetch-data/](https://www.sitepoint.com/svelte-fetch-data/) āœļø Visual Architecture Diagram ## how this course connects together. Follow AJ through the layered stack topology from input contract to production output. Letā€™s build it!āœļø Architecture Diagram: Intro to Svelte: Fundamentals - File Based Routiā€¦LAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Intro to Svelte: Fundamentals - File Based Routing: Fundamentals -> Intro to Svelte -> Verified Production Artifact.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![ComfyUI in Production: 3D Mascot Turnarounds & Generate-Then-Trace](https://cdn.sanity.io/images/hfh83o0w/production/af191b2d106d8cf9884d5bb66e6c6e35521377fc-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/comfyui-3d-turnarounds-video-workflows)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs)[+1](/course/comfyui-3d-turnarounds-video-workflows) ### [ComfyUI in Production: 3D Mascot Turnarounds & Generate-Then-Trace](/course/comfyui-3d-turnarounds-video-workflows) Run reproducible node-based diffusion graphs on your local GPU with ComfyUI. Generate multi-angle character sheets for 3D AJ and base physics plates for generate-then-trace. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/fce6fcae58667ff3143db133eb6b57fbd9ec471f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[+1](/course/odin-web-development-foundations) ### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations) Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/intro-to-svelte) ## Intro to Svelte 6/141 ### Section 1 - [1.1VSCode Extensions and Settings](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings) 2 ### Fundamentals - [2.1Fundamentals - What is Svelte](/course/intro-to-svelte/lesson/fundamentals-what-is-svelte) - [2.2Fundamentals - Why SvelteKit](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) - [2.3Fundamentals - Benefits of SvelteKit](/course/intro-to-svelte/lesson/fundamentals-benefits-of-sveltekit) - [2.4Fundamentals - Performance](/course/intro-to-svelte/lesson/fundamentals-performance) - [2.5Fundamentals - File Based Routingā–¶](/course/intro-to-svelte/lesson/fundamentals-file-based-routing) - [2.6Svelte Fundamentals - Styling in Svelte](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) 3 ### Svelte Basics - [3.1Svelte Basics](/course/intro-to-svelte/lesson/svelte-basics-getting-started) - [3.2Svelte Basics - Sugar Syntax Markup](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup) - [3.3Svelte Basics - Sugar Syntax Logic and Each Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) - [3.4Svelte Basics - Sugar Syntax Await and Key Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) - [3.5Svelte Basics - Reactivity](/course/intro-to-svelte/lesson/svelte-basics-reactivity) - [3.6Svelte Basics - Props](/course/intro-to-svelte/lesson/svelte-basics-props) - [3.7Svelte Basics - Slots](/course/intro-to-svelte/lesson/svelte-basics-slots) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons ā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)