# 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
```