solved Can't load .env files in express.js server

[olsibob]

I'm using express.js to serve a BabylonJS app statically. The dev server is ts-node running on localhost. Everything is going great except that it won't load .env files.

If I try loading the .env file:

const envTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("assets/textures/mono_lake.env", scene);

const skyBox = scene.createDefaultSkybox(envTexture, true, 128);

I get the error "Cannot load cubemap because files were not defined" in the console.

Elsewhere on the forum, I see that people using IIS servers need to explicitly allow .env file mimetypes in a web.config file, but I'm wondering if this is necessary in express running on locahost?

What makes me think it is not a mime issue, is that I do seem to be able to load the .env as a  binary file if I use the code below:

Someone must be serving Babylon files over node, does anyone know how to get this working?

const assetManager = new BABYLON.AssetsManager(scene);

const skyboxTask = assetManager.addBinaryFileTask("skybox", "assets/textures/mono_lake.env");

skyboxTask.onError = (task, message, exception) => {

console.log(message);

}

skyboxTask.onSuccess = task => {

console.log("success, length: ", task.data.byteLength);// returns the correct length of the .env file

 

}

assetManager.load();

 

 

[Guest]

Can you check the network profiler to see if the file is actually loaded?

[brianzinn]

I use expressjs and koa a lot for development.  You may be having trouble with binary being sent as text.  so, use res.send(..).  If the static file path is different, you can overrride it like this:
https://github.com/expressjs/express/blob/master/examples/downloads/index.js
If your network profile shows the file being sent then you need to provide your expressjs config. (ie: static).

[olsibob]

Checking the network conditioner, when I run the "binaryFileTask" operation, these are the headers in for the .env file:

1. 1. Request URL:
      http://0.0.0.0:2657/assets/textures/mono_lake.env
   2. Request Method:
      GET
   3. Status Code:
      200 OK
   4. Remote Address:
      0.0.0.0:2657
   5. Referrer Policy:
      no-referrer-when-downgrade
2. Response Headersview source
   1. Connection:
      keep-alive
   2. Content-Length:
      1067838
   3. Content-Type:
      application/octet-stream
   4. Date:
      Thu, 23 Aug 2018 20:13:49 GMT
   5. ETag:
      W/"104b3e-UkXMdunGN93+cNYg5Su/4I5pzrg"
   6. X-Powered-By:
      Express
3. Request Headersview source
   1. Accept:
      */*
   2. Accept-Encoding:
      gzip, deflate
   3. Accept-Language:
      en-GB,en-US;q=0.9,en;q=0.8
   4. Cache-Control:
      no-cache
   5. Connection:
      keep-alive
   6. Host:
      0.0.0.0:2657
   7. Pragma:
      no-cache
   8. Referer:
      http://0.0.0.0:2657/
   9. User-Agent:
      Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Edited August 23, 2018 by olsibob

[brianzinn]

you need to do ctrl-refresh to force the download again - 304 is telling you that you already have it cached in browser.  you may need to force binary by using Buffer().

[olsibob]

I disabled the cache in developer mode, so now it's a 200

[olsibob]

But, when I use the CubeTexture.CreateFromPrefilteredData code, I don't see the file at all in the network conditioner.

6 minutes ago, brianzinn said:

you may need to force binary by using Buffer().

Could you explain a little more how I would do this?

[olsibob]

In the node server, I try intercepting the request for the file, like this:

app.get('/assets/textures/:file(*)', (req, res, next) => {
    console.log(req.url, req.params.file);
    const staticPath = path.join(__dirname, "..", "..", "client", "dist", req.path);
    fs.readFile(staticPath, (err, data) => {
        if (err) {
            console.log(err)
            res.send({ message: "oh no!", error: err });
        } else {
            const file = path.basename(req.path);
            res.contentType(file);
            console.log("sending");
            res.send(data);
        }
        res.end();
    });
});

This gets called and the logging works for png files etc, but it doesn't get called at all for the .env file (this is when the console for the client errors with "Cannot load cubemap because files were not defined"). It's as if the request for the .env file isn't being made at all

 

[olsibob]

@brianzinn I think you're suggesting something like 

res.send(new Buffer(texData, 'binary'))

though the problem is that the get path doesn't seem to get called for .env

 

[brianzinn]

I was suggesting that, yes:

res.send(new Buffer(data), 'binary'))

Looks like you may need something more like this, but I have never used it:

express.mime.type['env'] = '??/??';

 

[olsibob]

Yeah, I've got this in there, 

express.static.mime.define({'application/octet-stream': ['env']});

doesn't make a difference though. I'll try it without the static

[olsibob]

If it is a mimetype issue though, how come I get a 200 network response for the .env file when I try loading it with assetManager.addBinaryFileTask?

[Guest]

Can you host your code somewhere so we can see it live?

[brianzinn]

i found the NPM link for define - you don't need 'static' I would guess:
https://github.com/broofa/node-mime#mimedefinetypemap-force--false
Not sure why the 200 then, so maybe mime doesn't make sense.  Are you serving the right content?

[olsibob]

@Deltakosh sure, here's a version that falls down right away with the "cannot load cubemap" issue https://sky-explorer-birfeajogq.now.sh/

You can view the source here https://sky-explorer-birfeajogq.now.sh/_src

[Guest]

Haha, yes but I need the non minified version please

[olsibob]

@Deltakosh sorry about that. I'm struggling actually to get npm/webpack to send babylon-max instead of the minified one. I upload the source and then the build happens on the server, so I can't just manually copy the max file across.

edit: I think I've thought of a way to do this, I'll try again tomorrow.

 

 

[brianzinn]

try with "externals" and include max <script ../> on your page.

module.exports = {
  //...
  externals: {
    babylonjs: 'babylonjs'
  }
};

[MarianG]

Any news with this?

 I'm affraid I'm haveing the same problem

Later edit: For me work if I updated babylonjs from 3.2 to 3.3beta

[Guest]

If you have a repro case online with a reference to non minified source I will be able to help

[MarianG]

But now I'm getting this 

[Guest]

Ok so make sure to move to latest babylon.js and TS 3.0

[olsibob]

Oh wow, moving to TS 3 and BabylonJS 3.3.0 made it work! I had been on TS 2.9.2 before.

[Guest]

Flagging as solved then

[MarianG]

Confirm