CODEWITHSUNDEEP
javascripthtmlexpress
Kandarp Gandhi
Kandarp Gandhi

Reputation: 279

Unable to load style and execute script Express JS

I have my GET request trying to load an html page in my routes.js file using

  app.get('/api/testresult', (req, res) => {
    res.sendFile('/path/myfile.html');
  });

Also, in my server.js i have the following

const express        = require('express');
const bodyParser     = require('body-parser');
const app            = express();
const path = require('path');

const port = 8000;

app.use('/', express.static(path.join(__dirname, './app/report')));
require('./app/routes')(app, {});
app.listen(port, () => {
  console.log('Server running on ' + port);
});

However when i try to do a GET call, it throws the error on the browser console

localhost/:1 Refused to apply style from
'http://localhost:8000/api/testresult/assets/app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:2 GET http://localhost:8000/api/testresult/assets/app.js 404 (Not Found)
localhost/:1 Refused to execute script from 'http://localhost:8000/api/testresult/assets/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

My file structure is 

MyApp 
app 
 —report 
      —assets 
        —app.css
        —app.js
     —my file.html
 —routes
    —index.js
    —routes.js
node_modules
package.json
server.js

What am I missing here ?

Upvotes: 0

Views: 77

Answers (1)

jfriend00
jfriend00

Reputation: 707328

So, your directory hierarchy shows app.js at /assets/app.js from where you pointed your express.static() middleware. So, that's the URL that you would need to use for it to serve that file, but you are apparently using a URL with the path /api/testresult/assets/app.js. Those simply don't match. That URL would be looking in:

app/report/api/testresult/assets/app.js

But, that isn't where the file is (thus you get a 404).

You can fix it a couple ways:

  1. Change the client side URL to "/assets/app.js". I'm guessing you may have specified "assets/app.js" in your client file. Because this is a relative URL, the browser would then combine that with the path of your web page to construct the URL your server got a request for /api/testresult/assets/app.js.
  2. Change the express.static line to include the proper path prefix app.use('/api/testresult', express.static(path.join(__dirname, './app/report')));

Upvotes: 1

Related Questions