When embedding a static HTML file into an Express route using sendfile, the .js and .css files associated with it will be downloaded but not properly implemented

I currently have a basic local server set up using Express.

My project consists of an app.js and index.js file for routing purposes.

Within the app.js file, I have all the standard Express configurations, including the line to serve static files:

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

In the index.js file, I have defined the route:

 router.get('/', function(req, res) {
        res.sendfile('public/staticHTMLfile.html');
    });

Inside the public folder, I have my .js and .css files, with proper paths referenced in the static HTML file.

Although when I visit localhost:3000/ in a browser, the HTML loads correctly, the associated js and css files show 404 errors in the npm command prompt:

GET /public/jsFile.js 404 424ms - 1.34kb
GET /public/cssFile.css 404 27ms - 1.34kb

Why aren't they being applied to the HTML? I have checked the script and link tags for accuracy.

If you need more information, please let me know.

Thank you for your assistance.

Answer №1

When you encounter a 404 error message while trying to access a file like GET /public/jsFile.js, it indicates that the file cannot be located. Instead of being downloaded, these files are typically requested but may have an incorrect path specified.

In this case, since the path includes "public/jsFile.js," the issue likely stems from including the unnecessary "public" segment in the path. To resolve this, adjust the paths for your JS and CSS files in the HTML to be "/jsFile.js" and "/cssFile.css."

You can verify this by attempting to access /public/jsFile.js in your browser - which should result in an error. However, accessing /jsFile.js should function correctly as expected.

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

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

"Executing ng-click directive on a second click changes the route in AngularJS

Why does my ng-click only redirect to a new location on the second click? It should redirect to $location.path('/login.signin');, but it only works if I click the button again. It's strange. Where could this issue be originating from? Belo ...

Install a package from npm using yarn, not from the workspace

Having an issue with yarn workspaces in my current project: Within my monorepo, I have: a "packages" folder with npm packages an "apps" folder with node.js apps Specifically in one of my apps, I'm attempting to install a package from the "packages" ...

The console is not displaying the value of the variable

Below is the function I am using: child.stderr.on('data', function(data, callback) { getEventLog.getId(uuid, function(err, id, code, callback){ getEventLog.getDuration(id, uuid, function(err, duration, callback){ jobRun.duration = du ...

Is there a way to generate a 3D triangular curve using a cubic-bezier function connecting 3D points in Three.js?

After exploring this discussion, I am attempting to create a 3D curved triangle using a NURBS surface, but I'm struggling with setting up my 3D points for this task. Here is my current implementation: var edges = this.getEdges(), // An edge is compr ...

The graphic is displayed at a width of 50%

I am currently working on a FrontEnd project and implementing Bootstrap 3 for the grid system. Additionally, I am utilizing art direction with the picture element. However, I seem to be facing an issue with the images. Every time I include the following s ...

Display selected divs with dropdown box but show all divs when no option is chosen

I came across a helpful code on this website while working on my own website. After customizing it to my liking, I encountered some issues. My main goal is to have all divs displayed when no value is selected from the dropdown box. Below is the code that I ...

Is there a way to unshackle myself from the promise chain in Express and trigger an error ahead of time

Upon examining my request handler, it appears as follows: router.post('/', function(req,res) { var screencast; var channel; youtube.get(req.body.videoId).then(function(data) { screencast = data.screencast; channel = data.channel; ...

Guide on how to position the icon for the Ant Design datepicker before the input selector rather than after

Looking for a way to set the icon with or without a pseudo element for Ant Design, I've tried a method that isn't working. .ant-picker-input > input::before { content: url('../../public/assets/calendar.svg') !important; margin-r ...

JavaScript - asynchronous XMLHttpRequest with increment operation

Hello, it's my debut on SO, although I've been a regular user for quite some time and found all the answers I needed here...until now. I'm currently grappling with an intricate issue involving XHR. While I consider myself a bit of a JS newb ...

Executing both push and pull operations simultaneously using mongoose and Express in MongoDB

Currently, I find myself in a scenario where I need to simultaneously push and pull data. I've designed Schemas for categories and posts, where each post can be associated with multiple categories. This is achieved by using Object Referencing method ...

Arranging HTML elements using Jquery sorting

Possible Duplicate: How can I alphabetically sort a list using jQuery? Technology: Asp.net with jQuery. Hello everyone, Summary: I am relatively new to jQuery and have been working on a script that allows the Enter key to move to the next input elem ...

Interactive placeholder HTML form

Is there a way to automatically add a placeholder to an HTML form based on the selected option from a dropdown list? <fieldset id="productEditPanel"> <legend>Edit a Product</legend> <form method="POST" action="/admin/api/prod/ ...

Only import the Excel file into the database if it is located within the IIS Express directory

I am currently working on a program that is designed to import data from an Excel file into a SQL Server database. The program seems to be functioning properly when I save the Excel file in the IIS express folder. However, if I try to save it in the docume ...

Selecting Elements in AngularJS with jqLite while Excluding a Specific Element: What You Need to Know

Currently, I am in the process of developing a directive to manage a side menu within a mobile application. The menu opens smoothly with the directive I've implemented, but I am facing a challenge in selecting everything except the menu using jqLite. ...

Implementing Angular checkbox repetition controlled from an external controller

I'm looking to streamline my controller by setting a variable from outside the controller to populate my checkbox list. Can this be done? Check out my current code snippet here: http://jsfiddle.net/ilmansg/Lx37kr3e/1/ VIEW HTML <div ng-controlle ...

The Year as a Reference Point

I came across an interesting issue while working with dictionaries and JSON in sessionStorage. Initially, I had a dictionary structured like this: "name" : { "2016" : { "1" : "info" } } After successfully adding it to sessionS ...

Is it possible for Google to crawl and index a website that has minified HTML and CSS?

After creating a Bootstrap website, I noticed that the HTML file is nearly 400kb in size, making it slow to load on mobile devices. To address this issue, I am considering using the tool to minify the code. Will Google be able to properly index a we ...

The specified variable will not be visible in the window object

I recently created a JavaScript code snippet that looks like this: let var1 = 1; window.var2 = 2; After running the code in the Chrome console, I entered window to inspect the global window object. Surprisingly, only the second variable appeared and the ...

The Google Charts Pie chart is shown as displaying "Other" at 100% instead of specific data

I've encountered an issue while using the Google Charts API to create a dynamic pie chart. Initially, everything was working smoothly as the chart displayed each segment accurately. However, upon adding more data, the pie chart started showing only on ...