Bare module imports?

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:

  1. 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
  2. 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?
  3. 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

 

3 comments
Comment actions Permalink

The built-in web server is a simple static web server that serves files from localhost:63342/<project_name> and is not configurable

For 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

0
Comment actions Permalink

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?

0
Comment actions Permalink

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

0

Please sign in to leave a comment.