The Node.js express seems to be unable to fetch the css and js files

Sharing my main.ts file in which I am facing issues with linking my css and js files. view image

import express from 'express';
import {Request,Response} from 'express';
import expressSession from 'express-session';
import path from 'path';

const app = express();


// initializing session 
app.use(expressSession({
    resave:true,
    saveUninitialized:true
}));

// setting up server to serve the main page//
app.get("/", (req: Request, res: Response) => {
  res.sendFile(path.resolve(__dirname, "../frontend/public/index.html"));
});



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

const PORT = 8080;

app.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}/`);
});

Also attaching the layout of my file structure for reference view image In addition, adding a link to my html file below view image

Answer ā„–1

Let's start off by emphasizing the importance of not sharing your app secret on public platforms. Secondly, could you kindly provide us with your index.html file? It is possible that there may be an issue with how the JS and CSS files are being loaded. Lastly, remember that you can streamline the process of importing default and class exports from a package in just one line of code. Simply update

import express from 'express';
import {Request,Response} from 'express';

to

import express, { Request, Response } from 'express';

Answer ā„–2

Based on the screenshot, it appears that your public folder is currently empty. It seems like you have placed your index.html and other files in your frontend folder instead of the public folder. Furthermore, both your index.js and index.html are located at the same level, causing the path resolution to be incorrect when accessed from the index.js file.

Can you specify which file you are using to resolve the path? Is it index.js or main.ts?

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

Exploring how process.argv in NodeJS can be utilized within JavaScript code compiled by

I'm having trouble compiling a basic TypeScript file using webpack (with 'awesome-typescript-loader') that needs to access command line arguments. It seems like the compiled JavaScript is causing a problem by overriding the Node 'proce ...

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

Working with intricately structured objects using TypeScript

Trying to utilize VS Code for assistance when typing an object with predefined types. An example of a dish object could be: { "id": "dish01", "title": "SALMON CRUNCH", "price": 120, ...

Socket.IO: Broadcasting messages to multiple clients

Currently, Iā€™m leveraging a Node.js server with Express and have the following objective: Clients are required to access a URL with an ID included (e.g. localhost/show/:projectID) All clients accessing the same ID should be linked into the same "group" ...

Retrieve information from an ajax response in XML format

AJAX Call Code Example $.ajax({ url: '/services/LTLGadgetV2.aspx', type: 'Get', success: function (result) { console.log( result); } }); The response in the console: Sample XML <RateResults xmlns ...

Encountering a 404 error while performing an app.post request in Node.js

As a beginner in the world of Node.js, I am exploring tutorials online and using Netbeans to learn. When I visit: http://localhost:9080/, I can see the Date displayed correctly with the expected color. However, when I try to access http://localhost:9080/a ...

Prevent JSON.parse() function from stripping away any trailing zeros in a JSON string dataset

After creating a JSON string, I encountered an issue where the values were not being parsed correctly. Here is the code snippet: <script> var string = JSON.parse('{"items":[{"data":[5.1]}, {"values":[5.10]}, {"offer":[3.100]}, {"grandtotal":[12 ...

What is the best way to determine which option is most suitable: types, classes, or function types in TypeScript for

Currently, I am developing a small todo command line utility with a straightforward program structure. The main file is responsible for parsing the command line arguments and executing actions such as adding or deleting tasks based on the input provided. E ...

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

Having trouble resolving 'primeng/components/utils/ObjectUtils'?

I recently upgraded my project from Angular 4 to Angular 6 and everything was running smoothly on localhost. However, during the AOT-build process, I encountered the following error: ERROR in ./aot/app/home/accountant/customercost-form.component.ngfactory. ...

How can I restrict website access to only specific IP addresses?

I am looking to restrict access to certain IP addresses on a website, but the issue is that dynamic IPs keep changing based on the source of internet connection. Is there a method to determine the static IP of the computer rather than relying on the dyna ...

VueJS, when used in conjunction with Vuetify, might require an extra loader to handle scoped css

While attempting to compile my VueJS code using webpack, I encountered an error with the following code: <template> <v-app-bar app color="blue" flat height="100px"> <v-img class="mx-2" contain max-height="80" m ...

Incorporating Distinct Items into an Array with JavaScript

There is a Filter object that stores information about different Car Types. The data is fetched via AJAX calls - on the first call, objects 0-10 are created and added to an array. Subsequent calls bring more car types which are also appended to the array. ...

Ensure the initial value in the dropdown menu is automatically set to the first value in VueJs

How can I set the first value of my time object as the default value for my dropdown in Vue? I want the first value to be pre-selected when a user enters the website, but currently only display the value without actually selecting it. time Object:- { &quo ...

Add the item to a fresh array using the Ajax function

Here is an array that I have: var arrayOfResults = []; // Results after like statement After making a database call, I receive a JSON result like this: [{ "id": "{fcb42c9c-3617-4048-b2a0-2600775a4c34}", "pid": "{34214CCB-90C3-4D ...

Unit testing Firebase function with Jest for mocking

Currently, I am in the process of developing unit tests and facing challenges with mocking Firebase functions while specifying the return type upon calling them. The code snippet below illustrates what I intend to mock (account.service.ts) and provides ins ...

Submitting a form from a non-AngularJS application to an AngularJS app requires URL rewriting

I am facing a challenge with my AngularJS search application. The search box is located on a standard HTML page that is not part of the AngularJS framework. Here is how the input field looks: <form accept-charset="UTF-8" name="search" id="search" act ...

Top choice for removing items from a list array

Hey there, I'm working with an array of a custom type in Angular: List { task: string; id?: number; status?: boolean; } I'm trying to figure out how to delete elements where List.status == true. I've tried two methods for this. ...

Using EC2 to access the Express server

I have set up Express on my Amazon EC2 server. Here is how my server configuration looks like: var express = require('express'); var app = express(); app.get('/my_view/true', function (req, res) { //do something res.render( ...