The middleware designed to serve static files is incompatible with dynamic routes

My Node/Express server was functioning correctly with the route "/:world", and the CSS file could be found without any issues.

However, upon changing the route to "/:world/:page", the server no longer locates the CSS file as expected.

I'm relatively new to this, so I'm wondering why this simple change is causing an issue. Any suggestions on how to solve this?

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const request = require('request-promise');
const port = process.env.PORT || 3000;

const app = express();

app.use(bodyParser.json());
app.use(express.static(__dirname + '/views'));
app.set('view engine', 'ejs');

app.get('/:world/:page', async (req, res) => {
    const world = req.params.world;
    const page = req.params.page;

    const worldInfo = await getWorldInfo(world);
    if (!worldInfo.world.world_information.players_online) {
        res.render('error.ejs');
    } else {
        const playersList = await getPlayersList(worldInfo, page);

        res.render('index.ejs', {
            playersList: playersList,
            world: world
        });
    }
});

app.listen(port, () => {
    console.log('Server is running on port ' + port);
});

Answer №1

It appears that the issue lies in the relative path. Let me provide an example to illustrate this.

In your initial route setup, using /:world, you would have a URL such as example.com/earth. If you include a <link /> tag like <link href="myCSS.css" />, it will point to example.com/myCSS.css.

In the 2nd route setup, using /:world/:page, the URL would be something like example.com/earth/about. Again, if you use a <link /> tag with <link href="myCSS.css" />, it will now point to example.com/earth/myCSS.css.

This is because the file path specified in the <link /> tag is relative to the current page's path.

To resolve this issue, you should update the <link /> to use an absolute path. There are two ways to achieve this:

  1. Use an absolute href like http://example.com/myCSS.css
  2. Use an absolute href like /myCSS.css - ensure it has a leading /

By implementing either of these methods, the browser will search for the CSS file starting from the root domain at example.com/myCSS.css. For instance, changing it to

<link href="/styles/myCSS.css" />
would prompt the browser to look for the CSS file at example.com/styles/myCSS.css.

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

Immersive Video Background Taking up the Entire Screen with Content Hidden Below

Currently working on integrating a full screen video background with content positioned below the fold. Successfully implemented the full screen video without any issues. However, struggling to figure out how to add content underneath the video while ensu ...

Choose all pseudo elements from elements belonging to the class or ID labeled as 'x'

I am seeking a solution to target all the pseudo elements of an element that carries the class galleryBlock, as well as a method to target all the pseudo elements of an element with a specific id. My code structure consists of a grid made up of multiple i ...

font-face not functioning properly in the live environment

I attempted to use @font-face to incorporate some unique fonts into my website. Surprisingly, everything worked perfectly fine when I tested it on localhost. However, as soon as I moved the code to a live server, the font-face stopped working in all browse ...

What is the best way to incorporate an animation into my text bubble? Specifically for a Twitch Alert, such as a bits alert

I'm attempting to customize my Twitch Alert in Streamlabs using code. Is there a way to incorporate animation into the text balloon? I've looked for tutorials or guides but haven't had any luck, so I could use some guidance. CSS #alert-use ...

Firebase Functions Event Source is currently in a pending state and is not progressing

I am currently utilizing an event emitter to execute specific functions that are necessary. The issue arises when I deploy the nodejs code as the event triggers do not seem to be detected once it is deployed, despite the firebase functions logger showing t ...

Performing calculations involving both select and checkbox input values, as well as handling negative numbers

Seeking assistance in creating a feature where users can select a billing term from a dropdown and then choose checkboxes to add to the total. While it works fine on JSFIDDLE, I encounter issues on my website - specifically when selecting all checkboxes, r ...

Unable to connect with the application on the same server using HTTPS for making API calls

After successfully deploying my Angular application on an Apache2 server, I encountered communication issues between the frontend, a Node.js application, and a Java application all deployed on the same server but running on different ports. Initially, mak ...

What are the best tools to develop a browser-based 2D top-down soccer simulation?

I'm looking to create a 2D top-down soccer simulation game for web browsers using modern technologies and without the need for additional plugins like Flash or Silverlight, making it compatible with mobile devices as well. The game will be AI-controll ...

CSS navigation issue

When using the third example provided on this page: http://simple-navigation-demo.andischacke.com/ I encountered an issue where the main page would display an empty div on the left instead of the content filling the entire area. However, when navigating ...

Finding a solution for restoring user access to authorized pages upon clicking the back button in web browsers

While working with the passport.js library to create a login page, I encountered an issue where logged out users could still access pages of other users by simply clicking the browser's back button. How can I resolve this problem? //Login Section con ...

Trouble with Metro UI Library: CSS not loading properly

I am having trouble with the navbar CSS on my website while using the Metro UI CSS library. Check out my HTML code: <!DOCTYPE html> <html lang="en"> <head> <title>TelePrint Blog</title> <link rel="stylesheet" href= ...

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

Displaying or concealing dropdown menus based on a selected option

My goal is to have a drop-down menu in which selecting an option triggers the display of another drop-down menu. For example, if I have options like "Vancouver," "Singapore," and "New York," selecting Vancouver will reveal a second set of options, while ch ...

MongoDB ceased functioning following authentication

Initially, all was well with this connection string: mongodb://0.0.0.0:27017/data. However, after adding authentication with the database: mongodb://user:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7b7b0a387f7e9f7e9f7e9f7"& ...

Run each element in sequence after the page has finished loading

I am currently exploring animate.css at and I am curious if it is feasible to apply CSS animations to multiple elements sequentially upon page load. Below are the three distinct elements I aim to animate: <img src="flowers.png" data-test="bounceInDow ...

Is it Secure for the Client to Send a Request to the Server via Socket.IO in Firebase?

While I recognize that security rules are crucial for safeguarding data, they don't align with my approach to storing user data when certain elements are clicked. Enabling 'write == true' grants users the ability to willingly alter the datab ...

Encountering a dependency issue while trying to build with NPM

I have been researching peer dependencies with npm, but this error that I am encountering is causing confusion. Can someone assist me in identifying the package responsible for this issue? Despite trying to follow step by step instructions from start to fi ...

Various HTML origins

Upon examining the page source, I noticed that it contains JavaScript code: <script language="javascript" type="text/javascript"> styling += 'ul#topnav a.tabHeader5'; styling += '{'; ...

Switch out PayPal Express for Adaptive Payments

I have been considering if adaptive payments offer a similar feature for users to complete the payment on my website. Currently, my website operates by having 'sellers' list products for sale and 'buyers' making purchases using PayPal e ...

Element DIV enclosed within a <tr> element

I'm having trouble adding a <div></div> block inside a <tr> block after the end of the <td> blocks. The issue is that it keeps shifting to above the table structure. Here's an example of what I want to achieve: ...