CSE 340 | Learning Activities

W01 Learning Activity: File and URL Paths

Overview

Paths are the fundamental addressing system that computers and web browsers use to locate files and resources. Just as your home address provides a complete set of directions for someone to find your house, paths provide the exact instructions needed to locate files on a computer or resources on the internet. Understanding the three types of paths is essential for any developer working with files, web development, or system administration.

This learning activity discusses absolute paths, relative paths, and root relative paths. You will learn not only how each type works, but when to use them, their advantages and disadvantages, and how they apply in both file systems and web development contexts.

Preparation Material

The Foundation: What Are Paths?

A path is a string of characters that specifies the location of a file or directory in a hierarchical file system or the location of a resource on the web. Paths serve as a navigation system, providing step-by-step directions to reach a specific destination. Think of paths as the digital equivalent of giving someone directions to your house.

When you give directions to your house, you might say "turn left at Main Street, then right on Oak Avenue, then it's the third house on the left." This is similar to how paths work, but instead of streets and turns, paths use directory names and special symbols to indicate the route to a file or resource.

Paths exist in two primary contexts: file systems (the way files are organized on your computer) and URLs (the way resources are organized on the web). While the syntax may vary slightly between these contexts, the fundamental concepts remain the same.

Absolute Paths: The Complete Address

An absolute path provides the complete address to a file or resource, starting from the very beginning of the file system or web domain. These paths are called "absolute" because they contain all the information needed to locate the resource, regardless of where you currently are in the system.

File System Absolute Paths

In file systems, absolute paths begin at the root directory. On Windows systems, this typically starts with a drive letter, while on Unix-based systems (Linux, macOS), it starts with a forward slash.


# Windows absolute paths
C:\Users\John\Documents\project\index.html
D:\Development\websites\portfolio\images\logo.png

# Unix/Linux/macOS absolute paths
/home/john/documents/project/index.html
/var/www/html/images/banner.jpg
/Users/sarah/Desktop/photos/vacation.jpg

URL Absolute Paths

For web resources, absolute paths include the complete URL with protocol, domain, and path to the resource.


https://www.example.com/blog/article.html
https://github.com/user/repository/blob/main/README.md
https://cdn.example.com/assets/images/logo.svg
https://api.service.com/v1/users/profile

When to Use Absolute Paths

Absolute paths are ideal when you need reliability and consistency across different contexts. They work regardless of where your current working directory is located or which page you are linking from. This makes them particularly valuable for:

Cross-domain references: Linking to resources on different websites or domains
System-level scripts: Programs that need to access files from various locations
Configuration files: Settings that specify exact locations of important files

Absolute Path Reliability

The key advantage of absolute paths is their reliability. An absolute path will always point to the same resource, no matter where you use it. However, this reliability comes with a trade-off: absolute paths can become invalid if files are moved or if you move your project to a different server or directory structure.

Relative Paths: Navigation from Your Current Location

Relative paths provide directions to a file or resource based on your current location in the file system or website structure. Instead of providing the complete address, relative paths give step-by-step directions from where you currently are to where you want to go.

Understanding Relative Path Symbols

Relative paths use special symbols to indicate direction and movement within the directory structure:

./: Represents the current directory. This is often optional but can be included for clarity.
../: Means "go up one directory level" or "move to the parent directory."
../../: Means "go up two directory levels."
No prefix: Files or folders in the current directory can be referenced directly by name.

File System Relative Path Examples

Consider a project structure where you are currently in the src directory:


project/
├── src/                  # <-- You are here
│   ├── components/
│   │   └── header.js
│   └── styles/
│       └── main.css
├── public/
│   └── images/
│       └── logo.png
└── index.html

From the src directory, here are relative paths to various files:


components/header.js        # File in subfolder
styles/main.css             # File in different subfolder
../index.html               # File in parent directory
../public/images/logo.png   # File requiring navigation up and down

Web Development Relative Path Examples

In web development, relative paths are commonly used in HTML links, CSS imports, and JavaScript file references. Assume you have an HTML file at /blog/posts/article.html:


<!-- Relative paths from /blog/posts/article.html -->
<link rel="stylesheet" href="../../css/styles.css">
<img src="../images/thumbnail.jpg" alt="Article thumbnail">
<a href="./related-post.html">Read related post</a>
<script src="../../js/main.js"></script>

Advantages and Considerations

Relative paths offer significant advantages in terms of portability and maintainability. When you move a project from one location to another, relative paths continue to work as long as the internal structure remains the same. This makes them ideal for:

Project portability: Moving projects between different servers or directories
Local development: Working on projects locally before deploying to production
Modular components: Creating reusable components that reference nearby files
Version control: Ensuring paths work for all team members regardless of their local setup

Relative Path Context Dependency

The main limitation of relative paths is that they depend entirely on context. A relative path that works perfectly from one location may fail completely when used from a different location. Always consider where your code will be executed when using relative paths.

Root Relative Paths: Starting from the Top

Root relative paths are a middle ground between absolute and relative paths. They provide a path from the root of the current system or domain, but without specifying the complete protocol and domain information that absolute URLs require.

File System Root Relative Paths

In file systems, root relative paths begin with a forward slash and specify the path from the root directory of the current file system:


/home/user/documents/report.pdf
/var/www/html/images/banner.jpg
/Applications/TextEdit.app
/etc/nginx/nginx.conf

Web Development Root Relative Paths

In web development, root relative paths start with a forward slash and specify the path from the root of the current domain. These paths are particularly useful because they work consistently across your entire website:


<!-- Root relative paths work from any page on the domain -->
<link rel="stylesheet" href="/assets/css/main.css">
<img src="/images/logo.svg" alt="Company logo">
<a href="/blog/latest-post.html">Latest blog post</a>
<script src="/js/utilities.js"></script>

API and Web Service Examples

Root relative paths are commonly used in API development and web services:


// API endpoints using root relative paths
fetch('/api/users/profile')
fetch('/api/v1/products/search')
fetch('/admin/dashboard/stats')
fetch('/public/downloads/manual.pdf')

When Root Relative Paths Excel

Root relative paths are particularly valuable in web development scenarios where you need consistency across your site but want to maintain some flexibility:

Multi-page websites: Ensuring navigation and resource links work from any page
Content management systems: Providing consistent paths regardless of content structure
Single-page applications: Ensuring assets load correctly regardless of routing
Development environments: Working consistently across different subdomains or ports

Best of Both Worlds

Root relative paths offer the reliability of absolute paths within a domain while maintaining the flexibility needed for different environments. They work consistently across your entire site but still function when you move your site to different domains or servers.

Practical Scenarios and Decision Making

Understanding when to use each type of path is crucial for effective development. The choice depends on your specific context, requirements, and the relationship between the resources you are connecting.

Scenario 1: Building a Corporate Website

Imagine you are building a corporate website with the following structure:


website/
├── index.html
├── about/
│   ├── index.html
│   ├── team.html
│   └── history.html
├── services/
│   ├── index.html
│   └── consulting.html
├── blog/
│   ├── index.html
│   ├── posts/
│   │   ├── 2024-01-15-new-year.html
│   │   └── 2024-02-10-growth.html
│   └── images/
│       ├── post1-thumb.jpg
│       └── post2-thumb.jpg
└── assets/
    ├── css/
    │   └── main.css
    ├── js/
    │   └── main.js
    └── images/
        ├── logo.svg
        └── banner.jpg

For this website, here is how you might choose paths for different purposes:

CSS and JavaScript in the head: Use root relative paths (/assets/css/main.css) so they work from any page
Navigation between main sections: Use root relative paths (/about/, /services/) for consistency
Blog post thumbnails: Use relative paths (../images/post1-thumb.jpg) since they are always accessed from the posts directory
External resources: Use absolute paths (https://cdn.example.com/fonts/roboto.css) for CDN resources

Scenario 2: Working with a Development Team

When working with a team, path choices affect how easily your project can be shared and deployed. Consider a React application with this structure:


my-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   └── Footer.js
│   ├── pages/
│   │   ├── Home.js
│   │   └── About.js
│   ├── utils/
│   │   └── api.js
│   ├── App.js
│   └── index.js
└── package.json

In this scenario, relative paths are typically preferred for imports within the application:


// In src/App.js
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';

// In src/pages/Home.js
import { fetchData } from '../utils/api';

// In src/components/Header.js
import '../styles/header.css';

Scenario 3: Content Management and Scalability

For large websites or content management systems where content creators need to reference resources, root relative paths often provide the best balance of usability and reliability:


<!-- These paths work consistently regardless of page depth -->
<img src="/uploads/2024/february/event-photo.jpg" alt="Event photo">
<a href="/downloads/annual-report-2024.pdf">Download Annual Report</a>
<link rel="stylesheet" href="/themes/corporate/style.css">

Path Selection Strategy

The best path type depends on your specific context. Consider factors such as team size, deployment complexity, content management needs, and long-term maintainability when making your choice. Many successful projects use a combination of all three path types, each in the context where it provides the most benefit.

Common Pitfalls and Troubleshooting

Understanding common mistakes and how to troubleshoot path issues will save you significant development time and frustration.

Relative Path Confusion

The most common mistake with relative paths is losing track of your current location. When a relative path doesn't work, first determine exactly where your code is executing from:


// In JavaScript, you can check your current location
console.log(window.location.pathname);

// In Node.js, you can check the current working directory
console.log(process.cwd());
console.log(__dirname); // Current file's directory

Case Sensitivity Issues

File systems vary in case sensitivity. Unix-based systems (Linux, macOS) are case-sensitive, while Windows is typically case-insensitive. This can cause problems when deploying:


# This might work on Windows but fail on Linux
/Images/Logo.PNG  # Actual file
/images/logo.png  # Path in code

Special Characters and Encoding

Paths containing spaces or special characters can cause issues. Best practices include:

Use hyphens or underscores instead of spaces in file names
Avoid special characters that have meaning in URLs or file systems
Use URL encoding when necessary for web paths

Server Configuration Considerations

Root relative paths depend on server configuration. A path like /api/users might need to be /myapp/api/users if your application is deployed in a subdirectory.

Testing Across Environments

Always test your paths in environments that mirror your production setup. What works in local development may not work in staging or production if the server configuration or directory structure differs.

Key Concepts Summary

Understanding paths is fundamental to working effectively with files and web resources. Each path type serves specific purposes and excels in different contexts:

Absolute paths provide complete addresses that work from anywhere but can become invalid when resources are moved. They are ideal for cross-domain references and when you need guaranteed reliability in the current environment.

Relative paths offer excellent portability and are perfect for maintaining relationships between files that move together. They require careful attention to context but enable flexible, maintainable code structures.

Root relative paths strike a balance between reliability and flexibility, working consistently within a domain or file system while remaining independent of the current location.

Mastering these concepts enables you to make informed decisions about resource references, create more maintainable code, collaborate effectively with teams, and deploy applications successfully across different environments. The key is understanding not just how each path type works, but when and why to use each one in your specific context.

Activity Instructions

Practice your knowledge of Javascript by answering the following questions.

What is an absolute path? Provide an example for both a file system and a URL.

Answer (click to expand)

An absolute path is a complete path that specifies the location of a file or resource from the root of the file system or web domain. It provides all the information needed to locate the resource, regardless of the current working directory or page location.

File System Example:
Windows: C:\Users\John\Documents\project\index.html
Unix/Linux/macOS: /home/john/documents/project/index.html

URL Example:
https://www.example.com/blog/article.html
What is a relative path? Provide an example of how to reference a file located in a sibling directory.
Answer (click to expand)

A relative path specifies the location of a file or resource in relation to the current working directory or page location. It uses special symbols like ./ for the current directory and ../ to move up one directory level.

Example:
Given the following structure:
```
project/
├── src/
│   └── components/
│       └── header.js
└── public/
    └─└ images/
        └─└ logo.png
```
To reference logo.png from header.js, you would use the relative path:
```
../../public/images/logo.png
```
What is a root relative path? How does it differ from an absolute path?

Answer (click to expand)

A root relative path specifies the location of a file or resource starting from the root of the current file system or web domain, but without including the protocol and domain information that absolute URLs require.

Difference from Absolute Path:
An absolute path includes the full address (e.g., https://www.example.com/blog/article.html), while a root relative path starts from the root of the domain (e.g., /blog/article.html).
Given the following filesystem example. Assume that you are in the math directory. How would you refer to the file lab-report.txt using each of the three types of paths?
(Assume this is on the C: drive on Windows or root on Unix-based systems)
```
school/
├── math/
│   └─ homework.txt
└── science/
    └─ lab-report.txt
```
Answer (click to expand)

Absolute Path:
Windows: C:\school\science\lab-report.txt
Unix/Linux/macOS: /school/science/lab-report.txt

Relative Path:
../science/lab-report.txt

Root Relative Path:
/school/science/lab-report.txt
Given the following web development context, assume your current page is project.html, how would you reference the image background.jpg using each of the three types of paths?
Assume this site is hosted at https://www.my-site.com
```
/
├── index.html
├── about.html
├── assets/
│   ├── images/
│   │   └─ background.jpg
│   └── css/
│       └─ styles.css
└── content/
    └── project.html
```
Answer (click to expand)

Absolute Path:
https://www.my-site.com/assets/images/background.jpg

Relative Path:
../assets/images/background.jpg

Root Relative Path:
/assets/images/background.jpg

Submission

After you have completed all the learning activities for this lesson, return to Canvas to submit a quiz.