Relative vs absolute URL resolution in Node.js - Visual Side-by-Side Comparison

Concept Flow - Relative vs absolute URL resolution

Start with base URL

↓

Receive input URL

↓

Is input URL absolute?

Yes→Use input URL as is

No↓

Combine base URL with relative input

↓

Normalize combined URL

↓

Return resolved absolute URL

This flow shows how Node.js resolves a URL: it checks if the input is absolute, if not, it combines it with a base URL and normalizes the result.

Execution Sample

Node.js

import { URL } from 'url';
const base = new URL('https://example.com/path/');
const relative = 'sub/page.html';
const resolved = new URL(relative, base);
console.log(resolved.href);

This code resolves a relative URL against a base URL and prints the absolute URL.

Execution Table

Step	Input URL	Base URL	Is Absolute?	Action	Resulting URL
1	'sub/page.html'	'https://example.com/path/'	No	Combine base + relative	'https://example.com/path/sub/page.html'
2	'https://google.com/search'	'https://example.com/path/'	Yes	Use input as is	'https://google.com/search'
3	'../up.html'	'https://example.com/path/'	No	Combine and normalize	'https://example.com/up.html'
4	'/root.html'	'https://example.com/path/'	No	Combine with root path	'https://example.com/root.html'
5	'ftp://files.com/file.txt'	'https://example.com/path/'	Yes	Use input as is	'ftp://files.com/file.txt'

💡 Resolution ends after returning the absolute URL based on input type.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
resolved.href	undefined	https://example.com/path/sub/page.html	https://google.com/search	https://example.com/up.html	https://example.com/root.html	ftp://files.com/file.txt

Key Moments - 3 Insights

Why does '../up.html' resolve to 'https://example.com/up.html' instead of 'https://example.com/path/../up.html'?

Because the URL resolution normalizes the path by removing '..' and its preceding directory, as shown in step 3 of the execution_table.

What happens if the input URL is already absolute?

The input URL is used as is without combining with the base URL, as shown in steps 2 and 5.

How does a leading slash in the relative URL affect resolution?

A leading slash resets the path to the root of the base URL's domain, demonstrated in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the resolved URL at step 3?

A https://example.com/up.html

B https://example.com/path/up.html

C https://example.com/path/../up.html

D https://example.com/path/../path/up.html

💡 Hint

Check the 'Resulting URL' column for step 3 in the execution_table.

At which step does the input URL get used without combining with the base URL?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for 'Is Absolute?' = Yes and 'Action' = Use input as is in the execution_table.

If the relative URL was changed from 'sub/page.html' to '/sub/page.html' in step 1, what would the resolved URL be?

A https://example.com/path/sub/page.html

B https://example.com/path//sub/page.html

C https://example.com/sub/page.html

D https://example.com/subpage.html

💡 Hint

Recall that a leading slash resets the path to the root, as shown in step 4.

Concept Snapshot

URL resolution in Node.js:
- If input URL is absolute, use it directly.
- If relative, combine with base URL.
- Normalize paths (remove '..' and '.')
- Leading slash resets to domain root
- Use new URL(relativeOrAbsolute, baseURL) to resolve

Full Transcript

This lesson shows how Node.js resolves URLs using the URL constructor. It starts with a base URL and an input URL. If the input is absolute, it uses it directly. If relative, it combines with the base and normalizes the path. Examples include relative paths like 'sub/page.html', parent directory references like '../up.html', and absolute URLs like 'https://google.com/search'. The process ensures the final URL is absolute and normalized for use in applications.