Vercel and Netlify deployment in Svelte - Deep Dive

Overview - Vercel and Netlify deployment

What is it?

Vercel and Netlify are platforms that help you put your Svelte website or app on the internet so anyone can visit it. They take your code, build it into a working website, and host it for you automatically. This means you don't have to worry about servers or complicated setups. Both platforms make it easy to update your site by connecting to your code repository and deploying changes quickly.

Why it matters

Without platforms like Vercel and Netlify, sharing your website would require managing servers, configuring hosting, and handling updates manually, which can be hard and time-consuming. These platforms solve this by automating deployment and hosting, letting you focus on building your app. This speeds up development and makes your site reliable and fast for visitors worldwide.

Where it fits

Before learning deployment, you should know how to build a Svelte app locally and use Git for version control. After mastering deployment, you can explore advanced topics like continuous integration, custom domains, serverless functions, and performance optimization on these platforms.

Mental Model

Core Idea

Vercel and Netlify act like smart delivery services that take your Svelte app from your computer and place it live on the internet automatically and reliably.

Think of it like...

Imagine you baked a cake (your Svelte app) at home. Vercel and Netlify are like friendly delivery companies that pick up your cake, package it nicely, and deliver it fresh to your friends' houses (the internet) without you needing to drive or carry it yourself.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ Your Computer │─────▶│ Vercel/Netlify│─────▶│ Visitors' Web │
│ (Svelte code) │      │ (Build & Host)│      │   Browsers    │
└───────────────┘      └───────────────┘      └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Svelte App Basics

Concept: Before deploying, you need a working Svelte app that runs locally.

Create a simple Svelte app using the official template. Run it on your computer with 'npm run dev' to see it in action. This app is your starting point for deployment.

Result

You have a Svelte app running on your local machine, ready to be shared.

Knowing your app works locally ensures deployment issues are not due to app errors but related to hosting or build steps.

2

Foundation

Introduction to Git and Repositories

Concept: Deployment platforms connect to your code stored in Git repositories like GitHub.

Initialize a Git repository in your Svelte project folder. Commit your code and push it to a remote repository on GitHub. This remote repo is what Vercel and Netlify will use to get your code.

Result

Your Svelte app code is safely stored online in a GitHub repository.

Understanding Git and remote repositories is key because deployment platforms watch these repos for changes to trigger automatic updates.

3

Intermediate

Connecting Svelte App to Vercel

🤔Before reading on: Do you think Vercel needs manual build commands or does it detect them automatically? Commit to your answer.

Concept: Vercel can automatically detect Svelte apps and build them with minimal setup.

Sign up on Vercel and connect your GitHub repository. Vercel detects the Svelte app and suggests build commands like 'npm run build' and output folder 'build' or 'public'. Confirm and deploy. Vercel builds your app and hosts it with a live URL.

Result

Your Svelte app is live on the internet with a Vercel-generated URL.

Knowing Vercel auto-detects build settings saves time and reduces errors during deployment.

4

Intermediate

Deploying Svelte App on Netlify

🤔Before reading on: Does Netlify require you to specify build commands and publish directory manually or does it guess? Commit your guess.

Concept: Netlify requires you to specify build commands and publish directory but offers helpful defaults.

Create a Netlify account and link your GitHub repo. Set build command to 'npm run build' and publish directory to 'build' or 'public'. Netlify runs the build, deploys your app, and provides a live URL.

Result

Your Svelte app is accessible online via Netlify's URL.

Understanding Netlify's build and publish settings helps customize deployment and troubleshoot build issues.

5

Intermediate

Using Environment Variables Securely

🤔Before reading on: Do you think environment variables are stored in your code or separately on deployment platforms? Commit your answer.

Concept: Environment variables store sensitive data separately from your code and are injected during build or runtime.

Both Vercel and Netlify let you add environment variables in their dashboard. These variables can hold API keys or secrets your app needs without exposing them in your code repository.

Result

Your app can use secret keys safely without risking exposure in public code.

Knowing environment variables keep secrets safe prevents accidental leaks and security risks.

6

Advanced

Custom Domains and HTTPS Setup

🤔Before reading on: Do you think custom domains require extra payment or are free on Vercel and Netlify? Commit your guess.

Concept: Both platforms allow you to connect your own domain and provide free HTTPS certificates automatically.

Buy a domain from a registrar. In Vercel or Netlify dashboard, add your domain and follow instructions to update DNS records. The platform issues a free SSL certificate so your site is secure with HTTPS.

Result

Your Svelte app is live on your own domain with a secure connection.

Understanding domain setup and HTTPS boosts professionalism and user trust in your deployed app.

7

Expert

Optimizing Deployment with Serverless Functions

🤔Before reading on: Do you think serverless functions run on your computer or on the deployment platform? Commit your answer.

Concept: Serverless functions let you run backend code on Vercel or Netlify without managing servers.

Add serverless functions in your project under the 'api' folder (Netlify) or 'api' directory (Vercel). These functions handle tasks like form submissions or database queries. They deploy alongside your app and run on demand in the cloud.

Result

Your app can perform backend tasks without a separate server, scaling automatically.

Knowing serverless functions extend your app's capabilities without server management unlocks powerful full-stack development.

Under the Hood

When you push code to your Git repository, Vercel or Netlify detect the change and start a build process on their servers. They install dependencies, run your build commands (like 'npm run build'), and generate static files or serverless functions. These files are then placed on a global content delivery network (CDN), which caches them close to users worldwide. When someone visits your site, the CDN quickly serves the files, making your app fast and reliable.

Why designed this way?

These platforms were designed to simplify deployment by automating complex steps like building, hosting, and scaling. Before them, developers had to manually configure servers and CDNs, which was error-prone and slow. By integrating with Git and using CDNs, they provide continuous deployment and fast global delivery with minimal setup.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ Git Push Code │─────▶│ Build Servers │─────▶│ CDN & Hosting │─────▶│ User's Browser│
│ (GitHub Repo) │      │ (Install &    │      │ (Cache & Serve│      │ (Loads Site)  │
│               │      │  Build App)   │      │  Files Globally)│    │               │
└───────────────┘      └───────────────┘      └───────────────┘      └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think Vercel and Netlify host your app on your own computer? Commit yes or no.

Common Belief: People often think deployment platforms run your app from your personal computer or local server.

Reality: Vercel and Netlify host your app on their cloud servers and CDNs, independent of your computer.

Why it matters: Believing this can cause confusion about uptime and availability, leading to frustration when your computer is off but the site should still be live.

Quick: Do you think deployment platforms automatically fix your app's code errors? Commit yes or no.

Common Belief: Some think Vercel or Netlify will fix bugs or errors in their app during deployment.

Reality: These platforms only build and host your code; they do not fix code errors or bugs.

Why it matters: Expecting automatic fixes can delay debugging and cause deployment failures without clear understanding.

Quick: Do you think environment variables are visible in your public code repository? Commit yes or no.

Common Belief: Many believe environment variables set on deployment platforms are included in the public code.

Reality: Environment variables are stored securely on the platform and not exposed in your code repository.

Why it matters: Misunderstanding this can lead to accidental exposure of secrets if developers put sensitive data directly in code.

Quick: Do you think serverless functions run continuously like traditional servers? Commit yes or no.

Common Belief: Some assume serverless functions run all the time like normal backend servers.

Reality: Serverless functions run only when triggered and scale automatically, not continuously.

Why it matters: This misconception can lead to inefficient design or unexpected costs if developers expect persistent server behavior.

Expert Zone

1

Vercel's build cache intelligently skips rebuilding unchanged parts, speeding up deployments significantly for large projects.

2

Netlify allows split testing and branch deploy previews, enabling teams to test changes live before merging to production.

3

Both platforms support edge functions that run code closer to users for ultra-low latency, a subtle but powerful performance boost.

When NOT to use

If your app requires a traditional backend with persistent state, complex databases, or long-running processes, serverless platforms like Vercel and Netlify may not be suitable. Instead, consider dedicated backend services or platforms like AWS, Azure, or DigitalOcean that offer full server control.

Production Patterns

In production, teams use Vercel or Netlify for continuous deployment pipelines connected to Git branches, enabling automatic previews for pull requests. They combine static site generation with serverless functions for dynamic features, and use custom domains with HTTPS for professional branding and security.

Connections

Continuous Integration / Continuous Deployment (CI/CD)

Vercel and Netlify build on CI/CD principles by automating build and deploy on code changes.

Understanding CI/CD helps grasp how deployment platforms automate testing and delivery, making releases faster and safer.

Content Delivery Networks (CDN)

Both platforms use CDNs to serve your app files quickly worldwide.

Knowing how CDNs cache and deliver content explains why deployed sites load fast regardless of visitor location.

Postal Delivery Systems

Like postal services deliver packages from senders to recipients, deployment platforms deliver your app from your code to users.

This cross-domain connection shows how complex logistics and automation principles apply both to software deployment and physical delivery.

Common Pitfalls

#1 Not specifying the correct build output directory causes deployment failures.

Wrong approach:

In Netlify settings, setting publish directory to 'public' instead of 'build'.

Correct approach:

Set publish directory to 'build' where Svelte outputs the compiled files.

Root cause:

Confusing Svelte's output folder leads to serving empty or wrong files, breaking the deployed site.

#2 Committing sensitive API keys directly in code instead of using environment variables.

Wrong approach:

const API_KEY = 'my-secret-key'; // in source code

Correct approach:

Use environment variables set in Vercel/Netlify dashboard and access via import.meta.env.

Root cause:

Lack of understanding about secure secret management risks exposing keys publicly.

#3 Forgetting to install dependencies before build causes build errors.

Wrong approach:

Skipping 'npm install' step in build command, just running 'npm run build'.

Correct approach:

Ensure build command includes dependency installation or rely on platform's automatic install step.

Root cause:

Assuming dependencies are already present on build server leads to failed builds.

Key Takeaways

Vercel and Netlify automate building and hosting your Svelte app, making deployment simple and fast.

Connecting your Git repository to these platforms enables continuous deployment with every code change.

Proper configuration of build commands, output directories, and environment variables is essential for successful deployment.

Both platforms provide free HTTPS and custom domain support, improving security and professionalism.

Advanced features like serverless functions and edge computing extend your app's capabilities without managing servers.

Practice

1. What is the main purpose of using Vercel or Netlify with a Svelte app?

easy

A. To write Svelte code faster using special editors

B. To easily deploy and host the app online with automatic updates

C. To convert Svelte code into plain HTML manually

D. To debug Svelte apps without running them

Solution

1. Step 1: Understand deployment platforms

   Vercel and Netlify are services that host web apps and update them automatically when code changes.

2. Step 2: Connect with Svelte app workflow

   They connect to your Git repo, build your Svelte app, and publish it online without manual steps.

3. Final Answer:

   To easily deploy and host the app online with automatic updates -> Option B

4. Quick Check:

   Deployment = Easy hosting and updates [OK]

Hint: Think: Vercel/Netlify = online hosting + auto updates [OK]

Common Mistakes:

• Confusing deployment with coding or debugging tools
• Thinking they convert code manually
• Assuming they only help with writing code

2. Which of the following is the correct step to deploy a Svelte app on Netlify?

easy

A. Set build command to 'npm run start' and publish directory to 'public'

B. Upload your Svelte files manually without any build settings

C. Connect Git repo and set build command to 'npm run build' with publish directory 'public/build'

D. Connect your Git repository, set build command to 'npm run build', and publish directory to 'build'

Solution

1. Step 1: Identify Netlify build settings for Svelte

   Netlify needs the build command 'npm run build' to compile the app and the publish directory where the built files are stored.

2. Step 2: Know Svelte's default build output

   Svelte outputs built files in 'public/build', so this should be the publish directory.

3. Final Answer:

   Connect Git repo and set build command to 'npm run build' with publish directory 'public/build' -> Option C

4. Quick Check:

   Netlify build = 'npm run build' + 'public/build' [OK]

Hint: Remember: build command builds, publish points to output folder [OK]

Common Mistakes:

• Using 'npm run start' instead of 'npm run build'
• Setting publish directory to 'build' instead of 'public/build'
• Uploading files manually without build

3. Given this Vercel deployment setting for a Svelte app:
Build Command: npm run build
Output Directory: build
What will happen when you push new code to Git?

medium

A. Vercel will build the app and deploy files from the 'build' folder

B. Vercel will fail because the output directory should be 'public/build'

C. Vercel will deploy the app but with old code only

D. Vercel will skip build and deploy source files directly

Solution

1. Step 1: Understand Vercel build and output settings

   Vercel runs the build command to create production files, then deploys from the specified output directory.

2. Step 2: Check if 'build' is valid output directory

   In many Svelte setups, the build output is in 'build' or 'public/build'. If 'build' is correct, deployment succeeds.

3. Final Answer:

   Vercel will build the app and deploy files from the 'build' folder -> Option A

4. Quick Check:

   Build + correct output folder = successful deploy [OK]

Hint: Build command + correct output folder = deploy success [OK]

Common Mistakes:

• Assuming output directory must be 'public/build' always
• Thinking Vercel deploys source files without build
• Confusing build failure with deployment failure

4. You deployed a Svelte app on Netlify but the site shows a 404 error after deployment. What is the most likely cause?

medium

A. The build command is set to 'npm run start' instead of 'npm run build'

B. The Git repository is empty and has no code

C. You forgot to connect your Git repo to Netlify

D. The publish directory is set incorrectly, so Netlify can't find the built files

Solution

1. Step 1: Analyze 404 error cause on Netlify

   A 404 after deployment usually means Netlify can't find the files to serve, often due to wrong publish directory.

2. Step 2: Check common misconfigurations

   If the publish directory is wrong, Netlify deploys an empty or wrong folder, causing 404 errors.

3. Final Answer:

   The publish directory is set incorrectly, so Netlify can't find the built files -> Option D

4. Quick Check:

   404 on deploy = wrong publish directory [OK]

Hint: 404 after deploy? Check publish directory first [OK]

Common Mistakes:

• Assuming empty Git repo causes 404 (usually build fails first)
• Forgetting to connect Git repo (would block deploy)
• Confusing build command with publish directory

5. You want to deploy a Svelte app on Vercel with these requirements:
- Use GitHub repo
- Automatically rebuild on push
- Serve from 'public' folder
Which setup is correct?

hard

A. Connect GitHub repo, set build command 'npm run build', output directory 'public'

B. Connect GitHub repo, set build command 'npm run dev', output directory 'public/build'

C. Connect GitHub repo, set build command 'npm run build', output directory 'public/build'

D. Connect GitHub repo, no build command, output directory 'public'

Solution

1. Step 1: Understand Vercel deployment with GitHub

   Connecting GitHub repo enables automatic rebuilds on push. The build command must create production files.

2. Step 2: Identify correct build command and output folder

   'npm run build' builds the app. To serve from 'public' folder as required, output directory must be 'public'.

3. Final Answer:

   Connect GitHub repo, set build command 'npm run build', output directory 'public' -> Option A

4. Quick Check:

   GitHub + build + 'public' output folder = proper deploy [OK]

Hint: Build with 'npm run build' and output 'public' [OK]

Common Mistakes:

• Using 'npm run dev' which is for local development
• Setting output directory to 'public/build' instead of 'public'
• Skipping build command causing no production files