You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.2 KiB
Markdown
38 lines
1.2 KiB
Markdown
11 months ago
|
# 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,
|