Vercel and Netlify deployment in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you deploy a Svelte app to Vercel without a build script?

You deploy a Svelte app to Vercel but forget to add a build script in package.json. What will Vercel do?

A Vercel will fail the deployment with a build error because it cannot find a build script.

B Vercel will deploy the app successfully using the default Svelte build process.

C Vercel will deploy the app but serve the source files without building.

D Vercel will automatically add a build script and deploy the app.

💡 Hint

Think about what Vercel needs to build your app.

Vercel requires a build script to know how to build your app. Without it, the deployment fails.

📝 Syntax

intermediate

Which netlify.toml config correctly sets the build command for a SvelteKit app?

Choose the correct netlify.toml snippet to build a SvelteKit app on Netlify.

A

"tuptuo/tik-etlevs." = hsilbup
"dliub nur mpn" = dnammoc
]dliub[

B

[build]
command = "svelte-kit build"
publish = "build"

C

[build]
command = "npm run build"
publish = "public"

D

[build]
command = "npm run build"
publish = ".svelte-kit/output"

💡 Hint

Where does SvelteKit output the built files by default?

With @sveltejs/adapter-netlify, SvelteKit outputs the built files to the .svelte-kit/output directory. The publish directory must point there.

🔧 Debug

advanced

Why does the deployed Svelte app on Netlify show a blank page?

You deployed your Svelte app to Netlify, but the page is blank with no errors. What is the most likely cause?

A The app is missing a <code>package.json</code> file, so dependencies are not installed.

B The <code>publish</code> directory in <code>netlify.toml</code> is set incorrectly, so static files are missing.

C Netlify does not support Svelte apps, so it cannot serve the files.

D The app uses server-side rendering, which Netlify cannot handle.

💡 Hint

Check where your built files are and what Netlify serves.

If the publish directory is wrong, Netlify serves an empty folder, causing a blank page.

🧠 Conceptual

advanced

How does Vercel handle serverless functions in a SvelteKit app deployment?

When deploying a SvelteKit app with serverless functions to Vercel, how are these functions managed?

A Vercel automatically detects and deploys serverless functions from the <code>api</code> folder as separate serverless endpoints.

B Serverless functions must be manually configured in Vercel dashboard to work with SvelteKit.

C Vercel does not support serverless functions in SvelteKit apps; you must use a separate backend.

D Serverless functions are bundled into the client-side JavaScript and run in the browser.

💡 Hint

Think about how Vercel treats API routes.

Vercel detects serverless functions in specific folders and deploys them as endpoints automatically.

❓ state_output

expert

What is the effect of environment variables on SvelteKit deployment on Netlify?

You set environment variables in Netlify's dashboard for your SvelteKit app. How do these variables affect the deployed app's behavior?

A Environment variables set in Netlify override those in <code>.env</code> files and are accessible only on the client side.

B Environment variables are automatically injected into both server and client code without extra configuration.

C Environment variables are available only during build time and cannot be accessed in client-side code unless explicitly exposed.

D Environment variables are ignored by SvelteKit when deployed on Netlify.

💡 Hint

Consider build time vs runtime and client vs server code.

Netlify environment variables are available during build. To use them in client code, you must prefix them with PUBLIC_ and expose them explicitly.

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