Login/Register
How to deploy / use lit-html, lit-element on a live web server
Asked Answered
node.jsdeploymentlit-elementlit-htmlnpm-live-server
C

1

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?

Cotterell answered 29/8, 2019 at 18:57 Comment(5)
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 – Reddish
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. – Cotterell
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: open-wc.org/publishing/#serving-with-apache-http-server – Tlingit
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... jsabarinath.wordpress.com/2019/03/30/… – Sheepdip
I would strongly recommend Rollup over Webpack. open-wc.org has a nice Rollup config that works with LitElement. – Ashley
M
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

Meissner answered 8/9, 2019 at 23:8 Comment(3)
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 – Meissner
Hey @Meissner 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? – Cotterell
@Cotterell — 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: discord.gg/2w6T5nP — 👋 cheers friend – Meissner

© 2022 - 2024 — McMap. All rights reserved.