How to redirect an import to the filesystem rather than make an http request?

[alshdavid]

I'm doing local testing of my client application and don't want to set up an http server to host it. Is it possible to instruct dynamic JavaScript imports to fetch from the filesystem?

[capricorn86]

I'm doing local testing of my client application and don't want to set up an http server to host it. Is it possible to instruct dynamic JavaScript imports to fetch from the filesystem?

Hi @alshdavid!

This can easily be done by using the setting fetch.virtualServers.

The property url for a virtual server should match the base URL of the request and directory should point to the location in your file system.

File structure:
 - {root}
   - build
     - index.html
     - style.css
     - script.js

import { Window } from "happy-dom";

const window = new Window({
   settings: {
      fetch: : {
         virtualServers: [
            {
               url: 'https://localhost:8080/static/js/',
               directory: "./build"
            }
         ]
      }
   }
});

const module = await window.import('https://localhost:8080/static/js/script.js';

[alshdavid]

Thank you :)

I ended up going with the fetch override because it has to be dynamic: https://github.com/alshdavid/atlaspack-integration-tests/blob/693ad73e2d4a4c13cf34883f6700ca1be89697a0/utils/eval-html.ts#L24

I'm using this for integration tests for a bundler so it get created hundreds of times. Will try to optimise it for performance later

[capricorn86]

Looks like a good solution 🙂

I noticed that you listen for the print event for the virtual console and outputs it to the global console. This can also be achieved by sending in the console object to the Browser constructor (e.g. new Browser({ console: global.console })).