(soft music)
- Hi, everyone, my name is Aditya
and I'm a Developer Evangelist at Salesforce.
In this quick take, I'm going to show you
how you can package and distribute the components
that you've built with Lightning Web Components Open Source,
so that they can be used by other developers and projects.
Let's dive in.
Here is a timer component that I built,
which I plan to share with others.
The time left is shown digitally, as well as using this ring
that changes color based on the time that is left.
Here is the source code behind it.
I've embedded the timer component inside app.html,
and the component is present in the clock namespace.
It takes in a few attributes like the duration in seconds,
whether or not the timer has to start on load.
And the component also emits a timeup event
once time runs out.
In the Salesforce world,
I would share this component with others
by creating a managed or unmanaged package.
But in the LWC OSS world,
what I'll be creating is an NPM package.
And just like you have AppExchange for Salesforce
Play Store for Google and so on, we have the NPM registry,
where you host the NPM packages.
A few things that you already know about and used
like the create-lwc-app tool, lwc-services
are already on the NPM registry,
and that's where you're downloading and using them from.
And you know what,
we've also packaged up most of the lightning base components
and put it on NPM, so that you can use them
in any of your projects.
The link to this package is in the description below.
In order to package and distribute
your own Lightning web components,
you'll have to complete two steps.
First, you'll have to explicitly define
which components from your project
you want to expose for consumption.
And you do that using the lwc.config.json file.
In this file, you define a key called expose,
which is going to be an array of all the components
that you want to expose to others.
So from this project, I want to expose the timer component
from the clock namespace.
So I'll write clock/timer.
If you're wondering why you have to
explicitly define these components,
it's because you may have many other internal components
that you may add or remove in the future
and you don't want others to use them.
By explicitly defining components in this file,
you make sure that the users can only use
what you want them to use.
Kind of like what private and public modifiers
do in languages like Java and Apex.
So think of this like marking your components as public.
The second step is to actually create the package
and put it on the NPM registry.
You can either publish it to the standard NPM registry
that I was just showing you, or a custom registry
if you have one.
The standard registry allows you to upload
unlimited public packages,
but you'll have to pay to upload private packages.
The packaging process utilizes the package.json file
to determine things like the name of the package,
description, version, and many other things.
So I am creating a package with the name lwc-clock-utils
and this is what I can use to find my package on NPM
once I have published it.
So the first step to publish the package
is to run the npm login command.
It asks you for your username, password and email address.
After which it is going to log you in.
Next, you need to run the command npm publish.
that's going to both create a package
and publish it to the registry.
And you can see the process is pretty quick.
So let's now find our package on the NPM registry.
I'll copy the name and go to the NPM registry
and try to find it.
And there you go.
The package is now available on NPM for all of you to use.
You'll find the links to this package and the GitHub repo
for the source code in the description below.
If you're looking for steps to import and use this package,
or any other package for that matter,
check out my next quick take
also linked in the description below.
Thank you for watching.
If you have learned something be sure to like this video.
If you want to get more content like this
pushed directly to you, click subscribe
and click that bell icon to get notifications.