Vercel and Netlify deployment in Svelte - Mini Project: Build & Apply

Deploying a Svelte App on Vercel and Netlify

📖 Scenario: You have created a simple Svelte app that shows a welcome message. Now you want to share it with friends by putting it online using popular hosting services Vercel and Netlify.This project will guide you step-by-step to prepare your Svelte app and deploy it on both Vercel and Netlify.

🎯 Goal: Build a basic Svelte app and deploy it successfully on Vercel and Netlify so anyone can visit your app's website.

📋 What You'll Learn

Create a basic Svelte app with a welcome message

Add a configuration file for deployment

Build the app for production

Deploy the app on Vercel and Netlify using their configuration

💡 Why This Matters

🌍 Real World

Deploying web apps online is essential to share your work with others. Vercel and Netlify are popular platforms that make deployment easy and fast.

💼 Career

Knowing how to deploy apps on Vercel and Netlify is valuable for frontend developers and web engineers to deliver projects to clients and users.

1

Create a basic Svelte app

Create a file called App.svelte with a <h1> tag that contains the text Welcome to My Svelte App.

Svelte

Welcome to My Svelte App

Hint

Use a simple <h1> tag inside App.svelte to show the welcome message.

2

Add deployment configuration

Create a file called vercel.json with the content {"builds": [{"src": "package.json", "use": "@vercel/static-build"}], "routes": [{"src": "/(.*)", "dest": "/index.html"}]} to configure Vercel deployment.

Svelte

  // No script needed for this step


Welcome to My Svelte App

// Create vercel.json with deployment settings
// Your code here

Hint

This JSON file tells Vercel how to build and serve your app. Make sure to include package.json as the source and route all requests to index.html.

3

Build the Svelte app for production

Add a script in package.json called build with the value vite build to prepare your app for deployment.

Svelte

{
  "scripts": {
    // Add build script here
    // Your code here
  }
}

Hint

The build script runs Vite to create optimized files for deployment.

4

Add Netlify configuration file

Create a file called netlify.toml with the content [build] publish = "dist" command = "npm run build" to configure Netlify deployment.

Svelte

[build]
# Add publish directory and build command
# Your code here

Hint

This file tells Netlify where to find the built files and how to build your app.