Salesforce Lightning Web Components Open Source Version (OSS)

Introduction

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 a Salesforce platform or any other platform of your choice.

Salesforce has open-source Lightning Web Components, which means we can use this technology to run applications inside and outside of Salesforce servers. There is no official support from any IDE. Therefore, so far, no IDE can provide automatic import or code completion type functions, but we can use some common tools, such as ESLint or Jest. 

Therefore, you need to prepare a tool preference package to help build LWC in the open-source version. We recommend lwc-create-app, which is an open-source tool that bundles common development activities such as local development, creation of production versions, unit testing, etc., It is a tool for setting up Lightning Web Components projects.

It's preferable as it mostly follows the pattern of other popular UI framework tools like Vue CLI or create-react-app. You must have Nodejs (Node 10.x) installed on your machine to create an LWC application.

To create the app we need to install the open-source create-lwc-app tool (Reference →  lwc.dev)

We can install the create-lwc-app using the command on the terminal. ($ npx create-lwc-app my-app (my-app is the name of App)).

npx is a Node Js package that pulls the latest version of the create-lwc-app tool from the npm registry and runs it.

It will create the right project structure, create the Boilerplate code, and fetch the appropriate dependencies also, will start installing the components of your app tool and will ask some questions about project architecture like:

Don't forget to check out: Standard and Custom Percentage Calculator in Salesforce Lightning Component

Do you want to use the simple setup? (y/n)

(Select mode you can choose, a simple setup option versus advanced.)

package name for npm

(we'll have to give the application a name.)

Select the package manager (npm OR yarn)

(package managers, aid in package installation, version management, and dependency management. We can choose between NPM or Yarn.)

Select the type of App you want to create.

(select the type of App for Example Standard Web App).

Select the bundler 

(we'll have to select the 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).

Use Javascript OR typescript

(Select the type of script by default it is javascript)

Do you want a basic Express API server? (y/n) .

(For writing server-side custom logic or integrating with third-party or you might want to create your own APIs select y(yes)).

If you want to skip the above process of asking questions and create a project directly.

Use this npx create-lwc-app my-app --yes -o express command. 

This command creates a default project structure and a simple application to help you get started. As part of the process, the CLI will install the framework, tool dependencies, and create the application.

If you select ‘No’ for basic API Server

All of the source files are present in the SRC directory (index.html,index.js).

Index.html file is the first file that gets executed in any web app.

Logic to create and inject the root lightning web component into this HTML file is present in the index.js file.

If you select ‘Yes’  for basic API Server

You get a file in which you can write custom server-side logic using Express. 

For example: if you want to create your own APIs or integrate with third-party systems. All of this can be done using server-side logic.

The SRC folder contains two folders Client and Server.

Check out another amazing blog by Anuj here: How to Host LWC OSS Apps on Github Pages | Salesforce Developer Guide

The client folder contains index.html,index.js files and the server folder contains file api.js which holds all the logic for your custom express server.

We can see the output by running the watch command in the terminal of VsCode or command prompt and opening it up in Tab of the current browser. (this is only for when we run our App locally ). It internally uses webpack features like Dev server and the watch mode. It automatically refreshes the browser every time whenever you make any changes.

Here’s the command: npm run watch