Browsers have improved a lot over the past years. It's now possible to do web development without requiring complex build tooling, using the native module loader of the browser. We think this is a great fit for web components, and we recommend this as a general starting point.
Build tools can quickly add a lot of complexity to your code, and make your code reliant on a specific build setup. We think it's best to avoid them during development, or only add them for light transformations if you know what you're doing.
Because web components are based on native browser APIs, you could use any simple web server for development.
@web/dev-server which comes with the project generator. It adds useful developer productivity features, such as a watch mode, caching, and a plugin API. Check the official docs for more information on the dev server.
To run the server inside your project, execute this command:
This will open a browser with a demo of your component.
The demo is served from the
demo/index.html file. If you edit this file or any other file served from the web server, the browser will be reloaded automatically.
import foo from 'foo';
Imports such as this are useful when dependencies in your
node_modules folder need to reference other packages. We do this in the generator project as well.
Unfortunately, the browser does not understand this style of imports today and require some form of preprocessing to resolve the imports to reference the actual file location. Luckily
@web/dev-server can handle this for us using the
In the future, something like import maps will allow the browser to understand these kinds of imports without requiring a transforming step.