Search code examples
javascriptnpmread-eval-print-loop

How to easily test an npm module as I code?


I am working on modifying @editorjs/nested-list. I want a way to do very quick testing as I go, without a lot of install. I put together a little web page:

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
</head>
<body>

<h1>EditorJS</h1>
    <div class="container">
        <div id="editorjs"></div>
    </div>
    <script type="module" src="./index.js"></script>
    <script>
const editor = new EditorJS({
    holder: 'editorjs',
 }
);
    </script>

</body>
</html>

with index.js being the source for nested-list.

I get an error message:

Access to script at 'file:///.../nested-list/src/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

What is the easiest way for me to test my mods to index.js as I go?

Can I modify this HTML somehow, or do I need a different toolchain?

P.S. I see this unanswered possibly related question.

P.P.S. This is also related, but they assume there is an app ("MyApp"), whereas I have no app. Maybe I need to set up a dummy app? That's a bit annoying.


Solution

  • Use a simple development server to quickly run your html files in the localhost by avoiding all file:// security complications.

    My favourite is: https://www.npmjs.com/package/http-server

    Very simple steps:

    1. npm install --global http-server
      
    2. Go to the directory where you have the index.html file and enter the command http-server

    The index.html file is now available at http://localhost:8080