The index.html file is failing to load/render when using app.js

I am currently in the process of creating a to-do list using an older tutorial. The app.js file seems to be functioning properly, however, when I try to run it locally, all I see is a blank page instead of my HTML content.

Here is the code found in the app.js file:

const express = require('express');
const app = express();

app.use(express.urlencoded({
    extended: true
}));

app.use(express.json())

app.get("/", function (req, res) {

    let today = new Date();

    if (today.getDay() === 0) {
        res.write("<h1>Yay It's the weekend</h1>");
    } else {
        res.sendFile(__dirname + "todolist-v1\index.html");
    }

    res.send();
});

app.listen(3000, function () {
    console.log(`App listening on port ${3000}`)
});

As for the index.html file, here is its content:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>

<body>
    <h1>This does not seem to be working!</h1>

    <p>Why isn't this loading!?</p;


    <script src="app.js"></script>

</body>

</html>

I was hoping that when accessing localhost, the index.html file would be displayed, but instead, only the app.js seems to appear.

Answer №1

After doing a quick search on Google, I found out more about the res.sendFile Method. It turns out that when using this method, you need to provide an absolute path instead of a relative one.
For further information, check out this helpful resource: res.sendFile(path [, options] [, fn])
Nevertheless, there is a way to use a relative path by defining it within certain options.

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

Why isn't my file being recognized post-multer middleware?

I am currently facing an issue with uploading a filename and a post (similar to 9GAG style) to my MySQL database, and storing the file in my project folder. The front end is able to retrieve the file without any problems (verified through console.log), but ...

Guide to retrieving information from an API and incorporating it into a fresh JSON structure

I am currently working on fetching data from an existing API endpoint and using a part of that data to create a new endpoint in Node.js with Express. Specifically, I am trying to retrieve the userId from https://jsonplaceholder.typicode.com/posts/1 and int ...

What are the steps to designing a unique JSON data format?

When working with a JSON data structure containing 100 objects, the output will resemble the following: [{ "Value": "Sens1_001", "Parent": Null, "Child": { "Value": "Sens2_068", "Parent":"Sens1_001", "Child" : { ...

Erase all records using MongoDB by the following criteria or

I am currently working with a calendar document structured as shown below: calendar: [ {days: { 1: [], 2: ['surprise'], 3: [], ... }}, {days: { 1: [], 2: [], 3: ['test'], ... }} ] My task involves locating specific ...

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

Choosing values from a variety of select option boxes using jQuery

I'm experiencing an issue with selecting values in a multiple select option box. Despite my efforts, I haven't been able to get all the desired items selected at once. Currently, when I run the code below, only the first option is being selected ...

Tips for implementing the f11 effect with a delay of 5 seconds after pressing a key in JavaScript or jQuery

Is there a way to activate the F11 effect only 5 seconds after pressing a key using JavaScript or jQuery? ...

Adjust color in real-time with JavaScript

I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a sni ...

Is it possible to implement a route within a controller in Express.js?

In my controller, I currently have the following code: module.exports.validateToken = (req, res, next) => { const token = req.cookies.jwt; //console.log(token); if (!token) { return res.sendStatus(403); } try { const ...

Tips for transferring HTML code to a controller

Currently facing an issue while working with MVC and attempting to store HTML code from a view in a database field. In the JS section of my MVC solution, I have the following code snippet: var data = { id_perizia: $("#id_perizia").val(), pinSessione: $("# ...

Converting serialized form data to JSON in Node.js

For my project, I am utilizing Angular along with Node.js and Express 4, in addition to socket.io. I have developed a service in my Angular application that sends serialized form data to the server. This service functions similarly to jQuery.serialize(). ...

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

The PHP script is not receiving any data when checking if the value is set in the $_POST variable

I'm attempting to transmit values from a JavaScript file using POST method to a PHP page. Here is the AJAX code: let userInput = $input.val(); $.ajax({url: "../checkout/test.php", type : 'post', data : {'userInput': user ...

I'm having trouble getting this angular expression to cooperate in Plunker. Can anyone shed some light on why {{ 843 / 42

I'm currently diving into Angular with the help of Plural Sight. The initial lesson dives into utilizing the ng-app directive. For those interested, here's a direct link to the Plunker editor: http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview ...

List of characteristics belonging to objects contained within an array

Consider the following array of objects: data = [{x: 1, y: 2, z: 3}, {x: 4, y: 5, z: 6}, {x: 7, y: 8, z: 9}] Is there a way to extract only the x elements from these objects and create an array out of them? For example: x = [1, 4, 7] Can this be achiev ...

When attempting to pass react-intl as an argument in a method of a React component during Jest testing, an error is thrown stating, "TypeError: intl.formatMessage is not a function."

Currently, I am in the process of unit testing my React component using Jest. Within this component, there are several methods that are called upon. As an example: export function fetchText(text, intl) => ((text !== 'NA') ? (intl.formatM ...

Unable to establish a session on the Node server

I'm currently in the process of setting up a node server that includes login, logout, and authentication functionalities. However, I've encountered an issue with my code where after debugging, some debug information logs are being generated that ...

Experimenting with Jquery hyperlinks beyond the realm of Google Chrome

Is there a way to verify a jQuery link without relying on the inspect element feature in Google Chrome? I initially thought that was the issue because the links failed to load, but even after correcting it, the show function still does not perform the anim ...

Navigate the user to various pages in a Node.js application based on login status

Looking for guidance on a login system within my application? I need to redirect users based on their roles. Below is the code for the login controller, along with node.js snippets and the login HTML page. Any help would be appreciated. Login.html - < ...

Issue with AWS SDK client-S3 upload: Chrome freezes after reaching 8 GB upload limit

Whenever I try to upload a 17 GB file from my browser, Chrome crashes after reaching 8 GB due to memory exhaustion. import { PutObjectCommandInput, S3Client } from '@aws-sdk/client-s3'; import { Progress, Upload } from "@aws-sdk/lib-storage& ...