Deploying a Lit Web Component - Struggling at deployment

Question

I am new to lit specifically, and web components in general. I have built a web component for usage in Wix (as a custom element), just using straight vanilla js, and have found some success. See https://app.njaplatform.one/rating-element.js for a sample of what I built.

However, I have been asked to redo the work in Lit (https://lit.dev/). I like the syntax of the code better, and it feels like a smarter way to go (as a developer). However, I am really struggling with publishing it.

Whilst I have been able to rebuild my component in Lit, and it is working when I run a local "Web Dev Server", I am really uncertain as to how I publish my lit component so that it is available to other sites. I haven't found any great documentation, walkthroughs, or tutorials on this area. I am really struggling to get over this implementation hump (I am more of a front-end developer and can do some deployments, but I am often very dependent on documentation and well-established ways of doing things).

Key points:

• I started with the typescript starter kit at https://lit.dev/docs/tools/starter-kits/

• Running npm run serve serves the app to a 'Web Dev server' and that appears fine locally for testing.

• I am not sure what I should be doing when I build/deploy the app.

• I have made some attempts to publish on some services online, and I am getting a mix of failures, or partial successes which fashion some documentation on the component (generated by eleventity), but the actual javascript generated appears to break as either

1: file not founds (404), or, 2: Error resolving module specifier "Lit". Relative module specifiers must start with "./", "../", or "/"

Not sure how to proceed, would appreciate some "Lit 101" input on strategies as to what I should be doing at this point.

Answer 1

The starter kits are set up primarily to be a development bed for standalone components, and not exactly for web apps.

The errors you are getting about resolving module specifiers are due to lit being published to npm with bare module specifiers as lit and it's dependencies can be referenced by package name in the code, and deduplicated by npm. Running with Web Dev Server in the starter kit does not have this problem because it uses a plugin @rollup/plugin-node-resolve which resolves those bare specifiers to paths in node_modules directory.

The optimal thing to do depends on what your use case is.

If you are creating a web app/site, the common thing to do for production apps would be to create a JS bundle with your source code. Have an entrypoint file that imports all of your components. You can use something like rollup and also apply the aforementioned @rollup/plugin-node-resolve to create a single JS file. This should be added to your index.html, and have your server or static host serve them.

If you're creating reusable components, you could just leave your code as is and it would be up to the end user to take the steps above to bundle. This would be ideal since if the end user uses multiple components authored with Lit, they won't get duplicate copies of Lit.

If you want your user to be able to simply add a script tag for a js file and use your web components, you'd need to publish the bundled component, which you can also prepare with rollup. The down side of this is that each component will come with its own copy of Lit.