Unable to load style and execute script Express JS

Question

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 ?

So, for this error GET http://localhost:8000/api/testresult/assets/app.js 404 (Not Found), where is app.js located in your file system? — jfriend00
– jfriend00, Commented Aug 31, 2018 at 19:03
If you're trying to show a file hierarchy, we can't really read it in comments. Please use the "edit" link to add that info to the end of your question where you can format it appropriately. — jfriend00
– jfriend00, Commented Aug 31, 2018 at 19:12

jfriend00 · Accepted Answer · 2018-08-31 19:30:54Z

1

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:

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.
Change the express.static line to include the proper path prefix app.use('/api/testresult', express.static(path.join(__dirname, './app/report')));

answered Aug 31, 2018 at 19:30

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kandarp Gandhi Over a year ago

Assuming I am trying to render an html file from another location outside of MyApp , how should i make this work ? I got your solution to work when i have the folder inside of MyApp. But i'm unable to get it work from outside. I tried adding the whole external path to the app.use('path', express.static('path')) and i wont work

jfriend00 Over a year ago

@kandarpgandhi - I do not understand what that comment means. Perhaps you want to write a new question and show the exact details of what you're trying to ask. Where a rendered HTML file sits in the file system has nothing to do with how the paths inside the HTML work - they are completely separate things, controlled by how you defined your routes and how you specify URLs in your HTML.

Kandarp Gandhi Over a year ago

stackoverflow.com/questions/52174338/… @jfriend00

jfriend00 Over a year ago

@kandarpgandhi - I provided an answer there.

Collectives™ on Stack Overflow

Unable to load style and execute script Express JS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related