generated from cms/tibi-svelte-starter
85 lines
1.8 KiB
Markdown
85 lines
1.8 KiB
Markdown
|
# tibi-starter
|
||
|
|
|
||
|
|
Starter Kit für SPAs(s) `;)` mit Svelte und TibiCMS inkl. SSR
|
||
|
|
|
||
|
|
## Wozu?
|
||
|
|
|
||
|
|
Via Svelte wird eine SPA (Single-Page-App) programmiert. Dazu wird der Code einmal für den Browser aufgebreitet und außerdem für den Server kompiliert und transpiliert. Der Server-Code wird in einem tibi-server SSR-Hook (server side rendering) eingebunden und generiert dort fertiges HTML anhand der aktuelle Route für SEO und optimierte Ladezeiten.
|
||
|
|
|
||
|
|
Die Navigation innerhalb der APP im Browser löst dagegen nur API-Aufrufe aus ohne jedesmal einen SSR-Prozess anzustoßen.
|
||
|
|
|
||
|
|
Um die SSR-Last so gering wie möglich zu halten, wurde ein Caching in der "ssr"-Collection der API implementiert.
|
||
|
|
|
||
|
|
## Toolchain
|
||
|
|
|
||
|
|
### git
|
||
|
|
|
||
|
|
nach `git clone ...`
|
||
|
|
|
||
|
|
```sh
|
||
|
|
git lfs install
|
||
|
|
git lfs pull
|
||
|
|
```
|
||
|
|
|
||
|
|
### Abhängigkeiten laden
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn install
|
||
|
|
```
|
||
|
|
|
||
|
|
### Entwickeln mit dev-Webserver
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn start
|
||
|
|
```
|
||
|
|
|
||
|
|
oder mit abweichender API für "/api"-Proxy
|
||
|
|
|
||
|
|
```sh
|
||
|
|
API_BASE=https://login.tibicms.de/api/v1_/__NAMESPACE__ yarn start
|
||
|
|
```
|
||
|
|
|
||
|
|
### Entwickeln mit externem Webserver (z.B. vscode live server)
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn dev
|
||
|
|
```
|
||
|
|
|
||
|
|
### Entwickeln auf dem Code-Server mit Docker Compose Stack
|
||
|
|
|
||
|
|
```sh
|
||
|
|
make docker-start
|
||
|
|
# oder
|
||
|
|
make docker-up
|
||
|
|
make docker-down
|
||
|
|
|
||
|
|
# "make help" zeigt alle Kommandos
|
||
|
|
```
|
||
|
|
|
||
|
|
| UI | URL |
|
||
|
|
| --- | --- |
|
||
|
|
| Website | https://tibi-svelte-starter.code.testversion.online/ |
|
||
|
|
| Tibi Admin | https://tibi-svelte-starter-tibiadmin.code.testversion.online/ |
|
||
|
|
| Admin Mongo | https://tibi-svelte-starter-adminmongo.code.testversion.online/ |
|
||
|
|
| Maildev | https://tibi-svelte-starter-maildev.code.testversion.online/ |
|
||
|
|
|
||
|
|
### Testen
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn build:istanbul # instrumentiert Code für coverage-Report
|
||
|
|
yarn cy:docker:run # oder mit Xserver und UI cy:docker:open
|
||
|
|
```
|
||
|
|
|
||
|
|
### Bauen
|
||
|
|
|
||
|
|
```sh
|
||
|
|
# moderne Browser
|
||
|
|
yarn build
|
||
|
|
|
||
|
|
# alte Browser (IE11)
|
||
|
|
yarn build:legacy
|
||
|
|
|
||
|
|
# serverseitiges Rendering
|
||
|
|
yarn build:server
|
||
|
|
```
|