Node.js tutorial

How to serve static resources

JavaScript modules work only via HTTP(s), not in local files. If you try to open a web-page locally, you’ll find that import/export directives don’t work.

So if you want use modules locally for development you can run simple local http server that will serve your resources including javascript files.

1. Change to directory with your static resources.

2. Install connect and serve-static.

npm install connect serve-static

The node_modules subdirectory will be added.

3. Add to directory server.js file with this content:

var connect = require('connect');
var serveStatic = require('serve-static');

connect()
    .use(serveStatic(__dirname))
    .listen(8080, () => console.log('Server running on 8080...'));

4. Execute server.js with Node.js:

node server.js

5. For example, let's say your directory has the following structure:

mylocaldir
--- js
----- setup-gui.js
----- painter.js
----- rgba.js
--- index.html

And index.html file has

<script type="module">
    import {setupGui} from './js/setup-gui.js'; 
    setupGui();
</script>

Then go to http://localhost:8080/index.html. Your javascripts will be work correctly.