![](https://i0.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc9woz9ownqlqand280n7.png?w=1200&ssl=1)
Introduction
I’m very much in the midst of my Svelte knowledge refresh, and to share my learnings with you effectively it would be most prudent to start by walking through the setup of a Svelte project and understanding the role of a .svelte
file – where the magic happens!
A word about SvelteKit…
SvelteKit is the easiest way to start developing with Svelte. SvelteKit is a framework built on top of Svelte that simplifies the development of fast and interactive web applications. It provides tools and features for managing pages, layouts, and routing, ensuring efficient performance. SvelteKit offers a comprehensive set of development tools, including server-side rendering, file-based routing, and API endpoints, all seamlessly integrated. This allows us developers to focus on building the application rather than managing complex configurations. SvelteKit is to Svelte what Next.js is to React (for those who are familiar with React).
Setup
Setting up a SvelteKit app is straightforward, and you can get started with just a few commands. Here’s a simple guide to help you set up a new SvelteKit project and an overview of what the repository will contain (note: I highly recommend you check SvelteKit documentation for the latest setup instructions).
Setup Instructions
- First, make sure you have Node.js installed.
Open your terminal or command prompt and run the following command to create a new SvelteKit app:
npm init svelte@next my-sveltekit-app
Replace
my-sveltekit-app
with whatever you want to name your project.Change to your project directory:
cd my-sveltekit-app
Install the necessary dependencies using npm:
npm install
Run the following command to start the development server:
npm run dev
This will run your app locally on a server, typically accessible at
http://localhost:3000
in your web browser.
What’s Inside the App Repository
-
src
contains all the source files essential for your project. This includes theroutes
folder, which contains the pages and endpoints of your application. The structure of files and folders within this folder directly maps to the application’s routing; for example, a file namedabout.svelte
maps to the/about
route. Additionally, there is alib
folder, intended for reusable libraries and utility functions that support the broader application. The directory also containsapp.html
, the main template file where Svelte components are dynamically injected. -
static
directory is for static assets like images, fonts, or plain JavaScript files that don’t need processing. -
svelte.config.js
is the configuration file for SvelteKit. This file includes settings for how your app is built and run. -
package.json
andpackage-lock.json
handle project metadata and the list of dependencies, respectively. -
node_modules
is a directory that contains all of your project’s npm packages. -
.gitignore
specifies intentionally untracked files to ignore (like node_modules). - Finally, depending on your setup, you might have other config files for tools like ESLint, TypeScript, Tailwind etc.
This structure provides a solid base for developing complex applications with clear routing and organisation, making it easy to scale up and manage as your project grows.
What is the .svelte
file
A .svelte
file is a component file used in Svelte applications, and it’s where much of the “magic” of Svelte takes place. These files are the building blocks of a Svelte app, allowing you to define structure, style, and behaviour in a single cohesive place. Here’s a breakdown of what goes into a .svelte
file:
-
JavaScript: The script tag within a
.svelte
file contains the component’s logic. This can include data properties, computed properties, and functions. The JavaScript in a.svelte
file directly manipulates the component’s state and handles its reactivity. Svelte compiles this script into highly efficient imperative code that updates the DOM when the state changes. - HTML: The template section of the component, written in regular HTML. This is where you define the structure of your component, like any other HTML file.
-
CSS: Styles specific to this component. Any CSS styles written here are scoped to the component, meaning they won’t affect other elements outside this
.svelte
file unless explicitly intended. This helps in managing styles without worrying about conflicts across the application. - Reactivity: Svelte simplifies reactivity, primarily through the use of the ‘=’ operator to automatically update the DOM when a variable changes. This basic method is part of a straightforward syntax. I will explore more of Svelte’s reactivity approaches in the next post.
- Exports: Components can export variables and functions, making them available for use by other components. This is how you can pass props (properties) into components and interact with them.
Here’s a simple example of what a .svelte
file might look like:
<script> let count = 0; function increment() { count += 1; // Automatically updates the DOM wherever `count` is used }
</script> <h1>Count: {count}</h1>
<button on:click={increment}>Increment</button> <style> h1 { color: purple; }
</style>
In this example:
- The
<script>
block defines a count variable and a function to increment it. - The HTML structure displays the count and a button that, when clicked, calls the increment function.
- The
<style>
block scopes its CSS to just this component, ensuring the<h1>
tag is styled as defined only within this component.
Closing Remarks
Svelte opens up a world of possibilities for “easily” creating interactive and efficient web applications. With its intuitive syntax and component-based structure, Svelte, and by extension SvelteKit, offer a streamlined approach to web development that both beginners and seasoned developers come to appreciate.
As I continue to delve into the capabilities and features of Svelte in future posts, I encourage you to experiment with the concepts and examples shared today. Dive into the documentation, tinker with the code, and see firsthand how enjoyable Svelte is to work with. Whether you’re building a small personal project or a large-scale application, the simplicity and power of Svelte are sure to make the development process a rewarding experience.
Happy coding, and see you in the next post!
Discover more from Coursity
Subscribe to get the latest posts sent to your email.