Delivering HTML, CSS, and JS through the power of Node.js and Express.js

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

const app = express ();
app.use(express.json('public'))
app.get('/PKorn/zealtech', function(req, res)  {
        res.sendFile(path.join(__dirname, '/public/Ko.html'));

});

app.listen(4402);

While /PKorn displays the webpage with CSS properly applied, accessing /PKorn/zealtech results in missing CSS styling on the page.

Answer №1

Consider updating your code from app.use(express.json('public')) to

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

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

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

Express seems to be unable to read the request body

Recently delving into node and express, I was progressing well with my understanding of post requests. Initially, everything worked smoothly as I created new documents in my MongoDB database. However, today I encountered a peculiar issue. https://i.sstati ...

Creating a <Box /> component in MaterialUI with styled components is a great way to customize the design and layout of your

@material-ui/styles offers a different way to customize default styles: import React from 'react'; import Box from '@material-ui/core/Box'; import { styled } from '@material-ui/core/styles'; const StyledBox = styled(Box)({ ...

The request for /api/auth/register could not be located

Currently, I am in the process of creating a new REST API using NodeJS, Express, and MongoDB. However, I seem to be encountering an issue when trying to access a specific path. The error message displayed in the web browser reads: Cannot GET /api/auth/regi ...

Using NPM in conjunction with a PHP/STATIC web site directory structure: A comprehensive guide

My PHP website has a file structure like this: / css/ js/ index.php When I run the following commands: npm init npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5dd">[email p ...

Building a hierarchical tree structure using arrays and objects with Lodash Js

I am attempting to create a tree-like structure using Lodash for arrays and objects. I have two arrays, one for categories and the other for products, both with a common key. The goal is to organize them into a tree structure using string indexing. let ca ...

What is the best way to include start and end labels on Bootstrap's progress bars?

Is there a way to add start and end labels directly below the progress bar in Bootstrap? Here is an example of what I want: [||||||||------------] <Start Label> <End Label> I have been searching for a solution, but it seems ...

Is optgroup malfunctioning in IE 10?

My main question is: does optgroup not function properly in IE? The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/co ...

td:before combined with vertical-align:middle

To achieve a table with square cells, I implemented the following CSS: table { width: 100%; table-layout: fixed; } td { text-align: center; vertical-align: middle; } td:before { content: ''; padding-top: 100%; float: ...

An issue arose while trying to create a React application, as the Git commit was not successfully created. The error message displayed was: "Command failed: git commit -m 'Initialize project using

As a Windows user with yarn, node js, git, npm installed, I encountered an error while creating a React application using the command npx create-react-app my-app. The process started but failed at the end with the following error: PS C:\React> npx ...

Is it possible for Meteor deploy to execute modules located in node_modules using node?

After developing an app with meteor, I included the mosca node module in the node_modules folder as server.js. On my local machine, I typically run meteor and then run node server.js in another terminal. When I deploy my app to meteor servers, will node a ...

Correctly storing MySQL datetime column, only to have it converted back to UTC upon retrieval

In my project, I am utilizing typeorm version 0.2.18 and have a model featuring a CreateDateColumn. When I save the model, it accurately records the time in UTC despite me being in EST. However, upon retrieving the record from the database, the date gets c ...

Combining arrays based on a key in Node.js

I have the following two objects that need to be merged: [ { "response_code": 1, "response_message": [{ "a": 1000, "b": 1000001, "c": 10000002 }] }] [ { "response_code": 1, ...

What is the reason for the continual influx of new users being added to the database?

I have a Node.JS and MongoDB console application where I've implemented adding users in one file and outputting all collection objects to the console in another file. When running the command - node scripts/get_all_users.js, both existing users are di ...

Using ReactJS and SCSS to adjust the height: set the height to be twice the size of the element's

Is there a way to increase the height of a div each time it is clicked? I had an idea to add an extra CSS class to a div whenever a button is clicked. Here's how the concept might look: #divToBeDoubled { height: 100px; &.doubleHeight{ ...

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

My current task involves: Fetching input from a form field and adding the data to a div called option-badges Each badge in the div has a X button for removing the item if necessary The issue at hand: I am facing difficulty in removing the newly appended ...

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...