Template: Svelte client + Express server

File Structure

.
├── *build                  generated by `npm run build` (.gitignore)
│   ├── client
│   │   ├── assets
│   │   │  └── *            compiled js (& sourcemap), css and files from `src/client/assets` (with hash)
│   │   ├── index.html      transformed html by vite
│   │   └── *               files from `src/client/public` (plain copy)
│   └── server
│       ├── server.js       server entry point
│       └── *               compiled server code
│
├── src
│   ├── client
│   │   ├── assets
│   │   │   └── *           static assets (importable)
│   │   ├── public
│   │   │   └── *           static assets (copied to root dir)
│   │   ├── components
│   │   │   └── *.svelte    Svelte components
│   │   ├── main.ts         Svelte entrypoint
│   │   ├── App.svelte      main Svelte component
│   │   └── app.css         global CSS (mainly css reset)
│   └── server
│       ├── server.ts       server entry point (also sets up vite middleware in dev mode)
│       └── *               server code
│
├── *.env                   environment variables
├── .gitignore
├── Dockerfile
├── index.html              vite entrypoint
├── package.json
├── *package-lock.json
├── README.md
├── tsconfig.json
├── tsconfig.vite.json      vite-specific tsconfig (referenced in tsconfig.json)
├── tsconfig.server.json    server-specific tsconfig
└── vite.config.js          vite config (js so that the server can import it for middleware without compiling)

Development

npm run dev starts watching the server with tsc and starts the server with the vite middleware which watches the client directory and serves it with HMR.

Deployment

Building the Dockerfile compiles the server and client and creates a container to serve both.

Environment Variables

Variable	Default Value	Description
PORT	8080	Port to serve the server on
NODE_ENV	production	production: Serve static files from ./build/client development: Use vite middleware for HMR instead

Improvement Options

• Clean up the tsconfigs. tsconfig.json and tsconfig.vite.json are from the svelte-vite template and tsconfig.server.json is for my express server because I don't understand TypeScript Project References enough to mess with it. But I bet those files can be structured better.