What is the reason for the absence of styles in index.html when accessing the local server?

When using node.js to open the server, I encountered an issue where the styles are not displaying. Strangely, when opening index.html directly in the browser, all the styles show up correctly. What could be causing this discrepancy? index.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"  href="style/style.css" type="text/css" />
    <title>Socket.IO chat</title>
</head>

index.js

 const express = require('express');
    const app = express();
    const http = require('http');
    const server = http.createServer(app);
    const port = 3000;
    
    app.use(express.static(__dirname + '/style/style.css'));
    
    app.get('/', (request, response ) => {
        response.sendFile(__dirname + '/index.html');
    });
    
    server.listen(port, () => {
        console.log(`listening on port ${port}`);
    });

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

Encountering issue retrieving information from Node.js REST API in Flutter (MySQL Localhost)

ERROR: An Exception has occurred. _TypeError (type 'List' is not a subtype of type 'Map') Future<Album> fetchAlbum() async{ final response = await http.get(Uri.encodeFull("192.168.43.106:8080/customers/"), ...

Achieving cell merging in react-table can be accomplished by utilizing the appropriate

Currently, I am using react-table and have the need to combine cells in specific columns based on their content. Essentially, I want to remove the divider border between these merged cells. To give you a visual idea, this is how it currently looks like: ...

Simplified jQuery function for multiple div mouseover operations

Uncertain about the accuracy of my title. Due to certain reasons, I need to assign different IDs for the class, as it only detects ID and not class when hovered over. Therefore, I have created a CSS version where the opacity of a specific div will change t ...

Is there a way to retrieve just the array element as the output instead of the entire object in MongoDB?

Here is the code snippet I am using to display review array data from the restaurant collection object: async get(reviewId) { const restaurantsCollection = await restaurants(); reviewId = ObjectId(reviewId) const r = await restaurantsCollect ...

Need an EventEmitter that works with both Node.js and React-Native

I am encountering an issue where I am using an npm package that needs the events module in this manner: var EE = require('events').EventEmitter; The problem arises when working with React Native, as it cannot locate the events module. Is there ...

Display an empty string when a value is NULL using jQuery's .append() function

To set an HTML value using the .append() function, I need to include AJAX data values. If the data set contains a null value, it will show as 'null' in the UI. I want to remove that 'null' and display it as blank. However, I can't ...

Creating dynamic bar chart visuals using Morris.js with JSON responses

Utilizing the morris.js library, I am extracting and plotting bar charts from data retrieved through a webservice. Issue: The format of my webservice URL is as follows: http://localhost:9999/hellowebservice/search?select=* I populate the select query ...

What is the process for modifying the popups associated with a polygon object?

As of now, every time I click on the map, a popup shows up with the name of the country based on a geoJSON file containing multi-polygon lnglat coordinates that outline the borders of each country. This method saves me from manually inputting each country& ...

WordPress header causing issues with Document.write()

I have a JavaScript function that utilizes AJAX to retrieve data from a PHP file. Previously, I utilized document.write(data) to display the retrieved content and it worked smoothly on its own. However, upon incorporating the script into WordPress via hea ...

Converting JSON to CSV using JavaScript

While utilizing this script (which is functioning properly), I encountered an issue where I needed to exclude certain columns (specifically columns 1, 2, 3, and 9) from the extraction process. Here's what I've got so far: $(document).ready(funct ...

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

My task involves creating a quiz application where I need to show the answers along with images of the choices stored in my JSON data. However, I encounter an error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I attempt ...

IE encounters an absolute z-index problem when expanding concealed content

I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...

Is it possible to configure Webpack/NextJs to handle a recurring import path mapping?

Exploring ways to streamline imports in my NextJs Project (v14.1.3), I'm interested in finding a method to modify the import statement below: import foo from 'path/to/foo/foo' To possibly simplify it to: import foo from 'path/to/foo&ap ...

Can you explain the distinction between using inline-block and inline-table display properties?

It appears that these display selectors are indistinguishable based on my assessment. According to the Mozilla CSS documentation: inline-table: The inline-table value doesn't have a direct HTML equivalent. It functions like a <table> HTML elem ...

What is the best way to create a reusable component for a dialog box or modal window?

I have been working on developing a reusable dialog component with a yes or no button at the bottom. The main idea behind this is to create a user confirmation dialog that prompts the user to confirm their entered information before proceeding. import Re ...

endless refreshing material ui accordion

Facing an issue with infinite rerender while trying to create a controlled accordion component using Material UI accordion. Here is the code snippet, any insights on why this could be causing an infinite rerender? const [expanded, setExpanded] = React.us ...

Error message in Node v12: "The defined module is not properly exported."

When trying to export a function in my index.js file, I encountered an error while running node index.js: module.exports = { ^ ReferenceError: module is not defined Is there a different method for exporting in Node version 12? ...

Strategies for transferring an object to a Handlebars view within an Express application

I'm having trouble figuring out how to display data that is passed to a Handlebars view. Below is my route.js file, where an object is passed to the view: var session = require('express-session'); exports.admin = function(req, res){ db. ...

Utilize passed props in components as well as Redux state information

Typically, you can access props sent by a parent to a child component on the child component itself. However, when using Redux in child components, the props sent by the parent are lost due to the use of the 'connect' method which maps the Redux ...

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window

I am currently working on an HTML5 application that features a screen divided into two parts. The left part of the screen contains a few links, and upon clicking one of these links, the resulting content should open in the right side frame within the same ...