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.