Question 336782 in Html Question posted in
Some basic documentation can be found here.

NodeJS not letting me import JS to HTML file

I have setup a webserver using NodeJS, which returns the file index.html. Howevern when i try to import a JavaScript file to my html file, my browser gives the error
The resource "http://localhost:3000/includes/main.js" was blocked because of a MIME-Type-Conflict ("text/html")

I do see what the problem is, but i don’t know how to fix it.

My NodeJS code:

var express = require('express');

const app = express();
app.use(express.static('includes'));
app.use(express.static('views'));
app.set('views', 'views');
app.set('view engine', 'pug');


app.get('/', async (req, res) => {
    res.render('index');
})

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

My Project folder structure:

/
  app.js
  /views
    index.html
  /includes
    main.js
Tags:

2

Answers


  1. 0

    This is not a NodeJs issue but an Express setup thingy, which you are using to setup a server.

    Serving static files in Express: https://expressjs.com/en/5x/api.html#express.static

    server.use(express.static('path/to/static-files/folder'))

    read also about res.render() which renders views
    https://expressjs.com/en/5x/api.html#res.render

    // send the rendered view to the client
server.get('/', (req,res) => {
res.render('index')
});

    setup your apps views folder where you keep all html views
    https://expressjs.com/en/5x/api.html#app.set

    server.set('views', '../Path/to/your/views/folder');

    If you decide to use a templating engine other than plain html you’d need to add the following line (this is not necessary if you’re just working with plain HTML files – which is the case here):

    server.set('view engine', 'some_templating_engine i.e pug')
    Login or Signup to reply.
  2. 0

    Modify Your index.html file and include the javascript file in your index.html file as below it works fine.

    The line you have in your app.js file

     app.use(express.static('includes'));

    This is used to lookup the static files like images,js,css so Whatever you defined inside that folder you can use that by including them.

    As in index.html file you can include main.js file in script tag. like this:

    <script src='main.js'></script>

    Use the same server.js file as you given.

    Use the CodeSandBox where I have implemented this check at https://codesandbox.io/p/devbox/expresscheck-3g9p5k

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
        }

        .message {
            font-size: 18px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <div class="container">
        <p class="message">Hello macho man.</p>
        <p class="message">Check your console after this.</p>
        <p class="message">You may write:</p>
        <pre><code class="language-javascript">
console.log("Hello Console");
        </code></pre>
        <p class="message">and check  if it's working or not.</p>
        <p class="message">Mine is working fine. This is the playground link if you want to check.</p>
        <a href='https://codesandbox.io/p/devbox/expresscheck-3g9p5k'>PlayGround Link CodeSandBox</a>
    </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search