2

Tengo la siguiente aplicacion de nodejs usando expressjs:

app.js

const express = require("express");
const app = express();
const main = require("./main/main");
const port = 3000;
const path = require("path");

app.set("view engine", "ejs");

app.use(express.static(path.join(__dirname+"/static/css")));

app.use(express.static(path.join(__dirname+"/static/js")));

app.use("/", main);

app.use("/contacts", contacts);

app.listen(port, () => console.log("Online"));

main.js

const express = require("express");
const router = express.Router();
const path = require("path");

router.get("/", (req, res) => res.sendFile(path.join(__dirname+"/main.html")));

module.exports = router;

main.html

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="static/css/materialize.min.css" media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
    <h1>Hi</h1>
     <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="/static/js/materialize.min.js"></script>
    </body>
  </html>

Cuando ejecuto la aplicacion el documento me arroja el siguiente error:

Refused to apply style from 'http://localhost:3000/static/css/materialize.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

GET http://localhost:3000/static/js/materialize.min.js 404 (Not Found)

Refused to execute script from 'http://localhost:3000/static/js/materialize.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

¿Como puedo aplicar el estilo materialize-css en express js?

1
  • El problema no es el estilo, sino que el navegador se niega a usar los ficheros que recibe del servidor: el servidor le dice que el contenido es HTML cuando realmente es CSS, y lo mismo te está pasando con el fichero Javascript. Commented el 6 jul. 2018 a las 15:48

1 respuesta 1

2

Teniendo la siguiente estructura:

static |
       | css
       | js
main   |
       | main.js
       | main.html
app.js

Solución:

Los cambios solo deben hacerse en app.js pues de all se desembocaran los cambios en todo el app.

1) En primer lugar, se debe servir el directorio raiz de los estaticos, no una ruta, por tanto:

Esto:

app.use(express.static(path.join(__dirname+"/static/css")));
app.use(express.static(path.join(__dirname+"/static/js")));

Pasa a esto:

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

Donde static es la carpeta donde están los estáticos

2) En cuanto al html se debe colocar solo la carpeta que esta dentro del directorio raiz, es decir:

Esto:

<link type="text/css" rel="stylesheet" href="static/css/materialize.min.css" media="screen,projection"/>

Pasa a esto:

<link type="text/css" rel="stylesheet" href="/css/materialize.min.css" media="screen,projection"/>

Donde unicamente colocamos los directorios que estan dentro de la raiz, en este caso /css y /js, tambien podria existir /img y /fonts

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.