I am experiencing difficulty locating the style.css file within my Node.js/Express application

I am currently working on a Node.js/Express app and I'm facing an issue where my browser is unable to find my style.css file, even though I am using a static file.

Here is the directory structure:

public -> css -> styles.css

server -> server.js

views -> layout -> header.ejs

In header.ejs :

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/asset/css/style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

In my server.js :

// Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(session({
secret: 'kfhkhkgfkgfkhgjdkdkk',
resave: false,
saveUninitialized: true,
cookie: { secure: false }
}));
app.use(require('./middlewares/flash'));
app.use('/asset', express.static(__dirname + '/public'));

Thank you in advance for your assistance ;)

cssnode.jsexpress

Answer №1

The problem lies in the structure of your directories. The issue is that you currently have a file named server.js located in a folder called "server", which is causing a particular line to fail.

app.use('/asset', express.static(__dirname + '/public'));

To resolve this issue, try using the code below. This code properly joins the path of the public directory with respect to the server folder.

var path = require('path');
app.use('/asset', express.static(path.join(__dirname, '../public')));

Answer №2

Below is the representation of my tree:

Folder structure: public -> css -> styles.css

Link to external stylesheet: href="/asset/css/style.css"

Test link to internal stylesheet: href="css/style.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

Issues with Typegoose and Mongoose Enums when utilizing an array of strings

One of my enums is defined as follows: export enum Careers { WEB_DEVELOPMENT = 'Web Development', MOBILE_DEVELOPMENT = 'Mobile Development', UI_UX = 'UI/UX' } This particular enum is used as a mongoose property like so: ...

node.jstypescriptmongoosenestjstypegoose

Tips for assigning a JSON object as the resolve value and enabling autosuggestion when utilizing the promise function

Is there a way to make my promise function auto-suggest the resolved value if it's a JSON object, similar to how the axios NPM module does? Here is an example of how axios accomplishes this: axios.get("url.com") .then((res) => { Here, axios will ...

javascriptnode.jstypescriptnpmparameters

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Is there a way to render a box on another box's border, similar to the example image here: Expected Output I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution. If you have any advice or suggestio ...

htmlcssflexboxfrontend

ways of exporting and using arrays in Node.js

Constantly receiving the "undefined" error in main.js: var dbAccess = require('../dao/dbAccess'); dbaInstance = new dbAccess(); var wordPool = dbaInstance.getWordPool(); console.log (wordPool); The contents of "dbAccess.js" are as follows: var ...

javascriptnode.js

Outputting data to a WriteStream within an Event Listener

My current issue involves an EventEmitter object set up to listen for events and write information to a file when the event is emitted. Using fs.createWriteStream(path, { flags: 'a'});, I have opened a FileStream. However, emitting events quickly ...

javascriptnode.jsevent-handling

What is the protocol for NPM when dealing with conflicts among sub/transitive dependencies?

Recently, I stumbled upon the revelation that NPM functions differently from other package management systems I've previously used. From my current understanding, each dependency has its own unique node_modules folder containing its dependencies, and ...

node.jsnpmdependency-management

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

I am currently utilizing thymeleaf as my chosen template engine for a spring boot project. Here is the directory structure: src/main/ |- java | - UserAdministrationController.java |- resources | - static | - admin | - css ...

htmlcssspring-bootthymeleaf

The EJS templating system

I am currently working on a node.js project and I have an ejs template file that utilizes templates for the header and footer. The structure of template.ejs is as follows: <%- include(header) %> main content <%- include(footer) %> <script ...

javascriptnode.jsexpressejs

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

Capture the beauty of Safari with images displayed in the input file element

I'm facing an issue with the file upload element on my website. Most browsers, like Chrome and FF, display the image name when a file is chosen. However, Safari seems to show a tiny thumbnail instead. My goal is to create a custom upload button that ...

htmlcsssafari

Obtaining a URL from a parameter

I have a unique situation with one of my parameters in the routing, as it involves an actual URL. router.get('/api/sitemap/:url', function(req, res) { var url = req.params.url; ... } How can I ensure t ...

javascriptnode.js

Is it possible to adjust positioning using just CSS?

I'm attempting to arrange these elements as shown in the image below: https://i.stack.imgur.com/tWy1I.png https://jsfiddle.net/ut1mgcLb/ HTML <div class="object1"> <div class="snax-voting-container-body"> ...

htmlcss

Encountering an NPM issue while attempting to add @nuxtjs/firebase to my project

Recently, I encountered an error that has left me perplexed and unsure of how to resolve it. Currently, I am working with Nuxt.js and looking to integrate Firebase into my project. However, upon trying to visit firebase.nuxtjs.org and install @nuxtjs/fireb ...

node.jsfirebasenpmfirebase-authenticationnuxt.js

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

htmlcss

Sliding divider across two div containers with full width

Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows: My objectives are twofold: Both slide1 and slide2 should occupy the full width of the page. Additionally, I am looking for ...

javascriptjqueryhtmlcssfullpage.js

Failed to send POST request via HTTP

When attempting to retrieve staff information such as name and email using GID, I encountered the following error while sending a POST request: Error: write EPROTO 101057795:error:14094410:SSL routines:ssl3_read_bytes:sslv3 alert handshake at WriteWrap.a ...

node.jssslhttpsopensslhttp-post

Add-on or code snippet for Node.js that allows for optional regex groups

Strings in Sequence line 1 = [A B C] line 2 = [A C] line 3 = [B C] Regular Expression /\[?(?<groupA>[A])?(?:[ ]*)?(?<groupB>[B])?(?:[ ]*)?(?<groupC>[C])\]/gm Is there a way to achieve the desired output using a plugin or spe ...

javascriptregexnode.js

What causes a 404 error when using a router in Express/node.js?

I've recently created an Express app and set up a custom route (/configuration). However, when I try to access http://localhost:3000/configuration, I keep getting a 404 Not Found error from the server. I've reviewed the code but can't seem t ...

javascriptnode.jsexpressrouteshttp-status-code-404

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

htmlcsstwitter-bootstrap

Footer alignment issue when using react-full-page is causing it to not lineup at the bottom of the page

Currently, I have integrated the react-full-page package into my project. However, after adding the Footer to the routes, I noticed that the footer is only visible in the second section of the page and does not appear at the bottom as expected. If you wan ...

cssreactjs