89 lines
3.1 KiB
Markdown
89 lines
3.1 KiB
Markdown
# tibi-starter
|
|
|
|
Starter Kit für SPAs(s) `;)` mit Svelte und TibiCMS inkl. SSR
|
|
|
|
## Neues Projekt starten
|
|
|
|
Nachdem du dieses Repository als Vorlage geklont hast, passe die Platzhalter an dein Projekt an:
|
|
|
|
1. **`.env`**: Ersetze `__PROJECT_NAME__` mit deinem Projektnamen (z.B. `mein-projekt`).
|
|
Die folgenden URLs werden automatisch abgeleitet:
|
|
- `CODING_URL=https://mein-projekt.code.testversion.online`
|
|
- `STAGING_URL=https://dev-mein-projekt.staging.testversion.online`
|
|
2. **`frontend/spa.html`** / **`api/templates/spa.html`**: Ersetze `__PROJECT_TITLE__` mit dem Seitentitel.
|
|
3. **`api/config.yml.env`**: Passe `ADMIN_TOKEN`, Datenbank-Name und weitere Secrets an.
|
|
4. **`docker-compose-local.yml`**: Suche nach `project_name__` und ersetze mit deinem Projektnamen (Container-Benennung).
|
|
5. **Demo-Inhalte entfernen**: Die Demo-Seite besteht aus diesen Dateien, die für ein echtes Projekt entfernt/ersetzt werden können:
|
|
- `frontend/src/blocks/` — Block-Komponenten (HeroBlock, FeaturesBlock, RichtextBlock, AccordionBlock, ContactFormBlock, BlockRenderer, NotFound)
|
|
- `frontend/mocking/content.json` — Demo-Mockdaten für Content
|
|
- `frontend/mocking/navigation.json` — Demo-Mockdaten für Navigation
|
|
- `api/collections/content.yml` — Content-Collection-Konfiguration
|
|
- `api/collections/navigation.yml` — Navigation-Collection-Konfiguration
|
|
- `tests/e2e/demo.spec.ts` — Demo-E2E-Tests
|
|
- `video-tours/tours/demo-showcase.tour.ts` — Demo-Video-Tour
|
|
6. **`frontend/src/App.svelte`**: Passe Header, Footer und Content-Loading an dein Datenmodell an.
|
|
|
|
```sh
|
|
# Platzhalter ersetzen (Beispiel für Linux/Mac):
|
|
sed -i 's/__PROJECT_NAME__/mein-projekt/g' .env
|
|
sed -i 's/__PROJECT_TITLE__/Mein Projekt/g' frontend/spa.html api/templates/spa.html
|
|
```
|
|
|
|
## 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 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/> |
|
|
| Maildev | <https://tibi-svelte-starter-maildev.code.testversion.online/> |
|
|
|
|
### Bauen
|
|
|
|
```sh
|
|
# moderne Browser
|
|
yarn build
|
|
|
|
# alte Browser (IE11)
|
|
yarn build:legacy
|
|
|
|
# serverseitiges Rendering
|
|
yarn build:server
|
|
|
|
# Admin-Module
|
|
yarn build:admin
|
|
```
|