Node.js| problem when serving files from dist folder generated by webpack

Asked

Viewed 26 times

0

I have a web application that uses Webpack to package the files. After running the "npm run build" command the webpack generates a dist folder containing the bundled files. The application worked perfectly running on the Webpack development server with localhost:3000.

I am developing an HTTPS server with Node.js so that the site runs in production on its own infrastructure (no cloud) but when serving the dist files only HTML markup works, css and javascript files do not work.

HTTPS server:

var fs = require('fs');
var http = require('http');
var https = require('https');
var privateKey  = fs.readFileSync('chave');
var certificate = fs.readFileSync('certificado');

var credentials = {key: privateKey, cert: certificate};
var express = require('express');
var app = express();

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

var httpServer = http.createServer(app);
var httpsServer = https.createServer(credentials, app);

httpServer.listen(8080);
httpsServer.listen(8443); 

Taskpane.html:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
        <link href="taskpane.css" rel="stylesheet" type"text/css"/>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
        <script src="taskpane.js"></script>
    </head>
    <body class="ms-font-m ms-welcome ms-Fabric">
        <main id="app-body">
           <!-- página html-->
        </main>
        <script src="functions.js"></script>
        <script src="polyfill.js"></script>
        <script src="taskpane.js"></script>
        <script src="commands.js"></script>
    </body>
    </html>

In dev tools the following message appears:

Refused to apply style from 'https://localhost:8443/taskpane.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and Strict MIME checking is enabled.

GET https://localhost:8443/taskpane.js 404 (Not Found)

GET https://localhost:8443/functions.js net::ERR_ABORTED 404 (Not Found)

GET https://localhost:8443/polyfill.js net::ERR_ABORTED 404 (Not Found)

Can help me find the cause of the mistakes?

  • It was serving the static files wrong. It was enough to serve this way: app.use(express.Static('dist'));

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.