Relative vs absolute URL resolution in Node.js - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new URL object with an absolute URL string.

Node.js

const url = new URL([1]);

Drag options to blanks, or click blank then click option'

A'path/to/resource'

B'/relative/path'

C'example.com'

D'https://example.com/path'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a relative path without a base URL causes an error.

Omitting the protocol in the URL string.

The URL constructor requires an absolute URL string or a base URL to resolve relative URLs. Here, we provide an absolute URL string.

2fill in blank

medium

Complete the code to resolve a relative URL against a base URL.

Node.js

const base = new URL('https://example.com/folder/');
const resolved = new URL([1], base);

Drag options to blanks, or click blank then click option'

A'/file.txt'

B'folder/file.txt'

C'file.txt'

D'https://other.com/file'

Attempts:

3 left

💡 Hint

Common Mistakes

Using an absolute URL string as the relative URL.

Starting the relative URL with a slash when you want to append.

When resolving a relative URL against a base, a simple filename like 'file.txt' appends to the base path.

3fill in blank

hard

Fix the error in the code to correctly create a URL from a relative path and base URL.

Node.js

const base = new URL('https://example.com/dir/');
const url = new URL([1], base);

Drag options to blanks, or click blank then click option'

A'file.txt'

B'/dir/file.txt'

C'dir/file.txt'

D'https://example.com/dir/file.txt'

Attempts:

3 left

💡 Hint

Common Mistakes

Including the directory name again in the relative path.

Using an absolute URL string as the relative URL.

To resolve a relative file inside the base directory, use just the filename 'file.txt'. Using 'dir/file.txt' repeats the directory.

4fill in blank

hard

Fill both blanks to create a URL object resolving a relative path with a base URL string.

Node.js

const url = new URL([1], [2]);

Drag options to blanks, or click blank then click option'

A'page.html'

B'https://example.com/base/'

C'/page.html'

D'example.com/base/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a base URL without protocol.

Using a relative path starting with '/' when you want to append.

The first argument is the relative path 'page.html' and the second is the base URL string. This resolves to 'https://example.com/base/page.html'.

5fill in blank

hard

Fill all three blanks to create a URL object and extract its pathname and origin.

Node.js

const url = new URL([1], [2]);
const path = url.[3];

Drag options to blanks, or click blank then click option'

A'subdir/file.txt'

B'https://domain.com/root/'

Cpathname

Dorigin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'origin' when the path is needed.

Using a relative path starting with '/' which resets the path.

The URL is created by resolving 'subdir/file.txt' against the base URL. The pathname property gives the path part of the URL.

Practice

1. Which of the following is a correct description of a relative URL in Node.js?

easy

A. A URL that includes the protocol and domain name.

B. A URL that depends on a base URL to form a full address.

C. A URL that always starts with 'http://' or 'https://'.

D. A URL that cannot be resolved using the URL class.

Solution

1. Step 1: Understand relative URL meaning

   A relative URL does not include the full path and depends on a base URL to form a complete address.

2. Step 2: Compare options

   A URL that depends on a base URL to form a full address. correctly describes this. Options B and C describe absolute URLs. A URL that cannot be resolved using the URL class. is incorrect because Node.js URL class can resolve relative URLs with a base.

3. Final Answer:

   A URL that depends on a base URL to form a full address. -> Option B

4. Quick Check:

   Relative URL = depends on base URL [OK]

Hint: Relative URLs need a base URL to become complete [OK]

Common Mistakes:

• Confusing relative URLs with absolute URLs
• Thinking relative URLs include protocol
• Believing relative URLs cannot be resolved

2. Which of the following is the correct way to create a new URL object for a relative path '/images/photo.jpg' with base 'https://example.com/gallery/' in Node.js?

easy

A. new URL('/images/photo.jpg', 'https://example.com/gallery/')

B. new URL('https://example.com/gallery/' + '/images/photo.jpg')

C. new URL('images/photo.jpg')

D. new URL('https://example.com/gallery/images/photo.jpg')

Solution

1. Step 1: Understand URL constructor usage

   The URL constructor takes two arguments: the path and the base URL. For relative paths, the first argument is the relative path, and the second is the base.

2. Step 2: Check each option

   new URL('/images/photo.jpg', 'https://example.com/gallery/') correctly uses new URL(relativePath, baseURL). new URL('https://example.com/gallery/' + '/images/photo.jpg') concatenates strings but does not use the URL constructor properly. new URL('images/photo.jpg') misses the base URL. new URL('https://example.com/gallery/images/photo.jpg') uses an absolute URL, not relative.

3. Final Answer:

   new URL('/images/photo.jpg', 'https://example.com/gallery/') -> Option A

4. Quick Check:

   URL(relative, base) = correct syntax [OK]

Hint: Use new URL(relativePath, baseURL) for relative URLs [OK]

Common Mistakes:

• Concatenating strings instead of using URL constructor
• Omitting the base URL for relative paths
• Passing absolute URL as first argument when base is given

3. What will be the output of the following Node.js code?

const { URL } = require('url');
const base = 'https://example.com/folder/';
const relative = '../image.png';
const fullUrl = new URL(relative, base);
console.log(fullUrl.href);

medium

A. https://example.com/folder/../image.png

B. Error: Invalid URL

C. https://example.com/image.png

D. https://example.com/folder/image.png

Solution

1. Step 1: Understand relative path resolution

   The relative path '../image.png' means go one folder up from 'https://example.com/folder/' which leads to 'https://example.com/'.

2. Step 2: Resolve the full URL

   Combining base and relative path, the URL class normalizes the path to 'https://example.com/image.png'. https://example.com/image.png matches this.

3. Final Answer:

   https://example.com/image.png -> Option C

4. Quick Check:

   Relative '..' moves up one directory [OK]

Hint: Relative '..' moves up one folder in URL paths [OK]

Common Mistakes:

• Not normalizing '..' in URL paths
• Expecting '../' to stay in the URL string
• Confusing relative and absolute URL outputs

4. Identify the error in this Node.js code snippet that tries to resolve a relative URL:

const { URL } = require('url');
const base = 'https://example.com/path';
const relative = 'file.txt';
const url = new URL(relative, base);
console.log(url.href);

medium

A. Base URL is missing trailing slash, causing incorrect resolution.

B. Relative URL should start with a slash '/' to be valid.

C. URL constructor requires only one argument for relative URLs.

D. No error; code outputs 'https://example.com/path/file.txt' correctly.

Solution

1. Step 1: Check base URL format

   The base URL 'https://example.com/path' lacks a trailing slash, so it is treated as a file, not a folder.

2. Step 2: Understand URL resolution effect

   Appending 'file.txt' to a base treated as file replaces 'path' with 'file.txt', resulting in 'https://example.com/file.txt', not 'https://example.com/path/file.txt'.

3. Final Answer:

   Base URL is missing trailing slash, causing incorrect resolution. -> Option A

4. Quick Check:

   Base URL trailing slash affects relative URL resolution [OK]

Hint: Always add trailing slash to base URL if it's a folder [OK]

Common Mistakes:

• Omitting trailing slash on base URL
• Thinking relative URLs must start with '/'
• Passing wrong number of arguments to URL constructor

5. You want to combine a base URL 'https://example.com/api/v1/' with a relative URL '../../images/pic.jpg' in Node.js. What will be the resolved absolute URL?

hard

A. https://example.com/api/v1/images/pic.jpg

B. https://example.com/api/images/pic.jpg

C. https://example.com/api/v1/../../images/pic.jpg

D. https://example.com/images/pic.jpg

Solution

1. Step 1: Analyze relative path '../../images/pic.jpg'

   The '../../' means go up two folders from 'https://example.com/api/v1/'.

2. Step 2: Move up two levels from base URL

   Starting at 'https://example.com/api/v1/', going up one level is 'https://example.com/api/', and up another is 'https://example.com/'. Then append 'images/pic.jpg'.

3. Final Answer:

   https://example.com/images/pic.jpg -> Option D

4. Quick Check:

   Two '..' moves up two directories [OK]

Hint: Count '..' to move up folders in URL paths [OK]

Common Mistakes:

• Not moving up enough folders for multiple '..'
• Appending relative path without normalization
• Confusing base URL folder levels