Sveltin Project Structure

Sveltin uses a set of conventions over configuration to simplify the expirience without losing flexibility and don’t repeat yourself.

A Sveltin app will have a number of generated files and folders that make up the structure of the project. Here is a basic rundown on the function of each of the files and folders Sveltin creates by default.

A Sveltin project looks like this:


my-project/
 ├ config/
 │ └ [autogenerated and your own config files]
 ├ content/
 │ └ [your markdown files]
 ├ src/
 │ ├ lib/
 │ │ └ [autogenerated and your own files]
 │ ├ params/
 │ │ └ [autogenerated and your own matchers]
 │ ├ routes/
 │ │ └ api
 │ │ │ └ [autogenerated]
 │ │ └ [autogenerated and your own routes]
 │ ├ app.html
 │ ├ app.css
 ├ static/
 │ └ [your static assets]
 ├ themes/
 │ └ [autogenerated]
 │ │ └ [your components and partials]
 ├ mdsvex.config.js
 ├ package.json
 ├ svelte.config.js
 ├ sveltin.json
 ├ tsconfig.json
 └ vite.config.ts

Project folders and files

File/Folder	Info
sveltin.json	The main config file for your Sveltin based project. It is uded to share info across multiple parts of the project as well as is read by the CLI when running commands.
config	Accessible across the codebase as $config. The following files are autogenerated: defaults.js.ts: info on the actual Sveltin version, SvelteKit version and build time; externals.js.ts: info on external services used by the app. E.g. Google Fonts, Analytics, etc; menu.js.ts: all the entries from the available routes. Used by sveltinio/seo components to generate JsonLd objects and usable for a navigation component; website.js.ts: configurations for the app. E.g. name, description, logo, sitemap config, etc.
content	All the content generated by running `sveltin add content`; Contents grouped by "resource" name.
src	In SvelteKit powered apps, src is where you app lives. The folder structure is the same as any other SvelteKit project. Sveltin takes care to autogenerate subfolders and files when using the CLI commands. lib folder: autogenerated utility modules used by Sveltin. Each time you add new resources or metadata by running relative Sveltin commands, new entries will be autogenerated here; params: autogenerated matching files for Sveltin artifacts; routes/api/v1 folder: autogenerated REST endpoints. Each time you add new resources or metadata by running relative Sveltin commands, new entries will be autogenerated here.
themes	Accessible across the codebase as $themes. Contains the folder structure for your theme as described just below.
themes/<t>	Supposing that t is your theme name. The following folders and files are autogenerated: components folder: here are you Svelte components used to compose the pages through partials (described below). The idea is to store here private components not directly parts of the page; partials folder: here are the partials for your web page. A partial is a Svelte component used to compose the pages assembling private components from the component theme folder describe above ; theme.config.js file: Contains information about your theme to make it sharable(note: this feature is not implemented yet by Sveltin).
static	Contains static files and compiled assets with stable URLs. When Sveltin builds your site, all assets are copied over as-is.

Other files like mdsvex.config.js, svelte.config.js, vite.config.ts etc. are generated by Sveltin when scaffolding the project, setting a zero-config approach to get started and move on.