-1

http://localhost:3000/css/styles.css gives me:

Cannot GET /css/styles.css

.

├── public
├── css
│   ├── styles.css
│─── app.js
│─── signup.html

linked my public static files over, but when i run the node server, the css doesnt seem to apply to my html. I have attached screenshots of running it locally in static vs on node port 3000.

Hope someone could help me out.

MY app.js

  const express = require("express");
const https = require("https");
const path = require("path");

const app = express();

app.use(express.static("public")); //indicates the directory for static items e.g css

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



app.listen(3000, function(){
    console.log('server is running on port 3k');
})

my html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up for newsletter</title>
    <link href="css/styles.css" rel="stylesheet">
    
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div class="wrapper fadeInDown">
    <div id="formContent">
        <div>
            <h1>Sign up to get the latest updates!</h1>
        </div>
        <!-- Tabs Titles -->

        <!-- Icon -->
        <div class="fadeIn first">
        <img src="https://natisaver.github.io/cv/images/mugicon.png" id="icon" alt="User Icon" />
        </div>

        <!-- Login Form -->
        <form>

enter image description here

enter image description here

natisaver
  • 69
  • 1
  • 7
  • What is it saying in the console if you open up developer tools in the browser? – Tanner Dolby May 08 '21 at 18:35
  • localhost/:1 Refused to apply style from 'http://localhost:3000/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. – natisaver May 08 '21 at 18:49
  • Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:68 at util.js:10 at bootstrap.min.js:6 at bootstrap.min.js:6 localhost/:1 Refused to apply style from 'http://localhost:3000/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. – natisaver May 08 '21 at 18:50
  • I think this is a duplicate of [stylesheet-not-loaded-because-of-mime-type](https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type). – Tanner Dolby May 08 '21 at 18:59
  • hi, i tried that to no avail, the css is still not linking, i am unable to get the request for the localhost:3000/public/css/styles.css – natisaver May 08 '21 at 19:58
  • Did you try `href="/css/styles.css"`? with the `/` before css. – Tanner Dolby May 08 '21 at 20:09
  • Yup i tried ./css/styles.css too – natisaver May 08 '21 at 20:19
  • 1
    In your directory tree structure it shows `_css`, could that be the issue? – vanowm May 08 '21 at 21:24
  • my bad i typed out the tree structure myself, its a typo, the folder is just called css – natisaver May 09 '21 at 08:57

1 Answers1

0

Found the solution, the problem was the fact that the app.js and the index.html were all in the public folder, shift the app.js and html files out of the public directory and that will solve the issue.

natisaver
  • 69
  • 1
  • 7