Lightning Web Components Open Source: Get Started

Salesforce recently made Lightning Web Components Open Source. Most of us are already aware about what is Lightning Web Component, In case if you missed them then you can get complete details and hands on experience here.

Using Open Source LWC we can contribute in them, It also allow non-salesforce users to easily use them. While existing Salesforce developer can work on them as well. So it is good for everyone.

Today I will share step by step guide of how we can get started the Lightning Web Components Open Source development.

1. First make sure we have node.js is installed.
2. We also need to install git.
3. After we installed the node.js we need to install create-lwc-app CLI. This will help us in development and provide easy UI options.
   Now open command prompt and run this command
   npm i create-lwc-app
4. Now we are ready to create our app. Run below command
   npx create-lwc-app lwcOSDemo //(you can choose any name)

5. After that a screen will come, where we need to provide basic details for app.

Basic Details

1. Package name for npm: Press Enter to accept the default or enter any name.
2. Description: Enter description or press Enter
3. Author: Enter your name or press Enter
4. Version: Press Enter to accept the default.
5. License: Press Enter to accept the default.
6. Who is the GitHub owner of the repository : Press Enter to accept the default.  
7. What is the GitHub name of the repository : Press Enter to accept the default.
8. Select a package manager: Use your arrow keys to select npm or yarn and press Enter. If you select yarn you need to install that, we are usingnpm we get it with node.js.
9. Use TypeScript or JavaScript: Press Enter to accept the default. We are using JavaScript
10. Use custom Express server configuration: Enter y to install the server and press  Enter to confirm the selection. 

It will take some time in server configuration.

6. After we get the success message a new folder is created with our project name, we need to go enter that. run below command
cd lwcOSDemo

Our dummy app was created, we can view that by running command
npm run watch
After you get the success message you can navigate to http://0.0.0.0:3001 for Mac or http://localhost:3001 for Windows. When ever we made any changes in code it will auto refresh, So we don’t need to re run this again and again.

So we have sucessfully created dummy Lightning Web Component app. Now in our next post we will check how we can connect Open Source Lightning Web Components With Salesforce.

Did you like this post or do you have any question. Let me know in comments. Happy programming 🙂