Bare module imports? Follow
Hi, I've been using WebStorm for a long time. Clicking on the browser popup inside my index.html is such a part of my muscle memory right now, and I love it.
The problem is that for my current workflow, WebStorm's built in server isn't cutting it. The reason is that while ES6 module importing works great, the community (the Web Components one at least) is using bare module imports. For example, while
import "../node_modules/mypackage/mypackage.js"
works today, most are using
import "mypackage.js"
And then for components as part of the same project, folks will typically leave off the .js file extension.
This doesn't work with a typical file server like WebStorm provides. From what I can see there are 3 potential solutions:
- Import maps - this has nothing to do with WebStorm and is likely the best solution, but is Chrome only right now, and maybe shouldn't be part of your project anyway, as I intend to bundle when going to prod anyway
- Use a different server. https://www.npmjs.com/package/es-dev-server seems to be the defacto standard right now for Web Component development. The easiest sounding thing to do is to replace WebStorm's server with this one, but I don't know that its possible. Starting up the server in the terminal is fine, but again, I have years of muscle memory clicking on the browser icon from the html file editor, and not worrying about the extra step of starting a server. Is this possible to swap in a different server somehow?
- Add functionality to the existing WebStorm server for bare module imports. This seems most likely as something achievable now, but I don't know if this exists as a possibility either.
Hopefully someone can advise!
thanks
Please sign in to leave a comment.
The built-in web server is a simple static web server that serves files from
localhost:63342/<project_name>
and is not configurableFor advanced modules resolving/routing/etc., you need using other web servers. You can set the web server of your choice as default for your project in Settings | Build, Execution, Deployment | Deployment - configure the server (https://www.jetbrains.com/help/webstorm/2019.2/creating-in-place-server-configuration.html) and make sure that Use as Default is enabled. The default web server will be used for page previewing instead of the built-in web server
Thanks, I guess I was overthinking it - just editing the project configuration URL seems to be enough. That said, is there any way to automatically run a terminal command to start the server either when the project loads, or when I go to launch the browser?
You can create NPM run configuration for running the NPM script that starts the server and add this configuration to Startup Tasks in Settings | Tools | Startup Tasks - these tasks are launched automatically on the project opening. See https://www.jetbrains.com/help/webstorm/2019.2/settings-tools-startup-tasks.html