Static express fails to load CSS files from the main folder

When my app is loaded from a url like: server.com/pdf/12345, it tries to find static files at

GET /pdf/12345/assets/css/stylesheet.css
and returns a 404 error. I've been struggling to get it to search for the files in /public/assets instead. I've tried various configurations with express.static but haven't had any luck.

This is how my directory structure is set up:

public
--assets
----css
views
--partials
----header.ejs
routes
--api.js
server.js

The server.js file looks something like this (excluding requires for simplicity):

app.use('/', routes);
app.set('views', './views');
app.set('view engine', 'ejs');

app.use('/public', express.static(path.join(__dirname, 'public')));
http.createServer(app).listen(port, function() {
})

Within my partials/header.ejs file, there's a link to the stylesheet.

Answer №1

Here is a better approach:

app.use(express.static(path.join(__dirname, 'public')));

By using this code snippet, you ensure that express serves static files from the 'public' directory. If you were to start with app.use('/public', you would restrict the function to only be mounted on the path /public. Since your URL does not begin with server.com/public, express.static() would not be triggered.

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

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

Grab cell information from a dynamic table using Ruby and Selenium

I am attempting to retrieve a property of cells within a table. <table id="m-103" class="m-row" cellspacing="0"> <a name="2"></a> <table id="m-108" class="m-row " cellspacing="0"> <a name="3"></a> <table id="m-191" ...

Troubleshooting problem with modifying Bootstrap button styling and hover effects

When creating a navigation menu with Bootstrap, I decided to change the buttons from the primary class to inverse. I then went on to further customize the inverse class using inline CSS to match my specific look and feel requirements. .btn-inverse { b ...

Tips for making a CSS sprite clickable using the <a> tag instead of relying on Javascript

Can you create a click-able CSS sprite without the use of Javascript? Here's an example: Check out the live demo here. HTML: <div></div> CSS: div { width: 100px; height: 100px; background-image: url(http://perfectwebtutori ...

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

Having trouble with installing packages through NPM in Node.js?

Whenever I try to install a package, NPM shows me an error like this: [............] /roolbackFailedOptional: verb npm-session .... followed by the final error message: npm ERR! code e503 npm ERR! 503 Service Unavailable: npm ERR! A complete log of th ...

Two HTML elements positioned alongside each other with inline word wrapping

Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use. I am attempting to align some "label ...

What steps can I take to prevent an HTML box from appearing too close to one side of the screen?

My current goal is to achieve this layout (without the red arrows, of course): https://i.sstatic.net/Mm1rB.png However, I have encountered a CSS issue that I can't seem to figure out on my own. When I view my page, it appears like this: https://i.s ...

The link and source attributes are missing from the .ejs template

I am experiencing an issue where the href and src attributes in my .ejs file are not referencing my local files properly. My setup involves node.js and express. Here is a snippet from the .ejs template that is causing the problem. <head> & ...

Position the outcome on the far right side

I have a question that I am revisiting with more details in hopes of finding a better solution. In the code snippet below, the output is aligned to the right of the row: <table border="1" style="width:100%"> <tr> <td align="right"> & ...

Can Node.js Utilize AJAX, and if So, How?

Coming from a background in browser-based JavaScript, I am looking to dive into learning about node.js. From my current understanding, node.js utilizes the V8 engine as its foundation and offers server-side JavaScript capabilities along with pre-installed ...

The width of the child box does not properly receive the 100% application

Artistic Inspiration I have created a unique and elegant card layout design. * { box-sizing: border-box; } .card { display: flex; width: 600px; height: 400px; } .card > .img-window { width: 100%; background-image: url('https://s3- ...

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

Struggling with removing the unattractive left border on my Tumblr page

I am currently working on the website www.fashiontogo.ca To see the source code, please use Google Chrome's feature to view the source since I cannot provide the HTML or CSS directly here. The site is not my own creation, and I did not develop it fro ...

Adjusting padding evenly across an unspecified number of columns

I'm currently facing a challenge with a multi-column layout. In a basic setup of three columns, I aim to adjust the padding so that each gap between the columns is consistent (2rem). However, the tricky part lies in crafting rules that can be applied ...

Issue encountered while attempting to upload a picture to ImgBB

Currently I am attempting to upload images onto the ImgBB platform using NodeJS and GraphQL. My approach involves a mutation called uploadImage. This mutation requires an image in the form of a data URL string, and is structured as follows: import parseDat ...

The CSS font-weight attribute can be set to bold or light

I've encountered a strange issue with the font-weight property when applied to a button element. When set to 400, everything functions as expected. However, attempting to set it to either 300 or 500 does not produce any noticeable changes. Interesting ...

The text in the form's text area refuses to wrap onto multiple lines, it just continues to roll endlessly

I'm encountering an issue with a form on my client's website, specifically in the footer and contact page. For some reason, the text area box in the form does not automatically move to a new line when it reaches the end of the box - it just keeps ...

Creating a variable with the use of @include

Here's a question that I need help with. I have a SASS @include function that dynamically calculates the font size. h2 { @include rfs(2rem); } I use this to adjust the font size based on screen resolution, but I'm facing an issue where a gre ...