1

Estoy haciendo deploy de mi aplicacion y cargan los archivos pero los estilos y las carpetas contenidas en la carpeta public no se pueden acceder ni cargan al momento de ingresar al navegador, esta es la estructura de mis carpetas

-|node_modules
-|src
---|public
-----|css
-----|img
-----|js
---|index.js
-|.gitignore
-|package.json
-|package-lock.json

dentro de mi archivo index.js los archivos estaticos los manejo de la siguiente manera:

app.use(express.static(path.join(__dirname, 'public')));

y el package.json esta de la siguiente manera:

{
  "name": "fundacion-aip",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon src/index"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "connect-flash": "^0.1.1",
    "express": "^4.17.1",
    "express-handlebars": "^3.1.0",
    "express-mysql-session": "^2.1.0",
    "express-session": "^1.16.2",
    "express-validator": "^6.2.0",
    "moment": "^2.24.0",
    "morgan": "^1.9.1",
    "multer": "^1.4.2",
    "mysql": "^2.17.1",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "pdfkit": "^0.10.0"
  },
  "devDependencies": {
    "nodemon": "^1.19.3"
  },
  "engines": {
      "node": "10.16.3",
      "npm": "6.9.0"
  }
}

al momento de hacer el deploy e ingresar al navegador no me cargan los estilos y me aparece el siguiente error:

Refused to apply style from 'http://aip-cloud.herokuapp.com/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

he buscado todas las posibles soluciones pero ninguna me funciona que creen que pueda estar fallando al momento del deploy o que me falta configurar para que funcione en heroku. Muchas gracias por la ayuda.

2
  • Veo que hiciste la misma pregunta aquí y fue cerrada como duplicada. Te recomiendo que elimines dicha pregunta para que no afecte tu capacidad para seguir realizando preguntas en el sitio. Igualmente esta pregunta que realizas aquí está mejor redactada y te he puesto una respuesta que debería solucionar tu problema. Saludos Commented el 24 nov. 2019 a las 16:56
  • vale ya la elimino gracias por la sugerencia Commented el 25 nov. 2019 a las 17:09

1 respuesta 1

1

El error que recibes es bastante explícito: te falta establecer las cabeceras apropiadas.

Si leemos con detenimiento la documentación del método static() de Express (v4.x), nos encontramos que el mismo puede configurarse con ciertas opciones: (traducción propia)

-setHeaders: Función para establecer las cabeceras HTTP que se enviarán con los archivos.

Por lo tanto, debemos establecer la cabecera faltante, de acuerdo a los archivos que desees servir, para eso es necesario conocer su valor MIME. Algunos valores comunes son:

Lo que debes hacer es establecer las cabeceras de acuerdo el tipo de archivos que estás sirviendo desde la carpeta public de tu aplicación Express.

La documentación nos indica que la firma de la función debe ser la siguiente:

fn(res, path, stats) { ... }

Donde:

  • res: es el Objeto Response de Express.
  • path: es el archivo que estamos sirviendo.
  • stats: es un Objeto que contiene la información (stats) de dicho archivo.

Podríamos crear una estructura de decisión para establecer el tipo MIME del archivo que estamos enviando, por ejemplo:

const setHeaders = (res, path, stats) => {
    let mimeType = 'text/plain'; // formato por defecto (podemos escoger el que deseemos)
    const lastPoint = path.split('').lastIndexOf('.');
    const ext = path.substring(lastPoint + 1);
    if(ext === 'html' || ext === 'htm') {
        mimeType = 'text/html';
    }
    if(ext === 'css') {
        mimeType = 'text/css';
    }
    if(ext === 'js') {
        mimeType = 'application/javascript';
    }
    res.set('content-type', mimeType);
}

Luego puedes crear tu objeto de opciones de la siguiente forma:

const staticOptions = {
    setHeaders: setHeaders
}

Por último, lo usas en el método static() de la siguiente forma:

app.use(express.static(path.join(__dirname, 'public'), staticOptions));

Ahora, si bien este método está bastante bien para servir estos 3 tipos de archivo, nuestra función no es muy eficiente ni escalable, ya que si deseamos servir un archivo diferente, por ejemplo una imagen, debemos escribir la condición adecuada y volver a compilar todo nuestro código.

Para evitar esto, haremos uso de un módulo llamado mime, el cual nos permitirá establecer el tipo mime de acuerdo al archivo que sea servido. Todo esto en prácticamente 1 sola línea:

const mime = require('mime');

const mimeType = mime.getType(path);
res.set('content-type', mimeType);

Muy práctico y útil, y sin importar el tipo de archivo que sea servido, esta librería nos facilitará mucho la vida.

Tu código podría verse entonces parecido al siguiente:

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


const setHeadersOnStatic = (res, path, stat) => {
  const type = mime.getType(path);
  res.set('content-type', type);
}

const staticOptions = {
  setHeaders: setHeadersOnStatic
}

app.use(express.static(path.join(__dirname, 'public'), staticOptions));

app.listen(3000, () => {
  console.log('App listening.');
});

Así, con cada solicitud de cualquier archivo de tu carpeta public, Express enviará la cabecera adecuada.

Espero que esto aclare tus dudas y te ayude a resolver el problema.

Nota

Recuerda instalar mime en tu aplicación usando npm install --save mime@latest.

1
  • Muchar gracias amigo lo pude solucionar modificando la ruta a la que estaba apuntando mis archivos estaticos, de todas formas te agradezco por sacar un poco de tu tiempo para responder mi pregunta. Commented el 25 nov. 2019 a las 17:09

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.