-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Docs] Project Structure #4829
Closed
Closed
[Docs] Project Structure #4829
Changes from 79 commits
Commits
Show all changes
82 commits
Select commit
Hold shift + click to select a range
aa7a4a0
Project Structure
Mlocik97 a9b6062
formating
Mlocik97 cf9e836
spaces
Mlocik97 00dde94
Update 01-project-structure.md
Mlocik97 49f3077
Update 01-project-structure.md
Mlocik97 e4b6164
Update 01-project-structure.md
Mlocik97 d7990e7
Update 01-project-structure.md
Mlocik97 25a0110
Update 01-project-structure.md
Mlocik97 076f7ea
Update 01-project-structure.md
Mlocik97 4410cfd
Update 01-project-structure.md
Mlocik97 59abe08
Update documentation/docs/01-project-structure.md
Mlocik97 66ed00f
Update documentation/docs/01-project-structure.md
Mlocik97 f8f1b8a
Update documentation/docs/01-project-structure.md
Mlocik97 157fd70
Update documentation/docs/01-project-structure.md
Mlocik97 e4a0a39
Update documentation/docs/01-project-structure.md
Mlocik97 e427ca7
Update documentation/docs/01-project-structure.md
Mlocik97 83bda89
Update documentation/docs/01-project-structure.md
Mlocik97 94fffe0
Update documentation/docs/01-project-structure.md
Mlocik97 cef6fe9
Update documentation/docs/01-project-structure.md
Mlocik97 b970fc5
Update documentation/docs/01-project-structure.md
Mlocik97 5495d42
Update documentation/docs/01-project-structure.md
Mlocik97 4a82124
Update documentation/docs/01-project-structure.md
Mlocik97 2980cff
Update 01-project-structure.md
Mlocik97 ec8d85a
Update documentation/docs/01-project-structure.md
Mlocik97 7cdab00
Update documentation/docs/01-project-structure.md
Mlocik97 1867c23
Update documentation/docs/01-project-structure.md
Mlocik97 4c52fcf
Update documentation/docs/01-project-structure.md
Mlocik97 b009781
Update documentation/docs/01-project-structure.md
Mlocik97 44e06d5
Update documentation/docs/01-project-structure.md
Mlocik97 8c3241b
Update documentation/docs/01-project-structure.md
Mlocik97 f341d2f
Update documentation/docs/01-project-structure.md
Mlocik97 abd6cb4
Update documentation/docs/01-project-structure.md
Mlocik97 fade1a8
Update documentation/docs/01-project-structure.md
Mlocik97 11bdce2
Update documentation/docs/01-project-structure.md
Mlocik97 2d16173
Update documentation/docs/01-project-structure.md
Mlocik97 1a528d9
Update documentation/docs/01-project-structure.md
Mlocik97 117e8e4
Update documentation/docs/01-project-structure.md
Mlocik97 e949c87
Update documentation/docs/01-project-structure.md
Mlocik97 f74577a
Update documentation/docs/01-project-structure.md
Mlocik97 e207ef3
Update 01-project-structure.md
Mlocik97 a823857
Update documentation/docs/01-project-structure.md
Mlocik97 73c2efb
Update documentation/docs/01-project-structure.md
Mlocik97 7a81291
Update 01-project-structure.md
Mlocik97 df426b4
Update documentation/docs/01-project-structure.md
Mlocik97 92e662c
Update 01-project-structure.md
Mlocik97 26e3ebc
Update documentation/docs/01-project-structure.md
Mlocik97 8763164
Update documentation/docs/01-project-structure.md
Mlocik97 c84ce33
Update documentation/docs/01-project-structure.md
Mlocik97 a8f4797
Update documentation/docs/01-project-structure.md
Mlocik97 112fa3e
Update documentation/docs/01-project-structure.md
Mlocik97 1028b62
Update documentation/docs/01-project-structure.md
Mlocik97 75a3a80
Update documentation/docs/01-project-structure.md
Mlocik97 74d4730
[chore] upgrade eslint-plugin-svelte3
benmccann 58f56b7
Merge branch 'eslint-plugin-svelte3'
Mlocik97 32e4f49
Update documentation/docs/01-project-structure.md
Mlocik97 c748641
Merge branch 'master' into master
Mlocik97 75a10c5
Merge branch 'master' into master
Mlocik97 fae169d
Merge branch 'master' into master
Mlocik97 7ada1ee
Merge remote-tracking branch 'upstream/master'
Mlocik97 0e5dd49
Merge branch 'master' into master
Mlocik97 3954f72
Merge remote-tracking branch 'upstream/master'
Mlocik97 8c19d8b
Merge remote-tracking branch 'upstream/master'
Mlocik97 2771e2d
Merge remote-tracking branch 'upstream/master'
Mlocik97 49094d7
Merge remote-tracking branch 'upstream/master'
Mlocik97 74bf221
Merge remote-tracking branch 'upstream/master'
Mlocik97 fb84136
Merge remote-tracking branch 'upstream/master'
Mlocik97 b17aecf
Merge remote-tracking branch 'upstream/master'
Mlocik97 918c9a3
Merge remote-tracking branch 'upstream/master'
Mlocik97 885d0f8
Merge remote-tracking branch 'upstream/master'
Mlocik97 fb86350
Update 01-project-structure.md
Mlocik97 ba7a70a
Merge remote-tracking branch 'upstream/master'
Mlocik97 251bc59
Update 01-project-structure.md
Mlocik97 25e18d8
Update documentation/docs/01-project-structure.md
Mlocik97 2dd0396
Merge remote-tracking branch 'upstream/master'
Mlocik97 cbbebe0
Merge remote-tracking branch 'upstream/master'
Mlocik97 64a029b
Update 01-project-structure.md
Mlocik97 ceed586
Update 01-project-structure.md
Mlocik97 fe32426
Update 01-project-structure.md
Mlocik97 cf80af1
Merge remote-tracking branch 'upstream/master'
Mlocik97 9576ed2
Update documentation/docs/01-project-structure.md
Mlocik97 235d158
Merge remote-tracking branch 'upstream/master'
Mlocik97 a6ddad9
Merge remote-tracking branch 'upstream/master'
Mlocik97 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
--- | ||
title: Project Structure | ||
--- | ||
|
||
The basic structure of a SvelteKit project is: | ||
|
||
```sh | ||
my-app/ | ||
| | ||
+---- .svelte-kit/ # (generated by SvelteKit) | ||
+---- build/ # (generated at build) | ||
+---- src/ | ||
| | | ||
| +---- lib/ # (optional) | ||
| +---- params/ # (optional) | ||
| +---- routes/ | ||
| +---- app.css # (optional) | ||
| +---- app.d.ts # (optional) | ||
| +---- app.html | ||
| +---- hooks.js # or 'hooks/' (optional) | ||
| +---- service-worker.js # (optional) | ||
+---- static/ | ||
+---- tests/ # (optional) | ||
+---- .eslintrtc.cjs # (optional) | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
+---- .gitignore # (optional) | ||
+---- .npmrc | ||
+---- .prettierrc # (optional) | ||
+---- jsconfig.json # or 'tsconfig.json' (optional) | ||
+---- package.json | ||
+---- playwright.config.js # (optional) | ||
+---- svelte.config.js | ||
+---- vite.config.js | ||
``` | ||
|
||
If using TypeScript, the scripts files in the `src/` directory will have a `.ts` file extension. | ||
|
||
### package.json | ||
|
||
The `package.json` file is a standard file where you can configure your `dependencies` and `devDependencies`. [Read more in the npm docs](https://docs.npmjs.com/cli/v7/configuring-npm/package-json). | ||
|
||
SvelteKit is [ESM-first](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) so we set `"type": "module"`. In the `"scripts"` property, you can see scripts used for building the project, running the dev server, packaging a library (optional), and running other tools for linting, formatting, type checking, testing etc. | ||
|
||
### svelte.config.js | ||
|
||
Contains [configuration](configuration) for the SvelteKit project. | ||
|
||
### vite.config.js | ||
|
||
Contains [configuration](https://vitejs.dev/config/) for the [Vite](https://vitejs.dev/). It use [SvelteKit Vite plugins](modules#sveltejs-kit-vite). | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### static/ | ||
|
||
Holds your static assets. These are files that are not processed by Vite but are just copied to the build folder by the adapter when building the application. | ||
|
||
### src/ | ||
|
||
Holds the Svelte, JS/TS, and other source files for your app. | ||
|
||
#### app.html | ||
|
||
This is the entry point to your application. It contains placeholders like `%sveltekit.head%`, `%sveltekit.body%`, and `%sveltekit.assets%`. These placeholders will be removed and replaced by actual content at build or SSR. | ||
|
||
`%sveltekit.head%` is replaced with `<link>` and `<script>` tags that power the application as well as content from the [`<svelte:head>`](https://svelte.dev/docs#template-syntax-svelte-head) tags defined in your layouts and pages. | ||
|
||
`%sveltekit.body%` is where the HTML for your application is rendered. | ||
|
||
`%sveltekit.assets%` is replaced by the [assets base path](configuration#paths). | ||
|
||
#### routes/ | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
Contains your [pages](routing#pages), [endpoints](routing#endpoints), [standalone endpoints](routing#endpoints-standalone-endpoints), [layouts](layouts) and can also hold [private module](routing#private-modules) files. SvelteKit uses file-based routing, so the file path of the pages and endpoints in this folder maps to the URL which renders them. | ||
|
||
#### lib/ | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
A folder that contains source for non-routing related files used by your application. They can be imported via the `$lib` alias. If you are creating a library, the contents of the `lib/` folder are used by default to generate the package when you run [`svelte-kit package`](packaging). | ||
|
||
#### hooks.js or hooks/ | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
A folder or file that contain [hooks](hooks) functions executed at every request. The top scope of this file can be used for initialization code like a database connection. | ||
|
||
#### params/ | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
Contains [param matchers](routing#advanced-routing-matching) that can be used for dynamic pages or endpoints. | ||
|
||
#### service-worker.js or service-worker/ | ||
Mlocik97 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
Optionally contains code for your [service-worker](service-worker). | ||
|
||
#### other files in src/ folder | ||
|
||
The `src/` folder can also contain an `app.css` file with global styles or an `app.d.ts` file with type definitions. | ||
|
||
### build/ | ||
|
||
The output location for your project will depend on which adapter you use. Many adapters will use the `build/` folder as the output location for your compiled app prepared for deploying to production. | ||
|
||
### .svelte-kit/ | ||
|
||
Holds Vite output used directly when you run `npm run dev` or as intermediate output of `npm run build`. | ||
|
||
### tests/ | ||
|
||
If PlayWright is set, this folder is place for testing your app. | ||
|
||
### Other | ||
|
||
Based on options you selected when initializing the project, there other files will be generated for tools like Git, ESLint, Prettier, TypeScript, and PlayWright. |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure what to use so comments are shown as comments but everything else as standard text.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about using the skeleton app structure, and speaking about option folders like
params
or generated folders like.svelte-kit/
andbuild/
when speaking about them in their parents' descriptions?This is the output I've got using tree (
tree -aC --dirsfirst --gitignore
added/
manually):There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's better if all of important files are included, so it's really fast visible to where put for example
params/
folder, that doesn't exist yet without need to search it deeper in docs.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree, that's a very important folder of which, BTW, I didn't know about.☺️
But I would keep it super simple to avoid to overwhelm the reader with "advanced" information, still mentioning them in their related section in the documentation page.
In this case, the section where we explain what the
src/
folder is about.Makes sense?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's better to have it all at one place together visible,... it doesn't really add that much mess and it's quite visible which files are where.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thinking about it, that's true. For sure, I've already learned something new looking at it.☺️ 👍