Node.js Implementing css styles

Here are my folders:

server.js
index.html
-public
 --css
  --ses.scss
  --style.css

This is the Server js code:

var express = require('express');
    var path = require('path');
    var publicPath = path.resolve(path.join(__dirname, 'public'));
    var app = express();
    var http = require('http').Server(app);
    var fs = require('fs');

    app.use(express.static(path.join(__dirname, 'public')));
    app.get('/', function (req, res) { 
        res.sendfile('./index.html');

    });
http.listen(3000, function () {
    console.log('listening on *:3000');
});

Within the Index.html file:

<link rel="stylesheet" type="text/css" href="/public/css/ses.scss">
<link rel="stylesheet" type="text/css" href="/public/css/style.css">

The CSS files work properly when I directly open the index.html file with Google Chrome, but when I run the page using node.js, the CSS doesn't load properly.

Answer №1

express.static() delivers the files from its directory straight to the homepage.

As a result, assets/ does not appear in the web address.

Answer №2

Programming Node.js:

app.use("/css",express.static(path.join(__dirname, 'public/css')));

CSS Styling:

<link rel="stylesheet" type="text/css" href="/css/ses.scss">
<link rel="stylesheet" type="text/css" href="/css/style.css">

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

What could be causing the float left and right to not function properly in this situation?

Having trouble positioning a search box on the left and arrows on the right side of a container. The float property isn't working as expected and the arrows are too close to the search box. I've also tried using left:0px and right:0px but no luck ...

Utilizing CSS3 to implement multiple backgrounds across various selectors

My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable. For example: CSS .button { display: block; } . ...

Show the logo next to the user's login information

I've been grappling with this issue for quite some time now and I'm on the verge of giving up. What I'm attempting to accomplish is to have the logo display in a float-left position while also having the user welcome message displayed in fl ...

Turn off the serving of static assets in Sails.js

Is there a way to disable serving static assets completely in the configuration settings? I'm wondering if simply adding an empty folder and specifying it in the custom express middleware is the right approach: module.exports = { // Initialize custo ...

Stylize the final element within a webpage using CSS styling techniques

In the code snippet below, my goal is to apply a specific style to the content of the final occurrence of "B". <div class="A"> <div> I am <span class="B">foo</span>. </div> <div> I like <span class="B"> ...

Heroku deployment encountered an issue with the Node.js application deployment

I am facing an issue with deploying my application on Heroku. The application only successfully deploys after modifying the engine versions. If I try to deploy without changing the "engines" section, it fails with the following errors: remote: ERRO ...

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

Conceal sub-menu icons within the jQuery User Interface Menu Widget

Is there a way to hide the submenu icon for the jQuery UI menu widget? The default value is set to ui-icon-carat-1-e. $(document).ready(function(){ $(function() { $( "#menu" ).menu({ icons: { submenu: false ...

The connected module appears as an unresolved requirement

In my development environment, I have two local node packages that we'll refer to as pack1 and pack2. The situation is such that pack2 relies on pack1, but pack1 has not been published to npm; instead, it's linked locally using the npm link comma ...

Enhancing BarGraph and Bars Size in Oracle ADF

We have created a web application using Oracle ADF. The application includes a page with a graph displayed below. Currently, we are looking to enlarge the bar graph by increasing its height, width, and size of the bars themselves. Difficulty 1: While we ...

Is there a way for me to have a table automatically scrolled to a specific column upon loading the HTML page?

My table contains a dynamic number of columns based on the months inputted from the database starting from a start_date and ending at an end_date. I have the current_date stored as a variable and want the table to load with the x-scrollbar positioned right ...

Is there a way to position this Flex-Box Item beside the image?

Please refer to the image How do I rearrange this Flex-Box Item to be positioned next to the image? https://i.sstatic.net/eSy3w.png <div class="brif fb"> <div class="sml-con"><img class="sml-thumb" src="images/chosen/edwa ...

Ways to eliminate the leading bullet point from an unordered list

I am currently working on creating a gallery of images using php and css. The images are placed in an unordered list as shown below: <ul style="list-style-type:none;"> <? while($data=mysql_fetch_row($result)) { $pic=$data[2]; if ($pic) { $ ...

The dynamic duo of applications in expressjs

Currently, I am in the process of developing an application using express js that will cater to various clients such as web and mobile. I have made the decision not to use a single app for both client types due to concerns about added burden from certain ...

Having trouble getting POST to function with express and bootstrap modal interaction

On the client side, the modal is coded like this: <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">New message to undefined</h5> <button class="close" type ...

The act of storing numerous documents every second in MongoDB results in a timeout

I have a task to iterate through an array of nearly 1200 objects using the JavaScript .map() method to individually store each object in a MongoDB database with additional data. The first 270 or so objects are successfully saved in MongoDB. However, subseq ...

The error message "The type 'DynamicModule' from Nest.js cannot be assigned to the type 'ForwardReference' within the nest-modules/mailer" was encountered during development

Recently, I decided to enhance my Nest.js application by integrating the MailerModule. I thought of using the helpful guide provided at this link: Acting on this idea, I went ahead and performed the following steps: To start with, I executed the command ...

Encountering a problem while trying to execute npm run serve on a newly created Vue-CLI project

Struggling to execute npm run serve on a fresh vue Project made with the Vue CLI. I initiated the project using vue create app, navigated to the project directory cd app, and ran npm run serve, a routine I have followed in previous projects. However, start ...

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page. The concept for the intro page involves three columns displayed side b ...