svelte

Complete deployment guide for svelte on NStrim

Overview

Svelte is a modern JavaScript framework that shifts work from the browser to compile time, producing highly optimized vanilla JavaScript. Combined with SvelteKit, it provides a full-stack framework for building fast, efficient web applications.

Before You Start

Make sure you have your dashboard open - you'll need the Git credentials displayed there. This template includes Tailwind CSS 4 for styling and uses Svelte 5 with runes.

Quick Start

Create Repository from Template

On your dashboard, go to the Tools & Deployment tab. Click the "New Repository" button, select the Svelte template from the dropdown, enter a repository name and subdomain, then click "Create Repository".

Clone Your Repository

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

Install Dependencies

npm install

Start Development Server

npm run dev

Open http://localhost:4200 in your browser.

Build & Push

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

Every push to Git automatically deploys your application. Check your Module Work URL on the dashboard to see your live site.

Local Development with Docker

If you don't have Node.js installed locally, you can use Docker to run Svelte commands. The project includes a Dockerfile for production builds.

What is Docker?

Docker creates isolated "containers" with all the software you need (Node.js, npm) without installing them on your computer. Think of it like a lightweight virtual machine.

Prerequisites

Install Docker Desktop for your operating system (Windows, Mac, or Linux).

Running Commands with Docker

# 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

Note

Docker is optional for local development. The NStrim platform handles deployment automatically - you only need Docker if you want to run commands locally without Node.js installed.

Project Structure

Understanding where files are located:

├── 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

Common Tasks

Creating a New Page

Create a new folder in src/routes/ with a +page.svelte file:

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

The folder name becomes the URL path automatically.

Creating a Component

Create .svelte files in src/lib/ for reusable components:

<!-- 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>

Importing Components

Use the $lib alias to import from the lib folder:

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

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

Using Tailwind CSS

Tailwind CSS 4 is pre-configured. Use classes directly in your components:

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

State Management with Runes (Svelte 5)

Svelte 5 uses runes for reactivity:

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

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

Useful Commands

npm run dev Start development server (port 4200)

npm run build Build for production

npm run preview Preview production build locally

npm test Run unit tests with Vitest

npm run format Format code with Prettier

npm run lint Check code style and errors

Troubleshooting

npm install fails with permission errors

Cause: Permission issues with npm cache or node_modules.

Solution: Delete node_modules folder and package-lock.json, then run npm install again.

Port 4200 already in use

Cause: Another process is using port 4200.

Solution: Use a different port: npm run dev -- --port 3000 or stop the other process.

Module not found errors

Cause: Dependencies not installed or corrupted.

Solution: Run npm install to install all dependencies.

$state or $derived not working

Cause: Using Svelte 4 syntax in a Svelte 5 project.

Solution: Svelte 5 uses runes. Replace let count = 0 with let count = $state(0) for reactive state.

Build fails after deployment

Cause: Build errors or missing dependencies.

Solution: Run npm run build locally first to check for errors before pushing.

Deployment Workflow

Every time you push code to Git, your application is automatically built and deployed:

Code Change git push npm run build Deploy static files Live!

Your deployed application URL follows this format:

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

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

For more information, visit the official SvelteKit Documentation.