From aa7a4a0d55eeee7b3aaccb0b4a02745a9f1842d9 Mon Sep 17 00:00:00 2001 From: Mlocik97 Date: Thu, 5 May 2022 14:41:35 +0200 Subject: [PATCH 01/62] Project Structure --- documentation/docs/01-project-structure.md | 104 ++++++++++++++++++ ...1-web-standards.md => 02-web-standards.md} | 0 .../docs/{02-routing.md => 03-routing.md} | 0 .../docs/{03-layouts.md => 04-layouts.md} | 0 .../docs/{04-loading.md => 05-loading.md} | 0 .../docs/{05-hooks.md => 06-hooks.md} | 0 .../docs/{06-modules.md => 07-modules.md} | 0 ...rvice-workers.md => 08-service-workers.md} | 0 .../docs/{08-a-options.md => 09-a-options.md} | 0 .../docs/{09-events.md => 10-events.md} | 0 .../docs/{10-adapters.md => 11-adapters.md} | 0 ...{11-page-options.md => 12-page-options.md} | 0 .../docs/{12-packaging.md => 13-packaging.md} | 0 documentation/docs/{13-cli.md => 14-cli.md} | 0 ...4-configuration.md => 15-configuration.md} | 0 .../docs/{15-types.md => 16-types.md} | 0 documentation/docs/{16-seo.md => 17-seo.md} | 0 .../docs/{17-assets.md => 18-assets.md} | 0 18 files changed, 104 insertions(+) create mode 100644 documentation/docs/01-project-structure.md rename documentation/docs/{01-web-standards.md => 02-web-standards.md} (100%) rename documentation/docs/{02-routing.md => 03-routing.md} (100%) rename documentation/docs/{03-layouts.md => 04-layouts.md} (100%) rename documentation/docs/{04-loading.md => 05-loading.md} (100%) rename documentation/docs/{05-hooks.md => 06-hooks.md} (100%) rename documentation/docs/{06-modules.md => 07-modules.md} (100%) rename documentation/docs/{07-service-workers.md => 08-service-workers.md} (100%) rename documentation/docs/{08-a-options.md => 09-a-options.md} (100%) rename documentation/docs/{09-events.md => 10-events.md} (100%) rename documentation/docs/{10-adapters.md => 11-adapters.md} (100%) rename documentation/docs/{11-page-options.md => 12-page-options.md} (100%) rename documentation/docs/{12-packaging.md => 13-packaging.md} (100%) rename documentation/docs/{13-cli.md => 14-cli.md} (100%) rename documentation/docs/{14-configuration.md => 15-configuration.md} (100%) rename documentation/docs/{15-types.md => 16-types.md} (100%) rename documentation/docs/{16-seo.md => 17-seo.md} (100%) rename documentation/docs/{17-assets.md => 18-assets.md} (100%) diff --git a/documentation/docs/01-project-structure.md b/documentation/docs/01-project-structure.md new file mode 100644 index 000000000000..93a7276c10bd --- /dev/null +++ b/documentation/docs/01-project-structure.md @@ -0,0 +1,104 @@ +--- +title: Project Structure +--- + +Typicall structure of SvelteKit project is something like: + +```bash +my-app/ + | + +---- .svelte-kit/ # (generated at dev) + +---- 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) + +---- CHANGELOG.md # (optional) + +---- jsconfig.json # or 'tsconfig.json' (optional) + +---- package.json + +---- playwright.config.js # (optional) + +---- README.md # (optional) + +---- svelte.config.js +``` + +### package.json + +Same as in any `node.js` app, contain `name`, `version`, `scripts`, `devDependencies`, `type` and `dependencies`. + +Content depends on what options you used when initializing project. SvelteKit is ESM first so we use `"type": "module"` settings. In `"scripts"` property, we can see scripts used for building SvelteKit project, running dev server, packaging and to run other tools for linting, formating, type-checking, testing etc. + +When you decide to install adapter, you should use `-D` option to install it as devDependency. + +### svelte.config.js + +Contains [configuration](configuration) of SvelteKit project. + +### static/ + +Is folder that holds your static assets. Those are files that are not processed by compiler but instead are copied as are to `build/` folder, that is generated by adapter when building application. + +### src/ + +Holds all Svelte, JS and other files used to implement your app. + +#### app.html + +Is entry files, to which is Svelte app parsed. It contain some placeholders like `%svelte.head%`, `%svelte.body%` or `%svelte.assets%`. These placeholders will be removed and replaced by actual content at build or ssr. + +`%svelte.head%` is replaced mostly with `` and `