forked from cms/tibi-svelte-starter
readme
This commit is contained in:
parent
61ddf2e5d0
commit
b8810b8bcb
35
README.md
35
README.md
@ -1,3 +1,36 @@
|
|||||||
# wmbasic-svelte-starter
|
# wmbasic-svelte-starter
|
||||||
|
|
||||||
Starter Kit für SPAs mit Svelte und WMBasic-Backend ink. SSR
|
Starter Kit für SPAs(s) `;)` mit Svelte und WMBasic-Backend ink. 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 WMBasic-API SSR-Hook (server side renering) 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
|
||||||
|
### Abhängigkeiten laden
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Entwickeln
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bauen
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# moderne Browser
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# alte Browser (IE11)
|
||||||
|
yarn build:legacy
|
||||||
|
|
||||||
|
# serverseitiges Rendering
|
||||||
|
yarn build:server
|
||||||
|
```
|
||||||
|
@ -9,6 +9,4 @@ meta:
|
|||||||
collections:
|
collections:
|
||||||
- !include collections/content.yml
|
- !include collections/content.yml
|
||||||
- !include collections/contact_form.yml
|
- !include collections/contact_form.yml
|
||||||
- !include collections/cache.yml
|
|
||||||
- !include collections/webhook.yml
|
|
||||||
- !include collections/ssr.yml
|
- !include collections/ssr.yml
|
||||||
|
@ -13,6 +13,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
@import "./../css/main.less";
|
||||||
h1 {
|
h1 {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
0
src/css/main.less
Normal file
0
src/css/main.less
Normal file
Loading…
Reference in New Issue
Block a user