Installing and creating an Astro project - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the correct command to create a new Astro project?

You want to start a new Astro project using the official recommended method. Which command should you run in your terminal?

A npm create astro@latest

B astro new project

C npm install astro-project

D astro init

💡 Hint

Think about the official way to scaffold a new Astro project using npm.

The official way to create a new Astro project is by running npm create astro@latest. This command downloads the latest Astro project starter and guides you through setup.

Other options are either invalid commands or do not exist in Astro's CLI.

❓ component_behavior

intermediate

What happens after running npm create astro@latest?

After running npm create astro@latest, what is the next step you will see in the terminal?

A A message asking to install Node.js

B A prompt asking you to select a project template

C The project is created immediately without any questions

D An error saying Astro is not installed

💡 Hint

Think about how project scaffolding tools usually work.

After running npm create astro@latest, you are prompted to choose a starter template for your project. This helps you pick a base setup like a minimal starter or a blog template.

The other options are incorrect because the command assumes Node.js is installed and does not create the project silently.

📝 Syntax

advanced

Which command correctly installs dependencies after creating an Astro project?

You have just created a new Astro project folder. Which command should you run inside that folder to install all required packages?

A npm install

B npm create

C astro install

D astro add dependencies

💡 Hint

Think about how Node.js projects install packages.

After creating the project, you run npm install inside the project folder to install all dependencies listed in package.json.

Commands like astro install or astro add dependencies do not exist.

❓ state_output

advanced

What is the output when running npm run dev in a new Astro project?

After installing dependencies, you run npm run dev. What output should you expect in the terminal?

A A message that dependencies are missing

B An error saying 'command not found: dev'

C A local development server URL with a message like 'Local: http://localhost:4321/'

D The project files are deleted

💡 Hint

Think about what npm run dev usually does in web projects.

Running npm run dev starts the Astro development server and shows a local URL where you can preview your site.

Errors or missing dependencies messages indicate setup problems, which should not happen if you followed the steps correctly.

🔧 Debug

expert

Why does npm run dev fail with 'missing script: dev' error?

You created a new Astro project and installed dependencies, but running npm run dev gives this error: 'npm ERR! missing script: dev'. What is the most likely cause?

A You ran the command outside the project folder

B The Astro CLI is outdated

C Node.js is not installed on the system

D The <code>package.json</code> file does not have a 'dev' script defined

💡 Hint

Check the contents of package.json scripts section.

The error 'missing script: dev' means npm cannot find a 'dev' script in package.json. This usually happens if the file is missing or corrupted.

Running outside the project folder or Node.js missing would cause different errors. An outdated Astro CLI does not cause this npm error.

Practice

1. Which command do you use to start creating a new Astro project?

easy

A. astro init

B. npm install astro

C. npm run dev

D. npm create astro@latest

Solution

1. Step 1: Understand how to create a new Astro project

   The official way to start a new Astro project is by running npm create astro@latest, which sets up the project files.

2. Step 2: Differentiate from other commands

   npm install astro installs a package but doesn't create a project; npm run dev runs the project; astro init is not a valid command.

3. Final Answer:

   npm create astro@latest -> Option D

4. Quick Check:

   Create new Astro project = npm create astro@latest [OK]

Hint: Use 'npm create astro@latest' to start a new project [OK]

Common Mistakes:

• Using 'npm install astro' to create a project
• Trying 'astro init' which is invalid
• Running 'npm run dev' before creating the project

2. Which command installs the dependencies inside your Astro project folder?

easy

A. npm run dev

B. npm create astro@latest

C. npm install

D. npm start

Solution

1. Step 1: Identify the command for installing dependencies

   After creating the project, you run npm install inside the project folder to download all needed packages.

2. Step 2: Understand other commands' purposes

   npm create astro@latest creates the project; npm run dev runs the development server; npm start is not standard for Astro.

3. Final Answer:

   npm install -> Option C

4. Quick Check:

   Install dependencies = npm install [OK]

Hint: Run 'npm install' to get all project dependencies [OK]

Common Mistakes:

• Running 'npm create astro@latest' again to install
• Using 'npm start' which is not standard here
• Skipping dependency installation before running dev server

3. What happens when you run npm run dev inside your Astro project folder?

medium

A. It installs all project dependencies.

B. It starts a local development server to preview your site.

C. It builds the project for production.

D. It creates a new Astro project.

Solution

1. Step 1: Understand the purpose of 'npm run dev'

   This command starts a local server that watches your files and shows your site live as you build it.

2. Step 2: Differentiate from other commands

   npm install installs dependencies; creating a project is done by npm create astro@latest; building for production uses npm run build.

3. Final Answer:

   It starts a local development server to preview your site. -> Option B

4. Quick Check:

   npm run dev = start dev server [OK]

Hint: Use 'npm run dev' to preview your site live [OK]

Common Mistakes:

• Confusing 'npm run dev' with installing dependencies
• Thinking it creates a new project
• Assuming it builds production files

4. You ran npm run dev but your site does not show up in the browser. What is the most likely cause?

medium

A. You did not install dependencies with npm install.

B. You forgot to create the project with npm create astro@latest.

C. You ran npm run dev outside the project folder.

D. You need to run npm start instead.

Solution

1. Step 1: Check dependency installation

   If dependencies are missing because npm install was not run, the dev server may fail or not load properly.

2. Step 2: Consider other causes

   Running npm run dev outside the project folder or forgetting to create the project can cause errors, but missing dependencies is the most common cause.

3. Final Answer:

   You did not install dependencies with npm install. -> Option A

4. Quick Check:

   Missing dependencies = run npm install first [OK]

Hint: Always run 'npm install' before 'npm run dev' [OK]

Common Mistakes:

• Skipping 'npm install' after project creation
• Running dev server outside project folder
• Trying 'npm start' which is not standard

5. You want to create a new Astro project, install dependencies, and start the development server in the fewest commands possible. Which sequence is correct?

hard

A. npm create astro@latest -> npm install -> npm run dev

B. npm install -> npm create astro@latest -> npm run dev

C. npm create astro@latest -> npm run dev

D. npm run dev -> npm create astro@latest -> npm install

Solution

1. Step 1: Create the project first

   You must first run npm create astro@latest to generate the project files.

2. Step 2: Install dependencies before running dev server

   After creation, run npm install to get all packages, then npm run dev to start the server.

3. Step 3: Understand why other sequences fail

   Running npm run dev before installing dependencies or creating the project causes errors; installing before creating is illogical.

4. Final Answer:

   npm create astro@latest -> npm install -> npm run dev -> Option A

5. Quick Check:

   Create -> Install -> Dev server = correct order [OK]

Hint: Remember: create project, install dependencies, then run dev [OK]

Common Mistakes:

• Skipping 'npm install' after project creation
• Running dev server before project exists
• Installing before creating the project