Style sheet is not getting applied to my local server using node.js

Question

I've been creating the signup page, but while running it on my local server all my applied CSS is not showing. I'm using bootstrap 4.

When I'm trying to open the file in the browser it's showing the proper results. It would be helpful if you tell me why it's happening.

I'm not worried about a favicon for now.

Here is my HTML code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Signin Template · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">

    <!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="public/css/sty.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  </head>

  <body class="text-center">
    <form action="/" class="form-signin" methode="post">

      <img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>

      <input type="text" class="form-control a" placeholder="first name" required autofocus>
      <input type="text" class="form-control b" placeholder="last name">
      <input type="email" class="form-control c" placeholder="email" required>

      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
    </form>
</body>

</html>

My node.js code:

const express    = require("express");
const bodyParser = require("body-parser");


const app        = express();

app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"));

app.get("/",function(req,res){
  res.sendFile(__dirname + "/in.html");
});


app.listen(3000,function(req,res){
  console.log("running");
});

My outcome:

The outcome I'm looking for: note: Not exact outcome but it's similar to it

score 0 · Accepted Answer · answered Sep 19 '20 at 12:25

Once you have given this:

app.use(express.static("public"));

There is not need to include public in path like this.

<link href="public/css/sty.css" rel="stylesheet">

try with this

<link href="/css/sty.css" rel="stylesheet">

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL. https://expressjs.com/en/starter/static-files.html

Otherwise you should use

app.use('/public', express.static('public'));

with

<link href="/public/css/sty.css" rel="stylesheet">

Be sure to check this out. This shows how to use relative path. /public/ & public/ are different.

Style sheet is not getting applied to my local server using node.js

1 Answers1