'how to serving css and js file while serving html file via handlebars [duplicate]

I can give anydesk access to you if u want to help solving error

when I am serving CSS and JS file it showing the error

Refused to apply style from 'http://localhost:8000/public/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Failed to load resource: the server responded with a status of 404 (Not Found) index.js:1

My index.hbs code

    <html>

<head>
    <title>Employee Registartion</title>
    <link href="../public/css/index.css" rel="stylesheet">
    </link>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <div id="box-wrapper">
        <div id="box">
            <h1 id="head">Insert Employee</h1>
            <form action="/employees" method="POST" autocomplete="off">
            <div id="Name">
                <span id="full-name" class="span">Full Name</span>
                <input type="text" placeholder="Full Name" id="full-name-input" class="input"></input>
            </div>
            <div id="email">
                <span id="email-span" class="span">Email</span>
                <input type="email" placeholder="Email" id="email-input" class="input"></input>
            </div>
            <div id="number">
                <span id="number-span" class="span">Mobile</span>
                <input type="number" placeholder="Mobile Number" id="number-input" class="input"></input>
            </div>
            <div id="city">
                <span id="city-span" class="span">City</span>
                <input type="text" placeholder="City" id="city-input" class="input"></input>
            </div>
            <div id="submit">
                <button type="submit" id="submit-btn"><span id="submit-span">Submit</span></button>
            </div>
            </form>
        </div>

    </div>
    <script src="../public/js/index.js"></script>
</body>

</html>

My server.js code

    const express=require('express');
const app = new express();

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

app.use(express.json())// will convert string into obj
const employeeRouter=require('../controller/employee-controller');
require('../models/db')

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

const viewsPath=path.join(__dirname,"../views");
app.set('views',viewsPath);
app.set('view engine','hbs');

app.listen(8000,()=>{
    console.log("connect to server bro");
})

**My file structure **

enter image description here

javascriptjavamethodslinked-listqueuejava.util.scanner


Solution 1:[1]

You're missing app.use(express.static('public')) so you could serve static content.

Look at: https://expressjs.com/en/starter/static-files.html

Solution 2:[2]

The issue here is the way you are using java.util.Scanner.

Once you close a scanner, it also closes the input stream you passed it (System.in in this case). You can read more about this in the docs.

One way to get around this is to create a single Scanner instance and use that wherever you need to. In your sepcific case, you could do something like:

public static void main(String[] args) {
    Scanner scanner = new Scanner(System.in);

    Queue<Integer> q= new LinkedList<Integer>();
    NQ(q, scanner);
    displayQ(q);
    DQ(q, scanner);
    displayQ(q);

    scanner.close();
}

You would need update NQ and DQ to accept the scanner (instead of creating a new instance), and also not close the scanner in those methods.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrej
Solution 2 Shahzad

Related Questions