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]
 ├ package.json
 ├ svelte.config.js
 ├ tsconfig.json
 └ vite.config.ts
						

Project folders and files

File/Folder Purpose
config Accessible throughout the codebase as $config.
config/website.js.ts Contains configurations for the app
E.g. name, description, logo, sitemap config, etc.
config/externals.js.ts Contains info on external services used by the app
E.g. Google Fonts, Analytics, etc.
config/menu.js.ts Contains all the entries from the available routes.
Used internally by sveltin to generate JsonLd objects too.
config/defaults.js.ts So far, contains info on the actual sveltin version
content Contains all the content generated WITH sveltin new content.
Contents will be grouped by "resources" name.
src In SvelteKit powered apps, src is where you app lives.
src/lib Extended modules for your application.
Basically a pure lib file (JS or TS) and not Svelte components.
src/routes Extended modules for your application.
Basically a pure lib file (JS or TS) and not Svelte components.
src/routes/api/v1 Contains the autogenerated endpoints to get the resources's contents.
themes Accessible throughout the codebase as $themes.
Contains the folder structure for your theme.
Here is where you should/could create UI components and partials.
themes/<t> t is the name of your theme. By default, a folder project_name_theme
is placed here when you create a new project.
To set your theme a different name, use the -t flag when you create a
new sveltin project
themes/<t>/components Contains the UI components you create as part of your theme.
Here you should store (private) components used to compose a partial.
themes/<t>/partials Contains partials for the webpages.
themes/<t>/theme.config.js Contains configurations for theme.
static Contains static files and compiled assets with stable URLs.
When Sveltin builds your site, all assets are copied over as-is.

Apache 2.0 License @ 2021-present Sveltin.io and contributors .

The Sveltin logos are copyright © Mirco Veltri 2021.