Project Organization

Quick intro

Throughout this book, we’ll be building a Svelte application using the barebones project we have just created, and this way, we’ll also cover Svelte features as we go along. In this short chapter, we'll review the structure of the current skeleton project—this will help us organize our code later.

Project structure

By default, the Svelte project we created in the previous chapter has a project structure that we need to understand in order to add features and modify the application.

Figure 2-a: Default Project Structure (VS Code)

As we add features to the application, we’ll aim to keep the default project structure. In other words, we will keep all the folders and configuration files that the application creation or scaffolding process has created and add application-specific Svelte pages and component files as needed.

Several configuration files within the application’s root folder allow the project to be built and executed. Let’s explore these.

The vite.config.js file contains the required settings for Vite to bundle the app’s code and serve it.

Code Listing 2-a: Vite Configuration (vite.config.js)

All this does is import SvelteKit (sveltekit) and add it as a Vite plugin (plugins: [sveltekit()]). The code is straightforward to grasp.

The svelte.config.js file exposes the Svelte core adapter to SvelteKit. As you can see in the following listing, the code is short and straightforward.

Code Listing 2-b: SvelteKit Configuration (svelte.config.js)

The README.md file, as its name implies, contains valuable information about building and deploying the SvelteKit application we’ve created and scaffolded.

The package.json file contains information about version dependencies and scripts used to execute and build the application, as well as the name and version of the app.

Code Listing 2-c: Project Dependencies and Scripts (package.json)

We can see that the script refers to Vite, which is responsible for creating the development version of the app, as well as making the final production build.

We can also see that Svelte and Vite are both development dependencies only—not actual dependencies—which means they do not get deployed with the actual application.

Beyond that, we can find the .npmrc (node package manager runtime configuration) file, a configuration file that can be used globally or at a user level to optimize the npm environment.

We can also see a .gitignore file, indicating folders and files for Git to ignore. If we look at this file, we can see what folders and files are ignored by Git.

Code Listing 2-d: The Git Ignore File (.gitignore)

As for the specific project folders, we can see the static, src, node_modules, and .svelte-kit folders.

As its name implies, the static folder contains fixed assets that the application will use, such as the favicon.png file. The static folder is also used to include CSS files, images, and third-party JavaScript files.

We will be doing all our work in the src folder. Within the src folder, there’s an app.html file, and you can also find the routes subfolder, which contains the index.svelte file, which is the application’s main page.

Figure 2-b: The src Folder Content

We’ll come back to the src folder a bit later. For now, let’s move our attention to the other remaining folders of our project. The nodes_modules folder contains all the packages that both Svelte and Vite require to work.

On the other hand, the .svelte-kit folder, as its name implies, includes the Svelte compiler and runtime files.

Recap

Now that we know how our project’s folders and files are organized, we can move on to greener fields by setting up a back end, learning about Svelte, and adding features to our application.