Lay of the land

Let’s take a look at what else is in the folder we just created.

• .svelte-kit is where SvelteKit generates all the code it needs
• .vscode contains a recommendation to install the Svelte plugin
• node_modules needs no introduction
• src is where the meat of your app lives.
• src/lib is just a place to put your stuff — common utilities, components, assets, etc. Because we chose the Vitest option during setup, we also have a folder of example tests, which we can run with pnpm test:unit
• src/lib/server is special in that you can only import it into code that only runs on the server
• src/routes defines the structure of your app
• src/app.d.ts lets you define some global types
• src/app.html is the actual HTML that will be sent to the browser when someone visits your app
• src/env.ts is where you define your environment variables, which we’ll talk about in a bit
• static is where you put files that should be uploaded along with your app
• test-results exists because we chose the Playwright option
• .env and .env.example contain the values of your environment variables when you’re working locally. If I git init this repo, you’ll see that .env is ignored. We’re using DATABASE_URL in lib/server/db
• drizzle.config.ts is where we configure Drizzle, which is how we’re going to interact with our SQLite database
• tsconfig.json contains some recommended TypeScript config, and also imports a config that’s generated by SvelteKit. We’ll see why later
• vite.config.ts is, of course, where you configure Vite and Vitest. Ours has a bunch of stuff in it that the CLI added