Installing Svelte and Environment Setup

# CHAPTER 2

Installing Svelte and Environment Setup #

1. Chapter Introduction #

2. Learning Objectives #

• Install Node.js and verify the installation.

• Create a Svelte project using the official Vite template.

• Understand the project structure at a high level.

• Start the development server and view the app in the browser.

• Configure VS Code with essential Svelte extensions.

3. Step 1: Install Node.js #

1. 1. Visit nodejs.org and download the LTS version.

1. 2. Install using default settings.

1. 3. Verify in your terminal:

node -v    # Should show v18.x or higher
npm -v     # Should show 9.x or higher

4. Step 2: Create a Svelte Project #

# Create a new Svelte project
npm create vite@latest my-svelte-app -- --template svelte

# Navigate into the project folder
cd my-svelte-app

# Install all dependencies
npm install

# Start the development server
npm run dev

Open your browser to http://localhost:5173/ — you will see the default Svelte welcome page!

5. Alternative: SvelteKit Project #

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install
npm run dev

During setup, the CLI asks:

• App template? Choose "Skeleton project" for a clean start.

• TypeScript? Choose based on preference (JavaScript for beginners).

• ESLint/Prettier? Yes — great for code quality.

6. Step 3: VS Code Setup #

• Svelte for VS Code (by Svelte team) — syntax highlighting, autocomplete, error checking in .svelte files.

• Prettier — consistent code formatting.

• ESLint — code quality checks.

7. Project Folder Overview #

my-svelte-app/
├── public/              ← Static assets (favicon, images)
├── src/
│   ├── lib/             ← Reusable components and utilities
│   ├── App.svelte        ← Root component
│   └── main.js           ← Entry point
├── index.html           ← Single HTML file (SPA shell)
├── vite.config.js       ← Vite configuration
└── package.json         ← Dependencies and scripts

8. Key package.json Scripts #

{
  "scripts": {
    "dev": "vite",           // Start dev server (hot reload)
    "build": "vite build",   // Build for production
    "preview": "vite preview" // Preview production build locally
  }
}

9. Your First Edit #

<!-- src/App.svelte -->
<script>
  let message = &#039;My First Svelte App!';
</script>

<main>
  <h1>{message}</h1>
  <p>Edit me and watch me update live! ⚡</p>
</main>

<style>
  main {
    text-align: center;
    padding: 2rem;
    font-family: sans-serif;
  }
  h1 { color: #ff3e00; }
</style>

10. Common Mistakes #

• Running npm run dev before npm install: The node_modules folder must exist. Always run npm install first after cloning or creating a project.

• Opening index.html directly in the browser: Svelte components are compiled by Vite. You must run npm run dev and access via localhost, not by opening the file directly.

11. MCQs with Answers #

12. Interview Questions #

• Q: Why does Svelte use Vite instead of older tools like Webpack?

• Q: Explain the difference between npm run dev and npm run build.

13. Summary #

14. Next Chapter Recommendation #