Why is there a CSS reference failure in Express and how can it be resolved?

Below, you'll find a simple express server I've put together:

// check out my basic Express server
var express = require("express");
var app = express();
var bodyparser = require("body-parser");

app.use("/public/", express.static("./public/"));
app.use("/node_modules/",express("./node_modules/"));
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
//app.set
app.engine("html", require("express-art-template"));
app.get("/index", function (request, response) {
    response.render("index.html");
});
app.listen(9000, function () {
    console.log("server is running!!");
});

There's an issue with the CSS. Take a look at the image below for a better understanding: https://i.stack.imgur.com/eyWLm.png

Here's a glimpse of my index.html file:
https://i.stack.imgur.com/G0pLT.png

And this is what my resources folders look like:
https://i.stack.imgur.com/3pcfL.png

I've tried to solve the problem on my own but haven't had any luck so far. Can anyone help me fix it?

Answer №1

I have foolishly committed an error.

app.use("/resources",express.static("./node_modules"));

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

Communicate with MongoDB using Express

Currently, I am facing an issue while trying to establish a connection between my application and MongoDB using Express. The collection 'users' is functioning perfectly without any troubles, but the same cannot be said for my second collection. W ...

What is the best way to eliminate specific elements from an array of objects in MongoDB aggregate based on a condition?

I have a database of documents called ChatRooms stored in MongoDB with the following structure: { _id: ObjectId('4654'), messages: [ { user: ObjectId('1234'), sentAt: ISODate('2022-03-01T00:00:00.000Z') ...

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

What is the best method for connecting my HTML to jQuery code?

Apologies for my lack of experience in coding, but I will try to keep this brief. To put it simply, when I insert my jQuery code directly into the HTML file below the content, it works perfectly - the element I want to animate 'hides' and then & ...

Adjusting the size of div content without changing its dimensions

I'm in search of a solution for resizing the contents within a fixed width and height div. Currently, my div looks like this: <div id="editor_preview" style="width:360px !important; color:gray; ...

Identifying browsers with Zend Framework versus JavaScript

Currently, I am working on developing an application that demands the capability to upload large files. After much consideration, I have opted to utilize the FormData object as it allows me to provide progress updates to the user. Sadly, Internet Explorer ...

Design a CSS floating div with a captivating bubble effect

My current setup includes a DIV element styled as follows: <div class="modal"></div> .modal { position: fixed; z-index: 999999; right: 310px; top: 67px; width: 431.6px; height: 550px; border-radius: 25px; box-s ...

Typescript error: Cannot access property "status" on type "never".ts(2339)

Currently, I have a method that utilizes nextjs/auth to sign in with credentials from a form. However, I am encountering a type checking error Object is possibly 'undefined'.ts(2532) const doStuff = async (values: any) => { const result: S ...

using Javascript to eliminate necessary tags from concealed tabs

My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here&apo ...

updating dropdown options based on user input with PHP

I need help with implementing a code for two dropdown boxes. The first dropdown should display main category values dynamically, and when a value is selected, the second dropdown should appear with corresponding sub-category values. How can I achieve this ...

Trouble with jQuery script causing initial word count issue in textarea upon page load

I have implemented a word count textarea jQuery script and I am trying to figure out how to update the word count onload to 2 when the text area initially displays "this example". Currently, it shows 0 words. Although I can set focus on it and move the c ...

Aligning an image in a way that adjusts to different screen sizes

Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...

What steps should I take to begin developing commands tailored to specific roles?

I am trying to set up a system where only users with the role '[ADMIN]' in the server can use the command ${prefix}hall to display an embed using my Discord bot. I do not want any other roles to have this permission. However, I am unsure of how ...

Ways to create a back-and-forth transition across a sequence

Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...

What are the steps to incorporate a Microsoft Project Dashboard into a web application?

Currently, I am working on a project that involves incorporating an MS Project Dashboard into my Angular-based web application with a Node backend API. Our goal is to seamlessly embed the MS Project dashboard within our application. However, I am unsure of ...

The method models.User.fromURI is unsuccessful

When I try to call models.User.fromURI as shown below: models.User.fromURI("spotify:user:" + user, function (user) { $(div).html("<b ><a style=\"color:#FFFFFF\" href=\"spotify:user:" + user.username + "\">" + us ...

When using JSON.Stringify in a React App, it only displays the first item and the length of the object instead of all the other items

Working on a React App, I encountered an issue while trying to convert an array to JSON and send it to the server. My approach was like this: console.log(JSON.stringify(mainArray)) I anticipated seeing output like this during testing: "breakfast": { ...

Navigating through various versions of admin-on-rest can be perplexing

This question is likely directed towards maintainers. Currently, I am using the stable version of admin-on-rest (https://www.npmjs.com/package/admin-on-rest) which is at 1.3.4. It seems that the main project repository is only receiving bug fixes, while ...

Retrieve JSON data from a PHP script to be used in an Angular scope

I am attempting to retrieve JSON data from a PHP file to use in an Angular controller. I have used json_encode(pg_fetch_assoc($result)); within the PHP file and when I check with console.log($scope.contents); in the Angular controller, the JSON data is ret ...

Activate audio when the link is clicked

Recently, I created a compact web application and it's almost complete. However, there is one cool functionality that I am missing. My goal is to have a sound play when the user clicks a link, but after playing, I want the navigation to continue as us ...