CODEWITHSUNDEEP
node.jsexpressroutesstatic-files
Nav
Nav

Reputation: 103

What is the issue here in serving static files

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

// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));

// Get 
app.get("/" , (req , res)=>{
  res.sendFile(`${__dirname}/index.html`);
});

// Listen
app.listen(3000 , ()=>{
   console.log('server running on port 3000');  
});

Folder structure

Root
 -index.html
 -app.js
  public
    -css
      -index.css
    -images
      -image.png

In the index.html page The index.css file and the image.png are linked. However, Those two are not being server as static files in app.js. But I have included the middle for serving static folders.

can some one explain what is the issue

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap 
      contributors">
    <meta name="generator" content="Hugo 0.82.0">
    <title>Sign up</title>
    <link rel="canonical" 
      href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
      
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected] 
      beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
      eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" 
      crossorigin="anonymous">
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple- 
      touch-icon.png" sizes="180x180">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" 
      sizes="32x32" type="image/png">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" 
      sizes="16x16" type="image/png">
    <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
    <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned- 
      tab.svg" color="#7952b3">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
    <meta name="theme-color" content="#7952b3">
    
    <style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-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/index.css" rel="stylesheet">
  </head>
  <body class="text-center">
  
    <main class="form-signin">
      <form action="/" , method="POST">
        <img class="mb-4" src="./public/images/image.png" alt="" width="72" 
          height="57">
        <h1 class="h3 mb-3 fw-normal">Sign Up</h1>
        
        <div class="form-floating">
          <input type="text" name="fname" class="form-control top" 
            id="firstName" placeholder="first name">
          <label for="firstName">First Name</label>
        </div>
        <div class="form-floating">
          <input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
          <label for="firstName">Last name</label>
        </div>
        <div class="form-floating">
          <input type="email" name="email" class="form-control bottom" id="email" placeholder="[email protected]">
          <label for="email">Email ID</label>
        </div>
        
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2020–2021</p>
      </form>
    </main>
    
    
    
  </body>
</html>

This is the html page taken from bootstrap The css file under the comment custom styles for this template and the png is below the form tag.

The files are added correct as when the html page is seen in the browser independently then the image and css is showing up

However when it is served using node and express the image and css arent showing up

Upvotes: 1

Views: 514

Answers (2)

Nav
Nav

Reputation: 103

OK, So I am answering my own question here. After refering to @jdmayfield 's answer and searching about MIME type errors I reached link to this link.

I realised that when you set the pubic folder as static in node, Then that public folder should not be added in the path to css or images in html

Meaning that In the folder structure given above if we want to link css in html the code we use is

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

And this gave me a MIME type error. So I changed the above code to

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

This worked.

However if You independently open the HTML file by going live in vscode, the css and images wont load. But when served with node they will be served.

Upvotes: 2

jdmayfield
jdmayfield

Reputation: 1527

UPDATED POST:

In light of the recent comment by @Nav giving the error regarding mime-type, here is a snippet I found at Express: Setting content-type based on path/file?

"The Express documentation shows that it can do this if you pass in the file name."

var filePath = 'path/to/image.png';
res.contentType(path.basename(filePath));
// Content-Type is now "image/png"

Try this example first. If that does not work, reload and check Dev console for different errors. It is possible there is more than one cause of your issue.

ORIGINAL POST:

Based on the code you have submitted, I think your problem is the default CORS policy. You need to incorporate a method of allowing Cross-Origin Resource Sharing between the domains, ports, and protocols you are using. I found a good document detailing CORS explicitly, but succinctly, with a solution that appears specifically suited to your needs. You might open the Dev console in your browser and look for similar error messages as outlined in the document to confirm.

Here's the link:

https://flaviocopes.com/express-cors/

Upvotes: 1

Related Questions