(soft music)
- Hi everyone, my name is Aditya
and I'm a developer evangelist at Salesforce.
In this quick take
I'm going to talk about how you can build an app
using Lightning Web Components Open Source.
I'm also going to talk about the tools and commands
you can use to build, test and run your apps.
So let's get started.
Lightning Web Components Open source
is an enterprise grade UI framework
built on modern web standards
using which you can build apps
that can run on Salesforce platform
or any other platform of your choice.
To learn more about this framework,
you can go to lwc.dev,
which has all the info you need,
right from a quick start experience
to a pretty detailed documentation.
To create the app
we're going to be using the open source
create-lwc-app tool.
Here is the command to use the tool,
which we can now copy, paste into our terminal.
So, in this command, NPX is an audience package runner,
that pulls the latest version of create-lwc-app tool
from the NPM registry and runs it.
So this way you don't have to install the tool
and then keep updating it every now and then.
And my-app here
is the name of the app that we are trying to build.
The tool starts by asking you a couple of questions
about your project architecture.
And based on your selections,
it's going to create the right project structure,
create the Boilerplate code
and fetches the appropriate dependencies.
So first, let's select the mode.
You can choose between
a simple setup option versus advanced.
Let's choose advanced,
to look at all the options available to configure the app.
Next, we'll have to give the application a name.
Then you can optionally give a description,
and whoever is authoring the application, their name,
and then select the Package Manager.
So Package Managers, aid in package installation,
version management, and dependency management.
We can choose between NPM or Yarn.
Let's choose NPM.
Next, we can select the type of app you want to create,
whether it's a standard web app or a progressive web app,
or an electron app, which can be installed on a desktop.
Let's select standard web app.
Next, we'll have to select the bundler,
bundler or module bundlers.
These are tools that bundle several modules
and all of their dependencies into one or more
executable JavaScript files
that can directly run on a browser.
You can select between Webpack and RollUp.
Let's use Webpack for now.
You can choose to write your code
either in TypeScript or JavaScript.
The default is JavaScript.
So, let's just choose that.
Finally, you'll have to choose whether
you want a Basic Express API server or not.
So by saying yes to this,
you get a file in which you can write
Custom Server-Side Logic using Express.
For example, you might want to create your own APIs,
integrate with third party systems.
So all of this can be done using Server-Side Logic.
And if you want to write that,
select YES, but now for this example,
we'll just choose NO,
which is the default option anyways.
And what you see here is a basic project structure
that gets created.
And immediately the tool begins installing
all the dependencies.
Let's now look at the project structure in VS Code.
All of the source files are present in the SRC directory,
inside which first, let's look at index.html.
This is generally the first file
that gets executed in any web app.
Now, the logic to create
and inject the root Lightning Web Component
into this HTML file,
is present in index.js.
So here you can see in line number four,
that we are creating a custom element
for the Lightning Web Component.
And that element is being appended to a DOM element.
Now your Lightning web components
are present inside the modules folder within the SRC folder.
So if you expend the modules folder,
you will see a sub folder called My,
which is called as a namespace.
Inside the namespace folder,
you're going to have both your Web Components,
which are created by default when you create this app.
So, if you expand each folder,
that is your Web Component,
it contains an HTML file that holds the template.
That is the front end of your component
and a JavaScript file,
which stores the business logic of your web component.
So that is the basic structure of a project
inside the SRC folder.
Now, if you would have created the project
by selecting YES, for Custom Express backend,
then this is how the project structure would look like.
The SRC folder would actually contain two folders.
One is Client and the other is Server.
Within the client,
you have your modules, index.html, index.js files.
And within the server folder,
you have a file called as api.js,
which holds all the logic for your Custom Express Server.
Now, let's get back to our main project.
So other than the SRC folder,
what you'll notice is a bunch of configuration files
that we have added to the project.
Prettier is a code formatter
that enforces a custom style across all of your project.
That means it takes care of things like indentation
and all of it.
We have auto generated a configuration file
that lets you configure this.
We have also included a prettier ignore file
that specifies what folders or files to ignore
when prettifying a piece of code.
Next, let's talk about Jest.
So to unit test our Lightning Web Components,
we use the Jest test framework.
And the jest.config.js
is created so that you can add custom jest configurations.
Next, let's talk about ESLint.
ESLint is a static code analysis tool
to identify problematic patterns in JavaScript.
Essentially it enforces all best practices
based on the rules that we configure.
So let's say things like
preventing the use of console log statements,
or the use of triple equal to
instead of double equal to.
ESLint also has an ignore file,
which lets you specify the files
that have to be ignored
when checking for linting errors.
Finally, let's talk about the most important file here,
the package.json file.
So this file shows us all the configuration we have created
when setting up this project.
So things like name, description, author,
all of them are present in package.json.
It also includes the dependencies,
out of which I want to call your attention to lwc-services.
All the libraries like Jest, Webpack, Express,
Lightning Web Components are bundled
within this single dependency,
so that you don't have to manage
individual versions independently.
So you can just update the lwc-services
to use the latest version.
And we internally take care of making sure
that it refers to the latest versions
of all the other libraries like LWC
that we are referring to.
lwc-services has its own configuration file
called lwc-services.config.js.
Using this file,
you can configure things like, the build output directory,
the port number from which the files are served from
and many more.
You can find all of the configuration options
by looking at the link over here.
lwc-services also rolls out a bunch of its own commands,
and all the list of commands
that you can run in this project
are specified in the scripts section of package.json file.
So let's look at some of the commands
that you can run on this project.
So the build script,
lets you create a production build for your project,
using the bundler you have chosen during project creation.
The Serve script creates a simple Express server,
to serve out the build output that you have created.
So typically this is used for production use cases
where you build out your project for production,
it creates a bunch of files,
and then you use the serve command
in order to serve those files out,
using a simple server.
Then there are a bunch of commands
that let you run tests on your project.
And then there is this Watch command.
It internally uses Webpack's features like Dev Server
and the Watch Mode,
to make sure that whenever you make changes
in your source code,
it automatically rebuilds your project,
and the browser is automatically refreshed.
This command is most useful
when you're developing your project
because whenever you try to make any changes,
you can immediately see the output.
What we've also done in package.json,
is we have configured pre-commit hooks.
So the job of a pre-commit hook is to run a set of commands
whenever you try to commit your code to a repo.
So here we are running two commands.
One is the prettier and lint.
So now that we understand the project structure,
let's go ahead and run the app locally.
For that, let me open up a terminal
and run the Watch command.
So you can see that the local development server
has started on port three, zero, zero one.
Let's launch it in the browser.
So here you go.
You can see your app running locally.
So that's about it.
But before you leave,
here is a quick tip.
You can skip the entire wizard process
when using the create-lwc-app tool,
by using the Silent Mode.
So for more information,
you can go to lwc.dev.
(soft music)
Thank you for watching.
If you've 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.