7

I started trying out lit-html and lit-elements, playing around with it and now I git in the problem where I cannot find out how to publish such code online. Never worked with Node-js packages on online platforms, only used bits of code from it. Normaly I build plain php/html templates, but I wanna try this.

Build some test cases localy that work. But googled all over the place to find out how i can publish this kind of code online to the internet. I am using a shared hosting with many options like SSH e.g. But can't find out what to do to get this working, it can't be as simple as running npm install on my server right?

devFlats
  • 71
  • 1
  • 2
  • As long as you build your project or set import maps correctly you should be able to deploy using a static web server or a cdn – Alan Dávalos Sep 02 '19 at 02:45
  • Thanks for your anwser. I added webpack to my gulp setup. This way i can handle the node modules. Everything is starting to fall together now. – devFlats Sep 03 '19 at 14:27
  • Because of some customers, I can't use Node as a backend. A few months back I switched from the polymer-cli to open-wc, and wrote this on how to deploy on Apache: https://open-wc.org/publishing/#serving-with-apache-http-server – Thad Sep 03 '19 at 19:30
  • You need to configure polymer.json & run `polymer build`. In local repository... Then upload that folder to file explorer in shared hosting.. read this blog on how to configure polymer.json... https://jsabarinath.wordpress.com/2019/03/30/polymer-build-with-service-worker-in-polymer-3/ – shabarinath Sep 06 '19 at 21:34
  • I would strongly recommend Rollup over Webpack. open-wc.org has a nice Rollup config that works with LitElement. – Justin Fagnani Sep 18 '19 at 18:27

1 Answers1

5

the best thing about the new world of web components, and lit-html and friends, is that we don't actually need npm, we don't need compilation, or any build step at all

these days, we can use es-modules to load things straight from a CDN like unpkg or jsdelivr

take a look at the demo on haunted's github readme — this is all you need!

<!doctype html>
<html lang="en">

<my-counter></my-counter>

<script type="module">
  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
  import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

  function Counter() {
    const [count, setCount] = useState(0);

    return html`
      <div id="count">${count}</div>
      <button type="button" @click=${() => setCount(count + 1)}>Increment</button>
    `;
  }

  customElements.define('my-counter', component(Counter));
</script>

check it out running live on this codepen example

Chase

ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50
  • 1
    also, i should mention, my favorite way to deploy is via github pages! it's free to get started with open projects, and you can set it up on private repo's also — it uses the cloudflare CDN, so performance won't be an issue – ChaseMoskal Sep 08 '19 at 23:09
  • Hey @ChaseMoskal thanks for this, thats another approach I will be looking at! I dont know why but i prefer to host all of my files on a owned server, think I just dont want to relay on another party. Now I have build a script with gulp, webpack and babel to compile it all to one JS file. Won't al those imports been seen like stand alone http requests? – devFlats Sep 10 '19 at 06:38
  • @devFlats — these days i recommend against using gulp because it's much overcomplicated, it's better if your build is only a couple of simple npm scripts — you certainly don't have to use `unpkg` to host your packages, in the example above you can just point those links within your `node_modules` instead — bundling can improve performance, but with these days http2 streamlining the loading of scripts, much of the performance burden is lifted when using modules — i'd love to chat more anytime if you'd like to join my discord channel: https://discord.gg/2w6T5nP — cheers friend – ChaseMoskal Sep 10 '19 at 18:09