Creating a Fresh project in Deno - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Fresh component?

Consider this Fresh component code. What will it render in the browser?

Deno

import { h } from "https://esm.sh/preact@10.11.0";

export default function Greeting() {
  const name = "Fresh";
  return <h1>Hello, {name}!</h1>;
}

A <h1>Hello, {name}!</h1>

B Hello, Fresh!

C <h1>Hello, Fresh!</h1>

D <h1>Hi, Fresh!</h1>

💡 Hint

Look at how JSX expressions inside curly braces are rendered.

The component returns an h1 element with the text 'Hello, Fresh!'. JSX expressions inside curly braces are evaluated and rendered as text.

📝 Syntax

intermediate

Which option correctly initializes a new Fresh project?

You want to create a new Fresh project using the official command. Which command is correct?

A deno run -A https://fresh.deno.dev init --name my-app

B deno run -A https://fresh.deno.dev init my-app

C deno run -A https://fresh.deno.dev --init=my-app

D deno run -A https://fresh.deno.dev my-app

💡 Hint

Check the official Fresh documentation for the exact command syntax.

The correct command to initialize a new Fresh project is 'deno run -A https://fresh.deno.dev my-app'. The project name is provided as a positional argument.

🔧 Debug

advanced

Why does this Fresh project fail to start?

You ran 'deno task start' in your Fresh project but got an error. What is the likely cause?

Deno

import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";

await start(manifest);

A Missing permissions flag '-A' when running the start command

B The import path 'fresh/server.ts' is incorrect and should be 'fresh/server.js'

C The 'start' function must be called with a port number argument

D The 'await' keyword cannot be used at the top level in Fresh projects

💡 Hint

Deno requires explicit permissions for network access.

Deno requires the '-A' flag (all permissions) to allow network access. Without it, the server cannot start and throws a permission error.

❓ state_output

advanced

What is the output after clicking the button in this Fresh component?

This Fresh component uses state. What will the displayed count be after clicking the button twice?

Deno

import { h } from "https://esm.sh/preact@10.11.0";
import { useState } from "https://esm.sh/preact@10.11.0/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

A Count: 2

B Count: 1

C Count: 0

D Count: NaN

💡 Hint

Each click increases count by 1 starting from 0.

The initial count is 0. Each button click adds 1. After two clicks, count is 2.

🧠 Conceptual

expert

Which statement best describes Fresh's rendering approach?

Fresh uses a unique rendering strategy compared to other frameworks. Which option correctly describes it?

A Fresh uses client-side rendering exclusively with no server involvement

B Fresh renders pages on the server and sends minimal JavaScript to hydrate only interactive parts on the client

C Fresh fully renders pages on the client after downloading all JavaScript bundles

D Fresh pre-renders static HTML at build time without any client-side interactivity

💡 Hint

Think about how Fresh optimizes loading and interactivity.

Fresh renders pages on the server and sends minimal JavaScript to hydrate only interactive components, improving performance and reducing load times.

Practice

1. What command do you use to create a new Fresh project in Deno?

easy

A. deno fresh create

B. deno run -A --unstable https://fresh.deno.dev/init <project-name>

C. deno init fresh

D. deno start fresh

Solution

1. Step 1: Understand Fresh project creation command

   The official way to create a Fresh project is by running a Deno script from the URL https://fresh.deno.dev/init with the project name as argument.

2. Step 2: Identify the correct command syntax

   The command includes 'deno run -A --unstable' followed by the URL and the project name, exactly as in deno run -A --unstable https://fresh.deno.dev/init <project-name>.

3. Final Answer:

   deno run -A --unstable https://fresh.deno.dev/init <project-name> -> Option B

4. Quick Check:

   Fresh project creation = deno run -A --unstable https://fresh.deno.dev/init <project-name> [OK]

Hint: Remember the URL and flags for Fresh init command [OK]

Common Mistakes:

• Using 'deno fresh create' which is not a valid command
• Omitting the --unstable flag
• Trying to use 'deno init fresh' which doesn't exist

2. Which of the following commands correctly starts the Fresh development server after creating a project?

easy

A. deno run -A --unstable main.ts

B. deno fresh start

C. deno start dev.ts

D. deno run -A --unstable dev.ts

Solution

1. Step 1: Identify the development server file in Fresh projects

   Fresh projects use 'dev.ts' as the entry point to start the development server.

2. Step 2: Match the correct command syntax

   The correct command is 'deno run -A --unstable dev.ts' to run the development server.

3. Final Answer:

   deno run -A --unstable dev.ts -> Option D

4. Quick Check:

   Start Fresh dev server = deno run -A --unstable dev.ts [OK]

Hint: Fresh dev server runs from dev.ts with deno run [OK]

Common Mistakes:

• Trying to run main.ts which does not exist by default
• Using 'deno fresh start' which is not a valid command
• Omitting the -A or --unstable flags

3. After running deno run -A --unstable https://fresh.deno.dev/init myapp and changing into the myapp folder, what will happen if you run deno run -A --unstable dev.ts?

medium

A. Starts the Fresh development server and serves the app at localhost

B. Throws an error because dev.ts does not exist

C. Builds the project but does not start a server

D. Runs tests on the Fresh project

Solution

1. Step 1: Understand the effect of the init command

   The init command creates a new Fresh project folder with all necessary files including dev.ts.

2. Step 2: Running dev.ts starts the development server

   Running 'deno run -A --unstable dev.ts' inside the project folder launches the Fresh dev server, serving the app locally.

3. Final Answer:

   Starts the Fresh development server and serves the app at localhost -> Option A

4. Quick Check:

   Running dev.ts in Fresh project = starts dev server [OK]

Hint: dev.ts runs the server after init creates the project [OK]

Common Mistakes:

• Assuming dev.ts is missing after init
• Thinking dev.ts only builds without serving
• Confusing dev.ts with test scripts

4. You ran deno run -A --unstable https://fresh.deno.dev/init myapp but got an error: error: Cannot resolve module. What is the most likely cause?

medium

A. You have no internet connection to fetch the init script

B. You forgot to include the -A permission flag

C. You ran the command inside an existing Fresh project folder

D. You used an invalid project name with spaces

Solution

1. Step 1: Understand the error meaning

   'Cannot resolve module' means Deno cannot download the script from the URL.

2. Step 2: Identify common causes

   This usually happens if there is no internet connection or the URL is unreachable.

3. Final Answer:

   You have no internet connection to fetch the init script -> Option A

4. Quick Check:

   Module fetch error = no internet connection [OK]

Hint: Check internet if module fetch fails during init [OK]

Common Mistakes:

• Assuming permission flags cause module resolution errors
• Thinking running inside project folder causes this error
• Ignoring invalid project name as cause

5. You want to create a Fresh project named blog and start the development server. Which sequence of commands is correct?

hard

A. deno run -A https://fresh.deno.dev/init blog && cd blog && deno run dev.ts

B. deno fresh init blog && cd blog && deno start dev.ts

C. deno run -A --unstable https://fresh.deno.dev/init blog && cd blog && deno run -A --unstable dev.ts

D. deno create fresh blog && cd blog && deno run -A dev.ts

Solution

1. Step 1: Use the correct Fresh init command

   The correct command to create a Fresh project is 'deno run -A --unstable https://fresh.deno.dev/init blog'.

2. Step 2: Change directory and start the dev server

   After creation, change into the 'blog' folder and run 'deno run -A --unstable dev.ts' to start the server.

3. Final Answer:

   deno run -A --unstable https://fresh.deno.dev/init blog && cd blog && deno run -A --unstable dev.ts -> Option C

4. Quick Check:

   Init + cd + dev.ts run = deno run -A --unstable https://fresh.deno.dev/init blog && cd blog && deno run -A --unstable dev.ts [OK]

Hint: Init with URL, cd, then run dev.ts with flags [OK]

Common Mistakes:

• Using 'deno fresh init' which is invalid
• Omitting --unstable flag
• Not changing directory before running dev.ts