Project setup with create-svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the create-svelte command

What does the command npm create svelte@latest do when setting up a new Svelte project?

A It installs Svelte globally on your system for all projects.

B It updates an existing Svelte project to the latest version.

C It runs the Svelte development server immediately without creating any files.

D It initializes a new Svelte project by downloading the latest template and guiding you through setup options.

💡 Hint

Think about what 'create' commands usually do in project setups.

The npm create svelte@latest command downloads the latest Svelte project template and helps you configure your new project interactively.

❓ component_behavior

intermediate

Result of skipping TypeScript during setup

If you run npm create svelte@latest and choose no when asked about TypeScript support, what will be true about your project?

A The project will use plain JavaScript files without TypeScript syntax or type checking.

B The project will still include TypeScript files but without type checking enabled.

C The project will fail to build because TypeScript is required.

D The project will convert all TypeScript files to JavaScript automatically.

💡 Hint

Consider what happens when you decline TypeScript in a setup wizard.

Choosing no TypeScript means the project uses plain JavaScript files and no TypeScript tooling is included.

📝 Syntax

advanced

Correct command to create a Svelte project with npm

Which of the following commands correctly creates a new Svelte project using the latest create-svelte template?

A npm create svelte my-app

B npm init svelte@latest my-app

C npm create svelte@latest my-app

D npm install create-svelte@latest my-app

💡 Hint

Focus on the official recommended command syntax for create-svelte.

The correct command is npm create svelte@latest my-app to create a new project folder named my-app.

🔧 Debug

advanced

Error caused by missing dependencies after create-svelte

After running npm create svelte@latest and choosing options, you try to run npm run dev but get an error about missing modules. What is the most likely cause?

A You forgot to run <code>npm install</code> to install dependencies before running the dev server.

B The create-svelte command failed to create the project folder.

C You need to run <code>npm update</code> before <code>npm run dev</code>.

D Your Node.js version is too new and incompatible with Svelte.

💡 Hint

Think about what step installs packages after project creation.

After creating the project, you must run npm install to download all needed packages before running the dev server.

❓ state_output

expert

Number of files created by default with create-svelte

After running npm create svelte@latest and accepting all default options, how many files (not folders) are created in the root of the new project folder?

A 7

B 9

C 11

D 5

💡 Hint

Count files like package.json, README.md, config files, and main source files.

By default (with TypeScript, ESLint, Prettier), the root folder contains 9 files: .eslintrc.cjs, .gitignore, .prettierrc, README.md, package.json, svelte.config.js, tsconfig.json, tsconfig.node.json, vite.config.ts.

Practice

1. What is the main purpose of running npm create svelte@latest?

easy

A. To update an existing Svelte project

B. To install Svelte globally on your computer

C. To start a new Svelte project with a ready setup

D. To run the Svelte development server

Solution

1. Step 1: Understand the command purpose

   npm create svelte@latest is used to create a new Svelte project, not to install or update globally.

2. Step 2: Differentiate from other commands

   Installing globally or running the server uses different commands like npm install -g or npm run dev.

3. Final Answer:

   To start a new Svelte project with a ready setup -> Option C

4. Quick Check:

   Create new project = A [OK]

Hint: Remember: 'create' means start new project [OK]

Common Mistakes:

• Confusing 'create' with 'install' globally
• Thinking it runs the app immediately
• Assuming it updates existing projects

2. Which command correctly installs the dependencies after creating a new Svelte project?

easy

A. npm run dev

B. npm create svelte@latest

C. npm start

D. npm install

Solution

1. Step 1: Identify the command for installing packages

   npm install downloads and installs all dependencies listed in package.json.

2. Step 2: Differentiate from other commands

   npm run dev starts the development server, npm create svelte@latest creates a project, and npm start is not standard here.

3. Final Answer:

   npm install -> Option D

4. Quick Check:

   Install dependencies = npm install [OK]

Hint: Install dependencies with 'npm install' before running app [OK]

Common Mistakes:

• Running 'npm run dev' before installing dependencies
• Confusing 'npm create' with install
• Using 'npm start' which may not be defined

3. After running npm create svelte@latest and npm install, what happens when you run npm run dev?

medium

A. It starts a local development server showing your Svelte app

B. It installs additional dependencies

C. It deletes the node_modules folder

D. It creates a new Svelte project

Solution

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

   This command starts the development server that hosts your Svelte app locally for testing.

2. Step 2: Clarify other options

   Installing dependencies is done by npm install, deleting folders is not part of this command, and project creation is separate.

3. Final Answer:

   It starts a local development server showing your Svelte app -> Option A

4. Quick Check:

   Run dev = start local server [OK]

Hint: Run 'npm run dev' to see your app live locally [OK]

Common Mistakes:

• Thinking 'npm run dev' installs packages
• Confusing it with project creation
• Expecting it to delete files

4. You ran npm create svelte@latest but forgot to run npm install. What will happen if you try npm run dev next?

medium

A. You get an error about missing dependencies

B. The development server starts normally

C. The project files get deleted

D. The app builds but shows a blank page

Solution

1. Step 1: Recognize the role of 'npm install'

   This command installs all needed packages. Without it, dependencies are missing.

2. Step 2: Predict the result of skipping install

   Trying to run the dev server without dependencies causes errors about missing modules.

3. Final Answer:

   You get an error about missing dependencies -> Option A

4. Quick Check:

   Missing install causes errors on run [OK]

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

Common Mistakes:

• Assuming dev server runs without dependencies
• Expecting blank page instead of error
• Thinking files get deleted automatically

5. You want to create a new Svelte project with TypeScript support using npm create svelte@latest. Which step should you take during setup?

hard

A. Manually add TypeScript files after project creation

B. Choose the TypeScript template option when prompted

C. Run npm install typescript before creating the project

D. Skip dependency installation and add TypeScript later

Solution

1. Step 1: Understand create-svelte prompts

   When running npm create svelte@latest, it asks which features you want, including TypeScript support.

2. Step 2: Select TypeScript during setup

   Choosing the TypeScript option sets up the project with correct config and files automatically.

3. Step 3: Avoid manual or out-of-order steps

   Manually adding TypeScript or installing before project creation is unnecessary and error-prone.

4. Final Answer:

   Choose the TypeScript template option when prompted -> Option B

5. Quick Check:

   Select TypeScript at setup = A [OK]

Hint: Pick TypeScript option during create-svelte prompts [OK]

Common Mistakes:

• Adding TypeScript manually after setup
• Installing TypeScript before project creation
• Skipping dependency installation