diff --git a/documentation/docs/01-project-structure.md b/documentation/docs/01-project-structure.md new file mode 100644 index 000000000000..639c8d647da8 --- /dev/null +++ b/documentation/docs/01-project-structure.md @@ -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) + +---- .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 [Vite](https://vitejs.dev/), which is used to build your project. It uses [SvelteKit's Vite plugins](modules#sveltejs-kit-vite). + +### 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 `` and `