# Architecture

This is a Typescript project that Preact for the frontend and _server-side rendering_ (custom made).

To use the project you just have to run

```bash shell
# Development
$ npm run dev

# Production
$ npm run build
$ npm run serve
```

Let's see what's inside the `package.json`

```json
...
"scripts": {
    "build:client": "vite build --outDir dist/entry-client",
    "build:ssr": "vite build --ssr client/entry-server.tsx --outDir dist/entry-server",
    "build:server": "esbuild server.ts --bundle --platform=node --format=esm --external:./node_modules/* --outdir=dist/server",
    "build": "run-s build:client build:ssr build:server",
    "dev": "run-s build:server serve:dev",
    "serve:dev": "MODE=development node dist/server/server.js",
    "serve": "node dist/server/server.js"
},
...
```

ma vediamolo meglio come diagramma

![diagram](docs/out/package-json.svg)

- Quando sviluppiamo abbiamo la regola `dev` che prima chiama la regola `build:server` che compila il file `server.ts` che contiene il vero e proprio server in ExpressJS che gestisce tutta l'applicazione. Internamente questo _entrypoint_ usa `server/` in fase di development usa ViteJS 

- Il comando `build` invece prima costruisce il client utilizzando Vite,