1

I have a simple static file server and try to host simple WebGL project on my localhost. Well, I end up with

Loading module from “http://localhost:9000/main.js” was blocked because of a disallowed MIME type (“”).

and really don't know what to do with MIME (""). All I have, are just ".js" files, basically. Anything else I have modified from This Server Template is that line of code

if (fs.statSync(pathname).isDirectory()) pathname += '/public/index' + ext;

Here is server file and my project directory tree:

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const port = process.argv[2] || 9000;

http.createServer(function (req, res) {
  console.log(`${req.method} ${req.url}`);

  // parse URL
  const parsedUrl = url.parse(req.url);
  // extract URL path
  let pathname = `.${parsedUrl.pathname}`;
  // based on the URL path, extract the file extension. e.g. .js, .doc, ...
  const ext = path.parse(pathname).ext;
  // maps file extension to MIME typere
  const map = {
    '.ico': 'image/x-icon',
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.css': 'text/css',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.wav': 'audio/wav',
    '.mp3': 'audio/mpeg',
    '.svg': 'image/svg+xml',
    '.pdf': 'application/pdf',
    '.doc': 'application/msword'
  };

  fs.exists(pathname, function (exist) {
    if(!exist) {
      // if the file is not found, return 404
      res.statusCode = 404;
      res.end(`File ${pathname} not found!`);
      return;
    }

    // if is a directory search for index file matching the extension
    if (fs.statSync(pathname).isDirectory()) pathname += '/public/index' + ext;

    // read file from file system
    fs.readFile(pathname, function(err, data){
      if(err){
        res.statusCode = 500;
        res.end(`Error getting the file: ${err}.`);
      } else {
        // if the file is found, set Content-type and send data
        res.setHeader('Content-type', map[ext] || 'text/plain' );
        res.end(data);
      }
    });
  });


}).listen(parseInt(port));

console.log(`Server listening on port ${port}`);
 First_Triangle]$ tree
.
├── public
│   ├── geometries
│   │   ├── letter_A.js
│   │   └── letter_F.js
│   ├── index.html
│   ├── lib
│   │   ├── cuon-matrix.js
│   │   ├── cuon-utils.js
│   │   ├── webgl-debug.js
│   │   └── webgl-utils.js
│   ├── main.js
│   └── WebGL_Utilities
│       ├── Compile_Shader.js
│       ├── Create_3D_Context.js
│       ├── Create_Canvas
│       │   ├── Append_Canvas.js
│       │   ├── Create_Canvas_Element.js
│       │   ├── Create_Canvas_Imports.js
│       │   ├── Get_Body_Tag.js
│       │   └── Set_WebGL_Attribute.js
│       ├── Create_Canvas.js
│       ├── Create_Program.js
│       ├── FRAGMENT_SHADER_SOURCE.js
│       ├── Imports.js
│       ├── Initialization.js
│       ├── misc
│       │   └── misc
│       │       ├── completed_boilerplate.js
│       │       ├── createAttributeSetters.js
│       │       ├── createBufferInfoFromArrays.js
│       │       ├── createProgram.js
│       │       ├── createShader.js
│       │       ├── createUniformSetter.js
│       │       ├── Imports.js
│       │       ├── initialize_Vertex_Buffers.js
│       │       ├── m3.js
│       │       ├── m4.js
│       │       ├── resizeCanvasToDisplaySize.js
│       │       ├── rome.js
│       │       ├── setAttributes.js
│       │       ├── setBuffersAndAttributes.js
│       │       ├── setGeometry.js
│       │       ├── setRectangle.js
│       │       ├── setUniforms.js
│       │       ├── simple_transformations.js
│       │       ├── WebGL_Initialization
│       │       │   ├── Create_Canvas
│       │       │   │   ├── Append_Canvas.js
│       │       │   │   ├── Create_Canvas_Element.js
│       │       │   │   ├── Create_Canvas_Imports.js
│       │       │   │   ├── Get_Body_Tag.js
│       │       │   │   └── Set_WebGL_Attribute.js
│       │       │   ├── Create_Canvas.js
│       │       │   └── Initialization.js
│       │       ├── webgl-utils.js
│       │       └── webGlUtils.js
│       └── VERTEX_SHADER_SOURCE.js
└── server.js

UPDATE

I deleted type="module" from index.html file to import main.js, and got errors:

GET http://localhost:9000/main.js [HTTP/1.1 404 Not Found 2ms]

Cookie “” has been rejected as third-party.
PostR
  • 85
  • 1
  • 8

0 Answers0