Relative vs absolute URL resolution in Node.js - Hands-On Comparison

Relative vs Absolute URL Resolution in Node.js

📖 Scenario: You are building a simple Node.js script that helps a web developer understand how URLs combine when given a base URL and a relative path. This is useful when linking pages or resources on websites.

🎯 Goal: Create a Node.js script that uses the URL class to resolve relative URLs against a base absolute URL and print the resolved absolute URLs.

📋 What You'll Learn

Create a base URL string variable with the exact value 'https://example.com/folder/'

Create a relative URL string variable with the exact value '../image.png'

Use the Node.js URL class to resolve the relative URL against the base URL

Create a variable to hold the resolved absolute URL string

Print the resolved absolute URL string

💡 Why This Matters

🌍 Real World

Web developers often need to combine base URLs with relative paths to link resources correctly on websites or in APIs.

💼 Career

Understanding URL resolution is important for backend and frontend developers to manage links, redirects, and resource loading accurately.

1

Set up the base URL string

Create a variable called baseUrl and set it to the string 'https://example.com/folder/'.

Node.js

// Create the base URL string variable
// Your code here

Need a hint?

Use const to declare the variable and assign the exact URL string.

2

Set up the relative URL string

Create a variable called relativeUrl and set it to the string '../image.png'.

Node.js

const baseUrl = 'https://example.com/folder/';
// Create the relative URL string variable
// Your code here

Need a hint?

Use const to declare the variable and assign the exact relative path string.

3

Resolve the relative URL against the base URL

Create a variable called resolvedUrl and set it to a new URL object created by passing relativeUrl and baseUrl to the URL constructor. Then get the string value of the resolved URL using the href property.

Node.js

const baseUrl = 'https://example.com/folder/';
const relativeUrl = '../image.png';
// Resolve the relative URL against the base URL
// Your code here

Need a hint?

Use new URL(relativeUrl, baseUrl) and access .href to get the full URL string.

4

Print the resolved absolute URL

Use console.log to print the variable resolvedUrl.

Node.js

const baseUrl = 'https://example.com/folder/';
const relativeUrl = '../image.png';
const resolvedUrl = new URL(relativeUrl, baseUrl).href;
// Print the resolved URL
// Your code here

Need a hint?

Use console.log to show the resolved URL in the console.