Importing from URLs in Deno - Step-by-Step Execution

Concept Flow - Importing from URLs

Start: Write import statement

↓

Deno reads URL

↓

Fetch module code from URL

↓

Cache module locally

↓

Evaluate module code

↓

Make exports available

↓

Use imported functions/variables

↓

Program runs

Deno fetches the module code from the URL, caches it, evaluates it, and then makes its exports available for use.

Execution Sample

Deno

import { greet } from "https://example.com/utils.ts";

greet("Alice");

This code imports a function named greet from a URL and calls it with 'Alice'.

Execution Table

Step	Action	Details	Result
1	Read import statement	import { greet } from "https://example.com/utils.ts"	Recognize external module import
2	Fetch module	Download code from https://example.com/utils.ts	Module code received
3	Cache module	Store module locally for reuse	Module cached
4	Evaluate module	Run the module code to get exports	greet function available
5	Call greet	greet("Alice")	Output depends on greet implementation
6	Program ends	No more code to run	Execution complete

💡 Program ends after calling greet function once

Variable Tracker

Variable	Start	After import	After greet call	Final
greet	undefined	function	function	function

Key Moments - 3 Insights

Why does Deno fetch the module from the URL only once?

Deno caches the module locally after the first fetch (see step 3 in execution_table), so it doesn't download it again on subsequent runs unless the cache is cleared.

What happens if the URL is unreachable?

The fetch step (step 2) will fail, causing an error and stopping the program before evaluation (step 4).

Is the imported code executed immediately?

Yes, during evaluation (step 4), the module code runs to set up exports before you can use them.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result after step 3?

A Module code is executed

B Module code is downloaded and cached locally

C greet function is called

D Program ends

💡 Hint

Check the 'Result' column for step 3 in execution_table

At which step does the greet function become available to use?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Details' and 'Result' columns in execution_table for when exports are ready

If the URL is unreachable, which step will fail?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Refer to the 'Action' column in execution_table where the module is fetched

Concept Snapshot

Importing from URLs in Deno:
- Use import {name} from "https://url";
- Deno fetches and caches the module code
- Module code runs to provide exports
- Use imported functions/variables as usual
- Cache avoids repeated downloads

Full Transcript

In Deno, you can import code directly from a URL. When the program runs, Deno reads the import statement and fetches the module code from the given URL. It stores this code locally in a cache so it doesn't have to download it again next time. Then, Deno runs the module code to make its exported functions or variables available. After that, you can use those imports in your program. If the URL is unreachable, the program will stop with an error during the fetch step. This process helps you use remote code easily and efficiently.

Practice

1. What is the main benefit of importing modules from URLs in Deno?

easy

A. You can use code directly from the web without installing it locally.

B. It makes your code run faster than local imports.

C. It automatically updates your code to the latest version.

D. It disables caching to always fetch fresh code.

Solution

1. Step 1: Understand URL imports in Deno

   Deno allows importing modules directly from web URLs, so you don't need to install packages locally.

2. Step 2: Identify the main benefit

   This feature simplifies using external code by fetching it on demand without manual installs.

3. Final Answer:

   You can use code directly from the web without installing it locally. -> Option A

4. Quick Check:

   Importing from URLs = No local install needed [OK]

Hint: Remember: URL imports mean no local installs needed [OK]

Common Mistakes:

• Thinking URL imports always update to latest code
• Believing URL imports disable caching
• Assuming URL imports make code run faster

2. Which of the following is the correct syntax to import a module from a URL in Deno?

easy

A. import { serve } from "https://deno.land/std/http/server.ts";

B. require("https://deno.land/std/http/server.ts");

C. import serve from "./server.ts";

D. load { serve } from "https://deno.land/std/http/server.ts";

Solution

1. Step 1: Recall Deno import syntax

   Deno uses ES module syntax with import { ... } from "url"; to import from URLs.

2. Step 2: Check each option

   import { serve } from "https://deno.land/std/http/server.ts"; uses correct ES module import syntax with a URL. require("https://deno.land/std/http/server.ts"); uses Node.js style require, which Deno does not use. import serve from "./server.ts"; imports locally, not from URL. load { serve } from "https://deno.land/std/http/server.ts"; uses invalid keyword load.

3. Final Answer:

   import { serve } from "https://deno.land/std/http/server.ts"; -> Option A

4. Quick Check:

   Correct import syntax = import { serve } from "https://deno.land/std/http/server.ts"; [OK]

Hint: Deno uses ES import syntax, not require or load [OK]

Common Mistakes:

• Using require() instead of import
• Trying to import local files with URL syntax
• Using invalid keywords like load

3. What will happen when you run this Deno code snippet?

import { serve } from "https://deno.land/std/http/server.ts";

console.log(typeof serve);

medium

A. "object"

B. "undefined"

C. Runtime error: Module not found

D. "function"

Solution

1. Step 1: Understand what is imported

   The serve function is exported from the URL module as a function.

2. Step 2: Check the typeof operator on serve

   Since serve is a function, typeof serve returns the string "function".

3. Final Answer:

   "function" -> Option D

4. Quick Check:

   typeof serve = "function" [OK]

Hint: Imported functions have typeof 'function' in JS/TS [OK]

Common Mistakes:

• Expecting 'undefined' if module loads correctly
• Thinking import causes runtime error
• Confusing function with object type

4. Identify the error in this Deno import statement:

import { serve } from "https://deno.land/std/http/server";

medium

A. URL must start with http:// not https://.

B. Using curly braces {} around serve is incorrect.

C. Missing file extension ".ts" in the URL.

D. Cannot import from URLs in Deno.

Solution

1. Step 1: Check URL correctness

   Deno requires full file paths including extensions for URL imports, so missing ".ts" causes error.

2. Step 2: Validate other parts

   Curly braces are correct for named imports. HTTPS is supported. Deno supports URL imports.

3. Final Answer:

   Missing file extension ".ts" in the URL. -> Option C

4. Quick Check:

   File extension required in URL imports [OK]

Hint: Always include file extensions in Deno URL imports [OK]

Common Mistakes:

• Omitting file extensions in import URLs
• Thinking HTTPS is unsupported
• Misunderstanding import syntax with braces

5. You want to ensure your Deno project always uses the same version of a library imported from a URL. Which practice helps achieve this?

hard

A. Disable Deno's cache to force fresh downloads every run.

B. Use a versioned URL like "https://deno.land/std@0.203.0/http/server.ts".

C. Manually download and import local copies only.

D. Import from the base URL without version to get latest updates.

Solution

1. Step 1: Understand versioning in URL imports

   Using versioned URLs locks the imported code to a specific release, ensuring stability.

2. Step 2: Evaluate options

   Use a versioned URL like "https://deno.land/std@0.203.0/http/server.ts". uses a versioned URL, which is best practice. Import from the base URL without version to get latest updates. fetches latest, risking breaking changes. Manually download and import local copies only. is manual and not URL import. Disable Deno's cache to force fresh downloads every run. disables caching, causing inefficiency.

3. Final Answer:

   Use a versioned URL like "https://deno.land/std@0.203.0/http/server.ts". -> Option B

4. Quick Check:

   Versioned URLs = stable imports [OK]

Hint: Lock versions in URL to keep imports stable [OK]

Common Mistakes:

• Using unversioned URLs expecting stability
• Disabling cache wastes time and bandwidth
• Confusing manual local imports with URL imports