> DOCUMENTATION

SvelteKit Installation Guide

Get your SvelteKit template running with SSR, file-based routing, and blazing fast builds.

> Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.0+ — Download here
npm (comes with Node.js) or yarn or pnpm
A code editor like VS Code with Svelte extension (recommended)
A modern web browser (Chrome, Firefox, Safari, or Edge)

To verify your installation:

terminal

node --version
npm --version

> Installation Steps

Step 1: Download Your Template

After downloading your template, extract the .zip file to your projects folder:

terminal

# Navigate to your projects directory
cd ~/Projects

# Extract the template (replace with your actual filename)
unzip aurora_spectrum_ai-technology-aurora-svelte.zip
cd aurora_spectrum_ai-technology-aurora

Package Contents:

src/routes/ — SvelteKit pages (+page.svelte per route)
src/lib/components/ — Reusable UI components (Text, Button, Image, Link, etc.)
src/lib/data/ — Content data file (content.js)
src/app.css — Global CSS
src/app.html — HTML template
static/ — Static assets folder
svelte.config.js — SvelteKit configuration
vite.config.js — Vite configuration
tailwind.config.js — Tailwind CSS settings
package.json — Project dependencies

Step 2: Install Dependencies

Install all required packages using your preferred package manager:

Using npm (recommended):

terminal

npm install

Using yarn:

terminal

yarn install

Using pnpm (fastest):

terminal

pnpm install

What gets installed:

• SvelteKit 2.x
• Svelte 4.x
• Vite (build tool)
• Tailwind CSS
• Lucide Svelte (icons)
• TypeScript (optional)

Installation time: 1-2 minutes

Step 3: Start the Development Server

Launch the SvelteKit development server:

terminal

npm run dev

Or with yarn/pnpm: yarn dev / pnpm dev

Expected output:

VITE v5.0.0  ready in 300 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.x:5173/
➜  press h + enter to show help

Features enabled:

• Hot Module Replacement (HMR)
• Full SSR development
• Automatic code splitting
• File-based routing
• Zero-config deployment ready

Step 4: View Your Site

Open your browser and navigate to:

http://localhost:5173

Your SvelteKit site is now running! Any changes you make will automatically appear in the browser.

> Building for Production

Create an optimized production build:

terminal

npm run build

This process:

1. Compiles Svelte components
2. Pre-renders static pages
3. Optimizes JavaScript bundles
4. Generates adapter-specific output

Preview the production build locally:

terminal

npm run preview

> Deployment Options

Option 1: Vercel (Recommended)

Easiest deployment — takes 2 minutes:

1. Install the Vercel adapter:

terminal

npm install -D @sveltejs/adapter-vercel

2. Update svelte.config.js:

svelte.config.js

import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter()
  }
};

3. Push to GitHub and import in Vercel

Option 2: Netlify

1. Install the Netlify adapter:

terminal

npm install -D @sveltejs/adapter-netlify

2. Update svelte.config.js:

svelte.config.js

import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter()
  }
};

Option 3: Static Export (for any static hosting)

1. Install the static adapter:

terminal

npm install -D @sveltejs/adapter-static

2. Update svelte.config.js:

svelte.config.js

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      fallback: 'index.html' // for SPA mode
    })
  }
};

3. Add prerender to +layout.js:

src/routes/+layout.js

export const prerender = true;

4. Build and deploy build/ folder anywhere

Option 4: Node.js Server

Default adapter for Node.js hosting:

terminal

npm install -D @sveltejs/adapter-node

Run with:

terminal

npm run build
node build

> Customization Guide

Changing Colors & Branding

Edit tailwind.config.js:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0891B2',
        secondary: '#F97316',
        accent: '#8B5CF6',
      },
    },
  },
}

Adding Pages (File-Based Routing)

Create new pages in src/routes/:

src/routes/
├── +page.svelte          # / (home)
├── +layout.svelte        # shared layout
├── about/
│   └── +page.svelte      # /about
├── services/
│   └── +page.svelte      # /services (new!)
└── blog/
    ├── +page.svelte      # /blog
    └── [slug]/
        └── +page.svelte  # /blog/:slug (dynamic)

Simply create a folder with a +page.svelte file to add a new route!

Creating Svelte Components

Create components in src/lib/components/:

Button.svelte

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
  
  const styles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };
</script>

<button
  class="px-4 py-2 rounded-lg font-medium {styles[variant]}"
  on:click
>
  <slot />
</button>

Import with: import Button from '$lib/components/Button.svelte';

Using Svelte Stores

Create reactive stores in src/lib/stores/:

counter.ts

// src/lib/stores/counter.ts
import { writable } from 'svelte/store';

export const count = writable(0);

export function increment() {
  count.update(n => n + 1);
}

export function reset() {
  count.set(0);
}

// Usage in component:
// <script>
//   import { count, increment } from '$lib/stores/counter';
// </script>
// <button on:click={increment}>{$count}</button>

Data Loading

Load data server-side with +page.server.ts:

+page.server.ts

// src/routes/blog/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  const posts = await fetchPosts(); // Your data fetching logic
  
  return {
    posts
  };
};

// Access in +page.svelte:
// export let data;
// {#each data.posts as post}...{/each}

> Troubleshooting

Error: Port 5173 is already in use

Option 1: Use a different port

terminal

npm run dev -- --port 3000

Option 2: Kill the existing process

terminal

# macOS/Linux
lsof -ti:5173 | xargs kill -9

Error: Cannot find module '$lib/...'

Verify file exists in src/lib/
Check tsconfig.json has the $lib alias configured
Restart the dev server after creating new files in lib

Error: Hydration failed

Common cause: Using browser-only APIs during SSR

terminal

<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';
  
  let width = 0;
  
  onMount(() => {
    // Only runs in browser
    width = window.innerWidth;
  });
  
  // Or check browser directly
  $: if (browser) {
    // browser-only code
  }
</script>

Error: adapter-auto could not determine your deployment platform

Install a specific adapter for your platform
Update svelte.config.js to use the adapter

> File Structure Reference

your-template/
├── src/
│   ├── routes/                 # Pages (file-based routing)
│   │   ├── +page.svelte        # Home page (/)
│   │   ├── +layout.svelte      # Root layout
│   │   ├── +error.svelte       # Error page
│   │   ├── about/
│   │   │   └── +page.svelte    # /about
│   │   └── contact/
│   │       └── +page.svelte    # /contact
│   ├── lib/                    # Shared code ($lib alias)
│   │   ├── components/         # Reusable components
│   │   │   ├── Header.svelte
│   │   │   └── Footer.svelte
│   │   └── stores/             # Svelte stores
│   └── app.html               # HTML template
├── static/                    # Static assets
│   ├── images/
│   └── favicon.png
├── svelte.config.js          # SvelteKit configuration
├── vite.config.ts            # Vite configuration
├── tailwind.config.js        # Tailwind CSS configuration
└── package.json              # Dependencies & scripts

> Available Scripts

Command	Description
`npm run dev`	Start development server (port 5173)
`npm run build`	Create production build
`npm run preview`	Preview production build locally
`npm run check`	Run svelte-check for type errors

> Additional Resources

SvelteKit Documentation

Official SvelteKit docs and guides

Svelte Documentation

Learn Svelte fundamentals

Svelte Tutorial

Interactive learning experience

Tailwind CSS Docs

Utility-first CSS framework

Estimated Setup Time: 3-5 minutes | Deployment Time: 2-5 minutes

Next Steps: Customize your content, deploy, and launch.

← Back to Installation Guides Next.js Guide React Guide Vue.js Guide