polymer serve vs. static web server

Question

What kind of magic is polymer-serve doing that I don't get with a simple, static web server?

I just started with a simple "hello world" project. When I run polymer serve I'm able to browse to the page at http://localhost:8000/example.html and it works great. If I use static-server and browse to the same page, I get an error message in Chrome.

Uncaught TypeError: Failed to resolve module specifier "@polymer/lit-element". Relative references must start with either "/", "./", or "../".

Here's example.html, which was copied right out of the README.

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module">
  import { LitElement, html } from "@polymer/lit-element";

  class MyElement extends LitElement {
    static get properties() {
      return {
        mood: { type: String }
      };
    }

    constructor() {
      super();
      this.mood = "happy";
    }

    render() {
      return html`
        <style>
          .mood {
            color: green;
          }
        </style>
        Web Components are <span class="mood">${this.mood}</span>!
      `;
    }
  }

  customElements.define("my-element", MyElement);
</script>

<my-element mood="happy"></my-element>

score 2 · Accepted Answer · answered Jan 03 '19 at 20:54

Modules are imported by name instead of by path

check for instance this reference

From it

This change brings Polymer in line with standard npm practice, and makes it easier to integrate Polymer with other tools and projects. However, because browsers don't yet support importing modules by name, it means you'll need a transform step to run Polymer modules natively in the browser. The Polymer CLI and related tools are being updated to do this transformation automatically.

running polymer build should create converted files (referenced by path)

polymer serve vs. static web server

1 Answers1