Deploying to Netlify in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you deploy an Astro project without a netlify.toml file?

You deploy your Astro project to Netlify but forget to add a netlify.toml file. What will Netlify do by default?

A Netlify will deploy the project but skip the build step, serving only static files.

B Netlify will fail the deployment immediately due to missing configuration file.

C Netlify will use default build settings and try to detect the build command and publish directory automatically.

D Netlify will prompt you to upload a <code>netlify.toml</code> file before continuing.

💡 Hint

Think about how Netlify handles projects without explicit config files.

Netlify tries to detect build commands and publish directories automatically if no netlify.toml is present. It does not fail immediately or prompt for files.

📝 Syntax

intermediate

Which netlify.toml snippet correctly sets the build command for an Astro project?

Choose the correct netlify.toml snippet that sets the build command to npm run build and publishes the dist folder.

A

[build]
command = 'npm run build'
publish = 'dist'

B

[build]
command: npm run build
publish: dist

C

[build]
command = npm run build
publish = dist

D

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

💡 Hint

Remember the TOML syntax for key-value pairs uses = and double quotes for strings.

In TOML, keys and values are separated by = and string values must be in double quotes. Option D follows this correctly.

🔧 Debug

advanced

Why does the Netlify deployment fail with 'Build command failed' error?

You deployed your Astro site to Netlify. The build fails with the error: sh: 1: astro: not found. What is the most likely cause?

A The <code>astro</code> package is not installed because <code>npm install</code> was not run before build.

B Netlify does not support Astro projects.

C The <code>dist</code> folder is missing from the repository.

D The <code>netlify.toml</code> file has a syntax error causing the build to fail.

💡 Hint

Think about what the error astro: not found means in a build environment.

The error means the build system cannot find the Astro CLI. This usually happens if dependencies were not installed before running the build command.

❓ state_output

advanced

What is the published folder after building an Astro project with default settings on Netlify?

After running npm run build on an Astro project, which folder should be set as the publish directory in Netlify to serve the site correctly?

A dist

B public

C src

D build

💡 Hint

Check the Astro documentation for the default output folder after build.

Astro outputs the built site files into the dist folder by default, which should be the publish directory on Netlify.

🧠 Conceptual

expert

How does Netlify handle environment variables during Astro project deployment?

You want to use environment variables in your Astro project deployed on Netlify. Which statement best describes how Netlify manages these variables during build and runtime?

A Netlify requires environment variables to be declared in <code>netlify.toml</code> to be accessible anywhere.

B Netlify injects environment variables at build time, so variables are available only during the build process, not at runtime.

C Netlify injects environment variables only at runtime, so they are not accessible during the build step.

D Netlify automatically exposes all system environment variables to the deployed site without configuration.

💡 Hint

Consider when environment variables are needed in static site generation.

Netlify injects environment variables during the build step, so they can be used to generate static content. They are not available at runtime for static sites.

Practice

1. What is the main purpose of deploying an Astro site to Netlify?

easy

A. To make the site live and accessible on the internet

B. To edit the site's source code directly on Netlify

C. To convert the site into a mobile app automatically

D. To backup the site files locally on your computer

Solution

1. Step 1: Understand deployment meaning

   Deployment means making a website available online for others to visit.

2. Step 2: Identify Netlify's role

   Netlify hosts your Astro site so it can be accessed on the internet anytime.

3. Final Answer:

   To make the site live and accessible on the internet -> Option A

4. Quick Check:

   Deploying = Making site live [OK]

Hint: Deployment means putting your site online for everyone [OK]

Common Mistakes:

• Thinking Netlify edits code directly
• Confusing deployment with app conversion
• Assuming deployment is just local backup

2. Which file is commonly used to specify the build command when deploying an Astro site to Netlify?

easy

A. package.json

B. netlify.toml

C. astro.config.mjs

D. index.html

Solution

1. Step 1: Identify Netlify configuration file

   Netlify uses netlify.toml to set build commands and publish directories.

2. Step 2: Differentiate from other files

   package.json manages dependencies, astro.config.mjs configures Astro, and index.html is a page file.

3. Final Answer:

   netlify.toml -> Option B

4. Quick Check:

   Build commands set in netlify.toml [OK]

Hint: Netlify uses netlify.toml for build settings [OK]

Common Mistakes:

• Confusing package.json with Netlify config
• Thinking astro.config.mjs controls deployment
• Using index.html for build commands

3. Given this netlify.toml snippet:

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

What happens when you push your Astro site to Netlify?

medium

A. Netlify fails because dist is not a valid folder

B. Netlify ignores the build command and publishes the root folder

C. Netlify runs npm start and publishes the src folder

D. Netlify runs npm run build and publishes the dist folder

Solution

1. Step 1: Understand build command in netlify.toml

   The command npm run build tells Netlify how to build the site before publishing.

2. Step 2: Understand publish directory

   The publish folder dist is where the built site files are located for Netlify to serve.

3. Final Answer:

   Netlify runs npm run build and publishes the dist folder -> Option D

4. Quick Check:

   Build command + publish folder = deploy site [OK]

Hint: Build command runs, then publish folder is served [OK]

Common Mistakes:

• Assuming Netlify uses npm start by default
• Thinking Netlify publishes source files directly
• Believing dist folder is invalid

4. You deployed your Astro site to Netlify but the site shows a 404 error. Which is the most likely cause?

medium

A. The publish directory in netlify.toml is set incorrectly

B. You forgot to push your code to GitHub

C. Netlify does not support Astro sites

D. Your site has no index.html file in the root folder

Solution

1. Step 1: Check publish directory setting

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

2. Step 2: Verify other options

   Code pushed to GitHub is needed but usually causes build errors, not 404. Netlify supports Astro. The index.html is inside the publish folder, not root.

3. Final Answer:

   The publish directory in netlify.toml is set incorrectly -> Option A

4. Quick Check:

   Wrong publish folder = 404 error [OK]

Hint: Check publish folder path if site shows 404 [OK]

Common Mistakes:

• Blaming Netlify for no Astro support
• Assuming missing index.html in root causes 404
• Ignoring publish directory misconfiguration

5. You want to deploy an Astro site to Netlify with a custom domain and automatic updates on every Git push. Which steps should you follow?

hard

A. Push your code to GitHub, then email Netlify support to deploy your site

B. Upload your site files manually to Netlify, then buy a domain from Netlify

C. Connect your Git repo to Netlify, set build command and publish folder, then add your custom domain in Netlify settings

D. Create a new Astro project on Netlify dashboard and copy-paste your code there

Solution

1. Step 1: Connect Git repo to Netlify

   Linking your GitHub repo allows Netlify to pull code and build automatically on pushes.

2. Step 2: Configure build and publish settings

   Set the build command (e.g., npm run build) and publish folder (e.g., dist) in Netlify.

3. Step 3: Add custom domain in Netlify

   Use Netlify's domain settings to add your own domain for the site URL.

4. Final Answer:

   Connect your Git repo to Netlify, set build command and publish folder, then add your custom domain in Netlify settings -> Option C

5. Quick Check:

   Git + build + domain = full Netlify deploy [OK]

Hint: Connect Git, set build, add domain for full deploy [OK]

Common Mistakes:

• Uploading files manually instead of Git integration
• Thinking Netlify needs manual deploy requests
• Trying to create Astro projects inside Netlify dashboard