Is it possible to include <scripts> in my index.html file with Express JS?

After converting my index.html page to be served up by Express instead of Webstorm, I ran into an issue where all my scripts were now reporting 404 - Not Found. Previously, they were working just fine.

I'm wondering if it's not advisable to serve a page from Express that contains multiple script tags. If it is acceptable to do so, then why are they suddenly showing as 404-Not found, when they were working perfectly before?

EDIT: Here is the directory structure for reference:


project
    --- src
        --- js
            main.js
        --- css
        index.html
        app.js <-- all the express code

The Express code includes these lines:

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

Answer №1

To ensure your static assets are properly served, it's important to configure Express accordingly. By default, Express will serve these assets from the /public directory.

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

You have the option to include your scripts in this directory (which is recommended!) or you can add additional express.static statements pointing to a specific folder for your scripts.

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

Unable to receive any feedback after sending values via AJAX and Flask

Exploring the realms of AJAX and Flask, I reached out for guidance on how to seamlessly pass values and display them without refreshing the page. A helpful pointer led me to Ajax implementation but encountered a peculiar error after customizing the suggest ...

Connect radio input's value to object's key within AngularJS

Within my controller, I currently have an object structured as follows: $scope.colors = { green: "Green", yellow: "Yellow", red: "Red" }; I am attempting to dynamically generate radio inputs and then link the input value to the corresponding ...

Exploring file writing using Node Webkit and JavaScript

When developing my app, I encountered an issue with the 'fs' module not functioning as expected. Despite the code being written to write a file, nothing happens when the app is launched. However, if I start the app using the following command: $ ...

tag directive not functioning properly

I have encountered an issue while trying to create a simple custom directive. When I specify the directive as <div my-info></div> in my HTML file, it works fine. However, when I specify it as <my-info></my-info>, it does not work. ...

Leveraging Axios for form data submission

Is it possible to serialize data from an HTML form element and then post the data using a Post request with Axios? Below is the event code triggered when a button click occurs to submit the post: function form_submission(e) { var data = document.getEleme ...

How can I transfer data between two buttons using express-handlebars?

Displaying dynamic values in a table, each row contains a delete button (Button A). When Button A is clicked, a modal opens to confirm the deletion and there is a confirm button (Button B). The API call to delete the entity with the entity id is made from ...

Incorporate AJAX into your Javascript code for ordering

My issue arises when pointOnMap() is executed before xmlPreparer(), even though they are called in the correct order. I suspect this has something to do with the use of AJAX, as parseXML creates the object that pointOnMap() requires to be initialized befor ...

What is the process for configuring environment variables in a React application?

I have set up my React app to run on http://localhost:3000, and now I am looking to configure environment variables for different environments such as development, production, staging, and local. These are the URLs for my React app in various environments ...

Is there a way to make Express JS always serve files from the current directory no matter the route?

Currently, I am developing an Express app utilizing the Handlebars template engine. The HTML files it serves have images that direct to specific locations in my root directory. Everything works seamlessly for basic routes like "http://localhost:5000/image" ...

Discover supplementary characters to incorporate into a JavaScript string

I am facing a challenge with identifying three added characters in the second string that are not present in the first string. These added characters could be located anywhere within the string. For example: string1 = "hello" string2 = "aaahello" // =&g ...

Integration of Okta's oauth2 with an external Identity Provider (IdP

Currently, I have an Angular application with an Express server that utilizes Okta as an Identity Provider (IdP). The setup is functioning smoothly. However, the need has arisen to enable Single Sign-On (SSO) from an external application that utilizes Amaz ...

Having trouble with loading images from the assets folder, keep encountering a 304 error

While attempting to load a PNG file from the assets folder, I encountered a 304 error. My goal is to load images from the assets folder. const path = require('path'); const express = require('express'); const webpack = require('we ...

Looping through an array

I have created an array as shown below: iArray = [true, true, false, false, false, false, false, false, true, true, true, false, true, false, false, false, false, true] Condition check: If any value in this array is false, I will display an error messag ...

When checking for errors with console.log(errors) in Ajax, it may return undefined due to server-side

I'm looking for a way to alert the user about validation errors coming from PHP. I am currently using Laravel 5.3 to build the form and Ajax to retrieve error messages. Below is my JavaScript code: $.ajax({ url: '/artistPost', typ ...

Utilizing Node.js with Express and the less-middleware in combination with Bootstrap 3

I have recently delved into learning Node.js and I am currently in the process of setting up an express installation with less-middleware while also incorporating Bootstrap 3 less files. However, my search for tutorials has only yielded results related to ...

Tips for bringing in specialized document formats in Typescript

For a fun side project, I am in the process of creating a "framework" to easily develop native web components. One aspect of this involves using a webpack loader to parse XML within custom .comp files and export an es2015 class. However, I've encounte ...

Mongoose: sending a specialized object in reply to a POST inquiry

Apologies if the title is a bit unclear, I couldn't find the right words to describe my issue in the title. I am currently working on a signup form. When the user submits the form, the server checks in mongoose whether the email already exists in the ...

Utilize Sequelize to enclose a column with double quotation marks in a where clause

I am working with a JSONB column in my database. My goal is to make a query to the database where I can check if a specific value in this JSON is true or false: SELECT * FROM table WHERE ("json_column"->'data'->>'data2')::boo ...

Converting JavaScript values to C# code behind: A step-by-step guide

I'm facing a challenge where I need to retrieve JavaScript values in the code behind using C#. While I am aware that I can achieve this using hidden fields, there are no server controls on the page for postback. Can someone please advise me on how to ...

Enabling Context Isolation in Electron.js and Next.js with Nextron: A Step-by-Step Guide

I've been working on a desktop application using Nextron (Electron.js + Next.js). Attempting to activate context isolation from BrowserWindow parameters, I have utilized the following code: contextIsolation: true However, it seems that this doesn&ap ...