Error retrieving resource: server returned a 404 status code indicating file not found for javaScript and CSS files

I can't seem to get my css and js files to load on the server. Here is how my file structure looks like: GAME_Folder https://i.sstatic.net/wzfB3.png

HTML

doctype html
head
  link(href='https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' rel='stylesheet')
  script(src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript')
  script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js')
  <script type="text/javascript" src="index.js"></script>
  link(rel='stylesheet' type='text/css' href='../css/style.css')
  script(src='/socket.io/socket.io.js')

Server (serv.js)

https://i.sstatic.net/f72FW.jpg

I have tried various solutions found in previous stack overflow threads such as: Failed to load resource: the server responded with a status of 404 (Not Found) Failed to load resource: the server responded with a status of 404 (Not Found) css

Do you have any other suggestions?

javascripthtmljquerycssnode.js

Answer №1

Your routing needs adjustment...

It should be modified to the following:

app.use(express.static(__dirname + '/public/style.css');
app.use(express.static(__dirname + '/public/index.js');

In your HTML file, make sure it looks like this:

doctype html
head
  link(href='https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' rel='stylesheet')
  script(src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript')
  script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js')
  <script type="text/javascript" src="index.js"></script>
  link(rel='stylesheet' type='text/css' href='/css/style.css')
  script(src='/socket.io/socket.io.js')

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

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Executing child processes in Node.js on Google App Engine

Currently, I have a Node Express server that is functioning well on localhost. It utilizes child_process to execute a C++ standalone program. The snippet of code that employs child_process looks like this (the application generates output.txt): app.post( ...

node.jsexpressgoogle-cloud-platformchild-process

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

Retrieve libraries from package-lock.json file

I am tasked with extracting all the libraries and versions from the package-lock.json file. Let me provide some context. I am implementing a security module within Jenkins to create an inventory of libraries used in each application. The goal is to gather ...

javascriptnode.jssecuritynpmlibraries

What is the best way to prevent users from entering a zero in the first position of a text box using JavaScript

Although I am aware this may be a duplicate issue, the existing solution does not seem to work for me. The field should accept values like: valid - 123,33.00, 100,897,99, 8000 10334 9800,564,88.36 invalid - 001, 0 ...

javascriptregexangulartypescript

Guide to profiling resources in Node.js applications

When developing Node.js applications, it's important to keep track of how your code is performing in terms of memory and IO. By monitoring these metrics, you can identify which parts of your code are causing delays or consuming excessive resources. Th ...

javascriptnode.jsperformanceexpresssails.js

unable to retrieve an object's property

Currently, I am implementing a JWT token compare function to authenticate user login by comparing the user password. However, I am facing an issue where I cannot access the user password after executing the mongoose query. exports.login = async(req, res, n ...

javascriptnode.jsexpressmongoosejwt

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...

javascripthtmljquerycssbootstrap-4

"Attempting to connect to remote MySQL database (port 3306) using NodeJS results in a No Route error (

Currently facing an issue accessing my VPS's external MySQL database through the default protocol using NodeJS's MySQL connection. Despite troubleshooting extensively, I discovered that even attempting to connect on the virtual machine using the ...

mysqllinuxnode.jsdebianiptables

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

Comparing the distinction between assigning values to res and res.locals in a Node.js application using Express

Greetings! I am inquiring about the utilization of res (Express response object) and res.locals in Express. During my exploration of nodejs, I came across a code snippet that consists of a middleware (messages.js), a server (app.js), and a template (messa ...

javascriptnode.jsexpress

Utilizing ng-switch for handling null values or empty strings

Can anyone assist me with this issue? I have a variable called $rootScope.user = {name:"abc",password:"asd"}. When a service response occurs, I am dynamically creating a rootscope variable by assigning it. How can I use ng-switch to check if the variable h ...

javascriptangularjsangularjs-scope

Learn how to use AJAX to send a post request to PHP and dynamically load content into a specific

Recently, I have been working on developing a filter function using ajax and PHP. Although I am still quite new to ajax, I was able to create an HTML input that looks like this: <form> <input type="text" placeholder="Search" ...

phphtmljqueryajax

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

Handling exception type in child_process exec method - NodeJS with Typescript integration

Check out this sample code: const execPromise = util.promisify(exec); try { const { stdout } = await execPromise(cliCommand); } catch (error) { if (error instanceof S3ServiceException) { // error message is not handled correctly console ...

node.jstypescriptaws-clichild-process

Bringing the value from the codebehind to the jquery function on the client side

Here is the code snippet from my asp.net web application's code behind where I have integrated another web service: [WebMethod] public static string GetData(string name) { WEBSERVICE.Service1 Client = new Service1(); string Nam ...

c#javascriptjqueryasp.net

D3 Treemap for handling extensive sets of data

I am uncertain if there exists a method to incorporate the desired feature. I am seeking a solution similar to zoomable treemaps, but to initially load a limited number of child levels and then dynamically add more child nodes without requiring a node clic ...

javascriptajaxcssd3.js

Problem encountered in NextJS/ReactJS when attempting to dynamically load a new component by clicking a button within the current component

In my NextJS project, I am working with 3 components named "Sidebar", "Woven", and "ToolsPage". Below are the respective codes for each: ToolsPage Component: "use client" import Woven from './components/weaved'; import Sidebar from &ap ...

javascriptreactjsnext.jsreact-hooks

Building a promotional widget

I'm currently working on developing an ad widget that can be easily reused. I'm debating whether to use jQuery or stick with pure JavaScript for this project. What are your thoughts on the best approach for creating a versatile and efficient ad w ...

javascriptjquery

Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Check out this HTML code: <head> <meta charset="UTF-8"> <title>Countdown</title> <style> /* CSS goes here */ </style> </head> <body> <ul> <li>one</li> ...

css