Vercel and Netlify deployment in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the build command for Vercel deployment in vercel.json.

Svelte

{
  "builds": [
    { "src": "package.json", "use": "[1]" }
  ]
}

Drag options to blanks, or click blank then click option'

A@vercel/node

B@vercel/python

C@vercel/svelte

D@vercel/static-build

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a server runtime builder instead of static build.

Vercel uses @vercel/static-build to build static sites like Svelte apps.

2fill in blank

medium

Complete the netlify.toml to set the build command for Netlify deployment.

Svelte

[build]
command = "[1]"
publish = "build"

Drag options to blanks, or click blank then click option'

Anpm run start

Bnpm run build

Cnpm install

Dnpm run dev

Attempts:

3 left

💡 Hint

Common Mistakes

Using start or dev commands instead of build.

Netlify needs the build command to generate the production files, which is npm run build.

3fill in blank

hard

Fix the error in the Netlify publish directory setting to correctly point to the Svelte build output.

Svelte

[build]
publish = "[1]"

Drag options to blanks, or click blank then click option'

Asrc

Bdist

Cbuild

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Using source or public folders instead of build.

SvelteKit outputs the production files to the build folder by default for Netlify.

4fill in blank

hard

Fill both blanks to configure environment variables for Vercel deployment in vercel.json.

Svelte

{
  "env": {
    "API_URL": "[1]",
    "NODE_ENV": "[2]"
  }
}

Drag options to blanks, or click blank then click option'

Ahttps://api.example.com

Bproduction

Cdevelopment

Dhttp://localhost:3000

Attempts:

3 left

💡 Hint

Common Mistakes

Using localhost URL or development environment in production.

For deployment, API_URL should point to the live API and NODE_ENV should be production.

5fill in blank

hard

Fill all three blanks to complete the SvelteKit adapter import and usage for Netlify deployment in svelte.config.js.

Svelte

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

export default {
  kit: {
    adapter: adapter({
      [1]: true,
      [2]: true,
      [3]: 10
    })
  }
};

Drag options to blanks, or click blank then click option'

Asplit

Bedge

Dtimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing option names or values.

The adapter options include split: true to split functions, edge: true to specify edge functions, and timeout: 10 seconds.