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

Is there an alternative approach to managing Exceptions in Express with Node.js?

Here is the approach I take to handle and log exceptions in an Express application. Is there a better way? Error handling can be tricky, especially with Express. Let's start with a simple scenario. Consider the following app: console.log(hello.hell ...

node.jsexpresserror-handlinguncaught-exceptionwinston

What is the most efficient way to generate a pug file with a hashed resource name using Webpack 2.0?

Here is how my file structure looks: /public (files ignored by git) /src index.js /views index.pug server.js webpack.config.js index.pug <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="/publi ...

javascriptexpresswebpackpug

Blank space appearing at the bottom of webpage

I have a strange issue with my document where there is a small white gap at the end. Upon inspecting the element, it seems to be related to the body. Any suggestions on how to resolve this? ...

htmlcss

What is the method for retrieving the user's email from the server using auth0 and node.js?

After logging in on the frontend, I am able to access the user's email through: console.log(auth.profile.email) Next, I make a call to a protected service on the backend to retrieve some information. Only logged-in users can successfully receive d ...

angularjsnode.jsauth0

What could be causing the issue with the 100% height and 100% width not functioning properly on my ASPX page?

The CSS and HTML code work perfectly in an isolated test environment: body, html { height: 100%; min-height:600px; min-width:800px; overflow:hidden; margin:0;padding:0; } html {overflow:auto;} .fill {height:100%; width:100%; backgro ...

htmlcssasp.net

Issue encountered: Unable to access X display - ERROR:browser_main_loop.cc(1400) - An unexpected error code was returned by the futex facility

I've been troubleshooting an electron project that involves a GUI and user input. In VSCode powershell terminal, I ran the following commands: npm install npm start After running these commands, error messages appeared in the terminal: Error Messa ...

node.jsnpmelectron

Determining the location of the hamburger item on the bar

As I work on creating a hamburger icon, I am faced with the challenge of accurately positioning the bars without guessing. The height of the hamburger is 24px, and I initially thought placing the middle bar at half the height (12px or top: 12px) would cent ...

htmlcsssass

Incorporating numerous Link headers within a node.js server

Is there a way to achieve this? res.header('Link' , '<' + link + '>; rel="' + rel + '"; title="' + title + '"' ); It looks like it's replacing the existing content instead of adding to it. ...

node.js

What is the best way to instruct the protractor to pause until the webpage has completely loaded

My application is taking some time to load the login page, causing Protractor to attempt entering the username before the page fully loads. To resolve this issue, I need to instruct Protractor to wait until the login page is completely loaded. Can you ass ...

angularjsnode.jsautomationjasmineprotractor

Is Node-Redshift capable of using the Copy command to transfer data from S3 to Redshift?

Is there support for the "Node-redshift" module to perform a Copy From query in order to extract bulk data from an S3 bucket and load it into Redshift? If not, what alternative methods are available to connect to Redshift and utilize the Copy command? ...

node.jsamazon-s3amazon-redshiftetl

Leveraging the power of Ajax and Nodejs to dynamically refresh content on a webpage

I'm currently working on creating a loop to refresh a webpage every 30 seconds, but I'm facing some challenges with making an ajax call using the setInterval function. Below is a snippet of my server-side code: var app = express() app.get(' ...

javascriptajaxexpress

The hover animation is not functioning properly in Icomoon

I have implemented a menu with a CSS3 hover animation called toTopFromBottom. Now, I want to replace the Font Awesome icons with Icomoon icons and apply the same animation effect: HTML: <div id="top-bar" class="top-bar"> <div class="container" ...

htmlcssbootstrap-4css-transitions

Implementing image max-width and maintaining aspect ratios for responsiveness

Within the code snippet below and utilizing Bootstrap, a grid layout is defined with several .block components, each comprising an image and a title. The images are designed to be larger than the column size so that they can expand to full width for respon ...

javascriptjqueryhtmlcssimage

Guidelines for establishing a dynamic reference in Node.js with MongoDB

I am currently working on a nodejs project and I have encountered an issue. I have a mongo schema that consists of a list of objects: players: [{ type: Schema.Types.ObjectId, ref: 'User' }] However, the "ref: 'User'" isn&ap ...

node.jsmongodb

Exploring the Functions of libuv's uv_check_t and uv_prepare_t

I've been diving into The libuv book, but unfortunately the section concerning check and prepare watchers is incomplete. Therefore, the only information I could gather was from uv.h: uv_async_t, but libuv does not guarantee that the callback will be ...

c++node.jslibuv

Differences between HTML viewports and media queries

For simple webpages, my general rule is to utilize viewport units as they provide a lot of flexibility to the website. However, when dealing with complex webpages, I usually opt for media queries. In some cases, especially intermediate ones, I find it ben ...

htmlcssmedia-queries

Challenges with removing jwt token cookie in Express

//token creation res.cookie('jwt', token, { httpOnly: true, maxAge : 60 * 60 * 24}); //logout and destroying the token exports.logout = (req, res) => { res.cookie('jwt', "token", {httpOnly:true,maxAge:1000}) //unfo ...

node.jsreactjsexpressjwtexpress-jwt

Tips for including a horizontal line beneath each heading in an HTML using just CSS

Is it possible to include a horizontal line following each heading without employing the <hr> tag? I am interested in accomplishing this solely within the parameters of the <style></style> tags. ...

htmlcss

Ensure that the child div is anchored to the bottom of the parent div container

I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...

htmlcss

Is it possible to establish a connection between React and a MySQL Database?

I've been encountering issues with connecting to a remote database in React. Despite my efforts, I haven't been successful in establishing the connection. I have tried various solutions without any luck. The goal is simple - I just want to connec ...

javascriptmysqlreactjsexpress