The HTML file is unable to fetch the CSS file because of an incorrect file path

I am encountering an issue with my application that serves HTML, and the code snippet looks like this:

// ... 
var staticPath = config.development.staticFiles;
app.get('/category/:catName', function(req, res) {
    res.sendFile(path.join(__dirname, staticPath + "shop-grid.html"));
})

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, staticPath + "index.html"));
})  
// ...

Within each HTML file, the CSS is linked as follows:

<link rel="stylesheet" href="css/style.css" type="text/css">

The index.html displays correctly, but the "shop-grid.html" does not load with CSS. It appears to be trying to load the CSS from "localhost:8080/category/css/style.css" instead of "localhost:8080/css/style.css", which works for the first HTML page.

Can someone please help me identify what mistake I made here?

Answer №1

One thing that puzzles me is why the relative path was modified when the HTML files are stored in the same location, only the URL has been altered.

Remember, the browser doesn't have any knowledge of how your files are organized on the server.

It solely understands URLs.

css/style.css represents a relative path.

Relative paths get resolved by taking the current page's URL, deleting everything following the last / in the path, and then adding the relative path.

http://localhost:8080/ + css/style.css =

http://localhost:8080/css/style.css

http://localhost:8080/category/cats
+ css/style.css =
http://localhost:8080/category/css/style.css


Opt for an absolute path: /css/style.css.

Absolute paths are resolved by omitting the entire path (everything after the hostname and, if applicable, port number) and then appending the absolute path.

Answer №2

Redirecting in both scenarios leads to a change in the _dirname, however when loading shop-grid.html, it redirects to a completely different directory. The href path is not global but rather relative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there any potential risks in sticking with Angular 2 instead of upgrading to a newer version?

Our current legacy app has been utilizing Angular 2.4 from the start. The package.json file contains numerous overrides for packages, leading us to use npm install --force during our build process due to peer dependency conflicts and unresolved dependencie ...

Managing input/output requests on Amazon EC2 instances

Having mastered node, javascript, and other technologies the hard way, I am finally on the brink of releasing my debut web application. After signing up for Amazon Web Services and setting up a micro instance to take advantage of the first year's free ...

The request.body in Express.js is currently undefined

const express = require('express'); const cors = require('cors'); const app = express(); app.use(express.json()) app.use(cors()); app.post('/', (req,res) => { console.log(req.body); res.send('received') ...

JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up. ...

The fading effects are not functioning as expected in the following code

Hey there, I'm not the most tech-savvy person, but I managed to come up with this code for page redirection. Unfortunately, I couldn't quite get the fade out and fade in effects to work properly when executing it. If anyone out there can help me ...

How can we consolidate an excess of menu items into a condensed, collapsed menu?

I have a navigation bar displaying category items, but if the menu items exceed the navbar width, how can I condense them into a drop-down menu using Bootstrap 3.0? Currently, my navbar only shows 10 items due to limited space. However, I have more items ...

Can you explain the process of gathering texts based on CSS selector?

I wanted to place texts next to the div-class as shown in the following code snippets. <div class="review-contents__text">소재가 좀 저렴해 보이지만 그래도 입으면 휠씬 나아보여요</div> Initially, I wrote a code ...

Is it possible for an object hidden in the DOM using jQuery to magically reappear when you click the back button or use the bfc

Is there a way to prevent a box from reappearing when using the back button on a webpage? On my website, there is a box that shows up on the first visit. However, when navigating using the back buttons on the site or the browser back button, the box appea ...

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

The AddClass function does not work properly in the Kendo Tree View after the RemoveClass function, especially when selecting the same node

Hey there, I am currently working with a kendoTreeView and trying to set up an action triggered by clicking on the same selected node. To achieve this, I incorporated the following code in the change event: change : function(e) { $ ...

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

What is the method for locating all anchor tags "In General" within the inner HTML of a div using XPath?

This query is related to a discussion on anchor tags in this thread. I am interested in identifying all anchor tags within a string. The scenario provided below is similar to the aforementioned issue, however, I aim to accomplish this using xpath and angu ...

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

Center the navigation bar within a division

Kindly take a look at the following link: http://83.212.101.132/betdk/home/two As the user scrolls, the navbar moves to the top thanks to the affix plugin. However, it occupies the entire row with "Home" aligned to the left. What steps should I take ...

Is there a way to retrieve an htm attachment from CouchDB and display it as HTML on a web browser?

Using Express with CoffeeScript. The goal is to retrieve test.htm from CouchDB using a request and then render the HTML file on the browser. In my app.coffee file, I have the following code: app.get "/testreq", (req, res) -> gets = require("request" ...

Execute a multer request to upload an image (using javascript and express)

I am utilizing the Express server as an API gateway for my microservices, specifically to process and store images in a database. The issue at hand is that within the Express server, I need to forward an image received through a POST request from the clien ...

How can I use Bootstrap to center footer text and display two images on the right side?

Looking for some assistance with the footer on my webpage. I would like to center the text in the footer with two images positioned on the right side. Thank you in advance. Footer Below is the code I am currently using: <div class="CopyRightFoote ...

Is it advisable to exclude passport.js from gitignore along with Node?

While working on implementing user authentication, I followed a tutorial provided by Scotch.io. The tutorial included a passport.js file in the config directory that contained authentication tokens and database login information. I understand the importa ...

Tips for customizing the appearance of a disabled checkbox

I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...

JavaScript Button with the Ability to Input Text in a TextArea?

For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...