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.