"We are experiencing issues with the app.get function and it is

Although my backend is successfully serving other files, I have encountered an issue with loading new files that are located in a folder named js within the directory. These specific files are not being loaded, and despite spending an hour trying to troubleshoot, I haven't been able to pinpoint the exact reason for this. My initial assumption is that it may be a syntax error.

In my HTML file, the code I have used is as follows:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/TweenMax.min.js"></script>
        <script type="text/javascript" src="js/cooltext.animations.js"></script>
        <script type="text/javascript" src="js/cooltext.min.js"></script>

Meanwhile, in my app.js file, I have included the following code:

app.get('/js/jquery-1.10.2.min.js', function (req, res) {
    res.sendFile(__dirName + '/js/jquery-1.10.2.min.js');
});

app.get('/js/TweenMax.min.js', function (req, res) {
    res.sendFile(__dirName + '/js/TweenMax.min.js');
});

app.get('/js/cooltext.animations.js', function (req, res) {
    res.sendFile(__dirName + '/js/cooltext.animations.js');
});
app.get('/js/cooltext.min.js', function (req, res) {
    res.sendFile(__dirName + '/js/cooltext.min.js');
});

Answer №1

After some troubleshooting, the solution became clear to me. I needed to incorporate the following line of code:

app.use(express.static('js'));

This required me to eliminate the 'js' reference from the links within the index.html file.

Answer №2

Referencing the informative Express documentation: http://expressjs.com/starter/static-files.html


How to Serve Static Files using Express

Sharing files like images, CSS, JavaScript, and other static assets is made easy with the built-in middleware in Express - express.static.

To get started serving these files directly, simply pass the name of the directory where your static assets are stored to the express.static middleware. For instance, if your images, CSS, and JavaScript files are located in a directory named public:

app.use(express.static('public'));

After this configuration, you'll have access to load the files within the public directory:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

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

Error: The property 'classList' of null is unreachable for HTMLImageElement

I'm facing an issue on my website that's causing the following error message to pop up: Uncaught TypeError: Cannot read property 'classList' of null at HTMLImageElement. Here's the code I've been using: https://jsfiddle. ...

An unexpected problem with text redirection that should not be happening

I am facing an issue with my HTML text field and post button on my website. Whenever I click the post button to make a post, it redirects to a separate PHP file called post.php which handles PHP and MySQL code for posting. However, I want to avoid this red ...

Converting nested JSON structures from one format to another using JavaScript

I have been attempting to convert an AVRO schema into an ElasticSearch index template. Both schemas are in JSON format with some specific considerations to keep in mind during the transformation process. I initially tried using recursion to extract all nes ...

Utilize the results of the "event's" output as a variable

Struggling with manipulating checkbox values? The `change` event on checkboxes might return an object like this: {"val1":"member","val2":"book","val3":"journal","val4":"new_member","val5":"cds"} To transform the above object into a format that can be co ...

There seems to be an issue with the VueJs + ElementUi Change method as it is

Just starting out with Vue and Element UI. I'm attempting to create a custom component using the ElementUI autocomplete/select feature. The problem I am facing is that the @change method does not contain a event.target.value value. When I try to acc ...

The asynchronous times function fails to trigger the callback

I'm currently working on implementing async into my project. What I am trying to achieve is creating and saving multiple objects using mongoose, and then receiving a callback once the task is completed. Despite successfully saving the objects in the ...

Determine the name of the time zone using JavaScript

Currently, I am developing a React application and facing an issue where the timezone is detected as 'Etc/GMT-1' instead of the desired format 'Africa/Bangui'. This problem seems to be specific to my machine as it persists even when usi ...

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

Problem with Sending POST Requests in ExpressJS

Having trouble with a POST request in Postman resulting in a long loading time followed by a Could not get any response error message? No errors are showing up in the terminal. Could there be an issue with how I am saving the POST data, especially in my /b ...

What is the correct way to set up a click event listener for a radio button?

Currently, I am in the process of dynamically generating HTML radio buttons. Each button is assigned an Id stored in a variable. My goal is to add a click event handler to these radio buttons using the assigned Id. However, I am encountering an issue where ...

Nodejs & mongoose: Dealing with delayed return values

I recently started learning nodejs and I'm tackling a developer challenge from devchallenges.io (Shoppingify). In my code snippet below, I am working on updating the quantity value based on user input for an item. However, there seems to be a delay in ...

When using $.getJSON and $.ajax, the expected JSON object is not being returned

Currently, I am taking on the "local weather" front-end development challenge on freecodecamp.com. However, I'm facing some challenges when it comes to making an API call to fetch weather data from various weather APIs. This particular task requires r ...

The modal popup will appear in the center of the screen when the scrollbar is positioned at the top

I have a modal popup that is not consistently displayed in the center of the screen, regardless of the scrollbar position. I always want it to render at the center so the user doesn't need to scroll to see it. Below is the code I am currently using: ...

Troubleshooting issues with a Node.js application on Azure App Service

Seeking assistance with deploying my first Node.js app on Azure App Service. Despite following Microsoft's guides and tutorials, my app is not functioning as expected. Although I can see my project in the Azure portal, when I attempt to access it via ...

Website: Showcase Opentok using a Picture-in-Picture design

Currently, I am utilizing Opentok.js and my objective is to showcase both the subscriber and publisher within a Picture-in-Picture layout. I require this setup to be responsive and retain its aspect ratio when resizing the window. Additionally, I need gu ...

Exploring the limitations of middlewares in supporting independent routers

When I examine the code provided, it consists of three distinct routers: const Express = require("express") const app = Express() // Three independent routers defined below const usersRouter = Express.Router() const productsRouter = Express.Router() cons ...

Revising variables in Java Script

How can I shuffle a list of variables in JS and maintain the order while changing their values? The following code snippet demonstrates what I am trying to achieve. <p id="demo"></p> <script> var gen = "male "; var race = "white"; var ...

Combining JS Promise.all with onDOMContentLoaded to ensure all resources are

Is there a way to efficiently retrieve a json file for data while also waiting for the dom to load in order to populate a table simultaneously? The current method I am using is slow as it waits for the dom and then performs the get request. $(document).r ...

Record of Recaptcha actions is not showing up in the reports

My method of running the recaptcha script is as follows: let data = { action: 'homepage' }; grecaptcha.ready(() => { grecaptcha.execute('RECAPTCHASITEKEY', data).then((token) => { recaptcha_token = token; }); ...

Guide on adding up the value of a property within an array of objects using AngularJS

I am receiving an array of results from a Node.js API in my Angular app, and here is how it looks: <div *ngFor="let result of results"> <div *ngIf="result.harmattan.length > 0"> ... </div> <br> .. ...