svelte

Yleiskatsaus

Svelte on moderni JavaScript-kehys, joka siirtää työn selaimesta käännösaikaan ja tuottaa erittäin optimoitua vanilla JavaScriptiä. Yhdessä SvelteKitin kanssa se tarjoaa täyden pinon kehyksen nopeiden ja tehokkaiden verkkosovellusten rakentamiseen.

Pikaopas

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Paikallinen kehitys Dockerilla

Jos sinulla ei ole Node.js:ää asennettuna paikallisesti, voit käyttää Dockeria Svelte-komentojen suorittamiseen. Projekti sisältää Dockerfilen tuotantorakennuksia varten.

Vaatimukset

Asenna Docker Desktop käyttöjärjestelmällesi (Windows, Mac tai Linux).

Komentojen suorittaminen Dockerilla

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:20-alpine npm run dev

# Build for production
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm run build

Projektin rakenne

Tiedostojen sijainnin ymmärtäminen:

├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Home page component
│   │   └── +layout.svelte        # Root layout (wraps all pages)
│   ├── lib/
│   │   ├── index.js              # Shared exports
│   │   └── assets/               # Static assets (images, etc.)
│   ├── app.html                  # HTML template
│   └── app.css                   # Global styles (Tailwind)
├── static/                       # Public static files
├── svelte.config.js              # SvelteKit configuration
├── vite.config.js                # Vite build configuration
├── package.json                  # Dependencies and scripts
└── Dockerfile                    # Docker build configuration
        

Yleiset tehtävät

Uuden sivun luominen

Luo uusi kansio hakemistoon src/routes/ ja lisää siihen +page.svelte-tiedosto:

# Create an "about" page at /about
mkdir src/routes/about
touch src/routes/about/+page.svelte

Kansion nimestä tulee automaattisesti URL-polku.

Komponentin luominen

Luo .svelte-tiedostoja hakemistoon src/lib/ uudelleenkäytettäville komponenteille:

<!-- src/lib/Button.svelte -->
<script>
  let { label, onclick } = $props();
</script>

<button class="bg-blue-500 text-white px-4 py-2 rounded" {onclick}>
  {label}
</button>

Komponenttien tuominen

Käytä $lib-aliasta tuodaksesi lib-kansiosta:

<script>
  import Button from '$lib/Button.svelte';
</script>

<Button label="Click me" onclick={() => alert('Hello!')} />

Tailwind CSS:n käyttö

Tailwind CSS 4 on esikonfiguroitu. Käytä luokkia suoraan komponenteissasi:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Tilan hallinta Runesilla (Svelte 5)

Svelte 5 käyttää runeja reaktiivisuuteen:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Count: {count} (doubled: {doubled})
</button>

Hyödyllisiä komentoja

Vianmääritys

Käyttöönoton työnkulku

Joka kerta kun lähetät koodia Gitiin, sovelluksesi rakennetaan ja otetaan käyttöön automaattisesti:

Käyttöönotetun sovelluksesi URL noudattaa tätä muotoa:

https://<your-subdomain>-<repo-name>.<session-domain>

Esimerkki: https://student01-module-a.demo.nstrim.app