0

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

mahir
  • 33
  • 7

1 Answers1

0

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

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

Andrej
  • 161
  • 1
  • 5