Creating a Fresh project in Deno - Visual Walkthrough

Concept Flow - Creating a Fresh project

Open Terminal

↓

Run: deno run -A -r https://fresh.deno.dev project-name

↓

Fresh CLI downloads template

↓

Project folder created

↓

Navigate into project folder

↓

Run: deno task start

↓

Fresh dev server starts

↓

Open browser at localhost:8000

↓

See Fresh app running

This flow shows the steps to create and start a new Fresh project using the Deno CLI.

Execution Sample

Deno

deno run -A -r https://fresh.deno.dev my-fresh-app
cd my-fresh-app
deno task start

This code creates a new Fresh project named 'my-fresh-app', moves into its folder, and starts the development server.

Execution Table

Step	Command/Action	Effect	Output/Result
1	deno run -A -r https://fresh.deno.dev my-fresh-app	Downloads Fresh template and creates folder 'my-fresh-app'	Folder 'my-fresh-app' created with project files
2	cd my-fresh-app	Change directory to project folder	Terminal path changes to 'my-fresh-app'
3	deno task start	Starts Fresh development server	Server running at http://localhost:8000
4	Open browser at http://localhost:8000	Loads Fresh app in browser	Fresh welcome page displayed
5	Stop server (Ctrl+C)	Stops development server	Server process ends

💡 Execution stops after the server is stopped or terminal is closed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Project Folder	None	'my-fresh-app' created	'my-fresh-app' current directory	'my-fresh-app' running server	'my-fresh-app' server serving page	Server stopped, folder unchanged
Server Status	Not running	Not running	Not running	Running at localhost:8000	Running	Stopped

Key Moments - 3 Insights

Why do we use the '-r' flag in the deno run command?

The '-r' flag tells Deno to reload remote dependencies, ensuring the latest Fresh template is downloaded as shown in Step 1 of the execution_table.

What happens if you try to start the server outside the project folder?

The server will not start properly because the command depends on project files in the current directory, as seen in Step 3 where the directory must be 'my-fresh-app'.

How do you know the Fresh app is running correctly?

Opening the browser at http://localhost:8000 shows the Fresh welcome page, confirming the server is running as in Step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output after running 'deno run -A -r https://fresh.deno.dev my-fresh-app'?

A Terminal path changes to 'my-fresh-app'

B Server running at http://localhost:8000

C Folder 'my-fresh-app' created with project files

D Fresh welcome page displayed

💡 Hint

Check Step 1 in the execution_table for the effect and output of the command.

At which step does the Fresh development server start running?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Command/Action' and 'Effect' columns in the execution_table.

If you skip 'cd my-fresh-app' and run 'deno task start' in the wrong folder, what will happen?

A Server will not start properly

B Folder 'my-fresh-app' will be created

C Server will start normally

D Fresh welcome page will display

💡 Hint

Refer to key_moments about the importance of running commands inside the project folder.

Concept Snapshot

Creating a Fresh project with Deno:
1. Run: deno run -A -r https://fresh.deno.dev project-name
2. Change directory: cd project-name
3. Start server: deno task start
4. Open browser at http://localhost:8000
This sets up and runs a Fresh app locally.

Full Transcript

To create a Fresh project, open your terminal and run the command 'deno run -A -r https://fresh.deno.dev my-fresh-app'. This downloads the Fresh template and creates a folder named 'my-fresh-app'. Next, change into this folder using 'cd my-fresh-app'. Then start the development server with 'deno task start'. The server will run at http://localhost:8000. Open this address in your browser to see the Fresh app running. Stop the server anytime with Ctrl+C. Make sure to run the start command inside the project folder to avoid errors.

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