Provide documentation for how to build LWC for use in non-lwc webpack project

[ChuckJonas]

Is your feature request related to a problem? Please describe. I'm attempting to get the lightning-base-components to run outside of an LWC project (IE a react app or even just plain html). However, I'm finding there is basically no documentation for how this would work.

Describe the solution you'd like A working example which shows how LWC (specifically the lightning-base-components) can be bundled in a webpack project.

Describe alternatives you've considered Searched the internet for examples... Found a webpack extension that is apparently outdated.

Attempted to figure it out via the moduleResolver documentation, but honestly the whole "custom module resolution" is very confusing.

[dhruvkediaSFDC]

Here is an example of a sample project we are working on to bring lightning-base-components to you. It uses our lightning-base-components NPM package. Look out for a blog that provides additional details (coming soon)!

[ChuckJonas]

@dhruvkediaSFDC the repo you linked appears to be just another LWC app...

I'm wanting to see an example of these components being built into a non-lwc app... Ideally with something like webpack (like react).

The LWC home page states:

Learn Once, Build Anywhere Create fast, versatile web components and apps using the stack and tools your team prefers.

Yet, I've never seen an example of any LWC component running outside of a larger LWC app

[diervo]

State tuned as soon we will be releasing something to address this and many more concerns around runtime environment.

[karangarg45]

Hi @diervo

Has there been any progress on this? I am looking to integrate lwc into an existing react app.

[diervo]

We are going to do some announcement at Dreamforce for the runtime, however if you just want to integrate LWC you can do it trivially with rollup of webpack already.

[karangarg45]

Hi @diervo Sorry for the delayed response but is there any recommend way to do it in a react application bundled by webpack or any recommended webpack plugin?

[diervo]

I don't think we have a boilerplate example for embedding LWC, however all you need is to use the API to define web components described in the docs here: https://lwc.dev/guide/install#use-lightning-web-components-as-native-web-components You can use rollup or webpack to generate the JS bundle, then you just need to include it as a custom element in your react page.

[karangarg45]

Thanks for the info @diervo . I will give this a try.

[nolanlawson]

We now have instructions for getting started with LWR on lwc.dev, as well as a separate lwc-wepback-plugin project with its own documentation. Closing this issue for now.