 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School in this video. I'm going to demonstrate how you can set up visual studio code for lightning web component. So in my previous video, I just gave you introduction about LWC and before implementing lightning web component, we just need to set up visual studio code and other configuration. So in this video, I will be guiding you step by step. So first step will be to download and install visual studio code. So for that purpose, you can use this link, which is a simple code.visualstudio.com slash download. So just click on this link. So you won't be able to click because it is available on my system. So you can just type this URL in your system and you will see these options. Like if you're using windows, you can click here for Linux. These options are available for Mac. These options are available. So you can just click download and install so that your visual studio code will be available in your system. Right. And once your visual studio code is installed, so you will see a icon on your desktop or if you're using a Mac, so it will be available in the bottom bar. So you will see this kind of icon and you can open that now moving further. So after completion of step one, like if you have downloaded and installed visual studio code. So next we need to focus on the step number two. So it is to install Salesforce DXCLI. So to connect the visual studio code with Salesforce or we need to install Salesforce DXCLI. How we can do that? So here's the URL. So you can just type developer.salesforce.com slash tools slash SFDXCLI. So I'm just clicking here. So this type of UI, you will see once you type this URL in your system and you will see the options like for Mac, Windows and Linux. So you can just click. So right now Mac is already selected. So it is showing download format. If you click on Windows, so you will see these options. If you click on Linux, so you will see these options. So as per your system, you can just download it and after download and install what you need to do. So once installed, you can just test it by opening the command window and type SFDX. So you will see the version and other details about Salesforce CLI. So in my system, I'm just using Mac. So in my system, it is already installed. So if I open the terminal in the Mac, so I'm just going to show you how it will look like. So I'm on the terminal and I'm just typing SFDX and pressing enter. So here you can see, you will see the version, usage, topics, commands. So if you see these details, it means SFDX CLI is installed in your system successfully. So this was the step number two. After completion of the step two, like download, install and verify whether Salesforce CLI is installed or not. So after verifying this, you can jump to step number three. So for step number three, you just need to open your Visual Studio code and you need to install Salesforce extension pack. So once you install Salesforce extension pack, so it will be installing Apex, Salesforce CLI integration, Apex interactive debugger, Apex replay debugger, Visualforce, Aura components and Lightning Web components. So now I'm jumping to Visual Studio code. So this will be the UI, like if you open Visual Studio code, so this kind of UI you will see. And on left hand side, you will see this extension icon. If you click here, so here you can search for Salesforce extension pack. So at top, you will see it. So you can type complete as well. Otherwise it will be available on the top as you type Salesforce EXT. So just click on it. So in my system, it is already installed. So this extension pack includes these nine packages. So here you can see I am having this uninstalled button, but in your case, if you are doing it for the first time, you will see the install button. So just click on that and it will take some time and all those nine packages will be installed in your VS code. So this was a step number three. Now moving to step number four. So step number four says like how we can create a project with the help of Visual Studio code. So to create first project in Visual Studio code, so you need to open command palette or you can press control or command plus shift plus P. So if you are using Windows, so you need to press control plus shift plus P. If you are using Mac, so you just need to have a combination of command plus shift plus P. Then you need to type SFDX colon create project with manifest. Then you need to type the name of the project and then press enter. Then it will ask you to select the location where you want to save the project and your project will be created. So I'm just going to give you a brief demonstration of this. So just jump to Visual Studio code. So after installing this, so this is one time step. Now you just need to press control shift P or command shift P as per your system. So I'm using Mac, so I'm pressing command shift P. So you can see this palette is open and here in my system SFDX create project with manifest. This is highlighted here like in the second option. But if I type SFDX colon create project with manifest, so this option will be available. So I just need to click on it. So here you can see it is asking for the name. So I'm typing name as Sanjay Gupta at school and pressing enter. So my project will be created with this name. So one thing that I want to correct before typing this project name, we just need to select any one option from here. So I'm just selecting standard project template that is default and now you can type name of the project and here you can see press enter to confirm or escape to cancel. So I'm just pressing enter. So it is asking for the location. So I'm selecting desktop and clicking on create project. So here you can see project is created with name as Sanjay Gupta at school and here lots of folders are automatically available where you can do some things. So this was our step number four, how to create a project. Now next step is to connect your project with Salesforce org. So this project that we created right now we need to connect it with the Salesforce org. So again we need to open the command palette. So for that you can just use control shift plus P or command plus shift plus P. Then this time you need to type SFDX then authorize an org. Then you need to select the environment then you need to provide the org Elias name then browser will be opened and you need to provide a username and password and then if prompted you need to click on allow. So now let's do this together. So I'm pressing command shift P and SFDX colon authorize an org. So this option is available here. I'm just clicking. So here you can see as I showed you in the slide. So it will ask you to select the environment. So it is disappeared. So I'm just selecting it again. So here you can see default is this login.salesforce.com then it is having production, sandbox and custom. So as per the environment so if you are using production environment so you will be using login.salesforce.com if you are using sandbox so you will be using test.salesforce.com. So if you are working on a real project so then you can understand production and sandbox difference but if you are new so I can explain like whenever any client purchase licenses from Salesforce so they get production licenses but when they deal with a consultancy form so consultancy form basically creates sandbox copies of those production environment. So they will be creating DAF sandbox. They will be creating QS sandbox so that they can do some hands on they can implement things and after testing and very very fine. They can just deploy them from sandbox to production back right so it depends on the requirement like if you're using sandbox you will select test.salesforce.com if you are using production then you will be selecting login.salesforce.com. Right now in this complete video series I will be using developer edition org and maybe if you are doing practice so that is free org developer edition org so that free org is basically having production licenses. Those developer edition orgs have two users free licenses and that is for production so you just need to choose this production that is login.salesforce.com. Now if you click any of the option then it will be asking to provide alias name for your org which will be with which you will be connecting so I am labeling it as sgorg. Right as I click enter so it will automatically redirect to the browser and browser will be using the URL like login.salesforce.com because I selected production. If I would have selected sandbox so it will automatically redirect to test.salesforce.com right so I am just clicking enter and here you can see it is often opening automatically login.salesforce.com. So here you just need to type username and password of your org and that org will be connected with your visual studio code project that we created earlier. So here I am filling username and password and clicking on login. So here you can see it is asking for verification code. So you can just go to the email that is associated with the user and through that email you can just get your verification code. So I just pasted the verification code and I am clicking on verify. So first time when you will be connecting your org with the project so it will ask for allow access. So Salesforce CLI is asking to access the identity URL service manage user data via web browsers manage user data via APIs perform request at any time. So if you agree you can click on allow otherwise you can click on deny as well. So I am just clicking on allow. So I am logged in into my org. So now I am jumping to visual studio code and if you see the visual studio code earlier like this cloud was not available. Now it is available. So if this icon is available cloud icon is available in your visual studio code after creation of the project. It means your org is connected with this project. And at the bottom you can see your org alias name is available here. Right. And anytime if you want to your if you want to open your org so you can just click on this icon so your org will be open automatically. Right. So this step number five is completed I hope if you follow the complete steps so you will also be able to connect your org with visual studio code project. Now after this we need to go to step number six. So it says how to retrieve components. So if in your org some components are already implemented if you want to fax them in your visual studio code project so how we can do that. So you just need to open the package dot XML from manifest folder. So in your VS code we have this manifest folder. And here we have package dot XML and this package dot XML is having this code pre implemented. So what it is saying if you want to retrieve epics classes epics component epics pages and other things and as stress means all all the epics classes all the components. And if you want to enter any other code or if you want to remove any of the sections so you can do that as well. Right. Then, like you can modify package dot XML to add or remove components. Then finally right click on the package dot XML and you need to select SFDX retrieve the source from all. So I'm just right clicking. And here I have retrieved source in manifest from all. So if I click. So some operations performed. And like these components which are listed here they are available here. So if I go to force app. Right. So force hyphen app package. So here you will see those things. So in my org like this this component is available if I go to classes. So these classes are available. Right. So initially when you create your project so these will be blank. When you retrieve your components through this package dot XML in your project. So these things will reflect and here LWC components. So right now you don't have any LWC components. So those are not reflected here. Now we have step number seven which is the last step. So finally now we can create a lightning web component. So I will be creating a dummy lightning web component which will be blank. And I will let you know how you can deploy that lightning web component to the org so that you can use that. So here what you need to do you just need to right click on this LWC. So I'm just repeating the steps like we have these folders. So this force hyphen app slash main slash default if you expand this accordion this folder. So here you will find this LWC folder. And if you expand this so you will see all the lightning web component available under this. And if you want to create any lightning web component. So what you need to do just right click on this LWC and you will see this option create lightning web component. So here you need to provide the name of your lightning web component. So I'm labeling it as demo LWC. So it is asking where you want to store this. So this is the default option force hyphen app slash main slash default slash LWC. So I'm choosing this option. So here you can see under LWC folder demo LWC folder is created with this first lightning web component. And you can see demo LWC dot HTML is created demo LWC dot JavaScript is created and demo LWC dot JS hyphen. Meta dot XML is created. Right. And this I already explained in my previous video like you will be having HTML there. You need to write all the markup related code inside the template text. Then we have JavaScript which is by default importing this LWC module. So here you can see module name is LWC and lightning element is the functionality that we are importing. And this functionality is already extended. And here class name you can see it is demo LWC, which is also this demo LWC name is taken from your component name. And if you click here and press enter. So inside these databases, you can write the code related to your JavaScript. And here this is better dot XML, which is our configuration file. So by default it is having false. If you want to place your component anywhere in the org, so you just need to make it true. And after that, you need to specify the targets where your lightning web component will be available. So here now I'm typing the code like you need to use targets. And inside this targets, you can specify where you want to place your component. So here I am using target and I want to place this component on the lightning home page. So here you can see certifications are available. So I'm just selecting lightning home page. So this way, first you need to change is exposed from false to true. And then inside targets, you need to define the target where you can use your lightning web component. And then you just need to save this file because there is some changes in the file. In this JavaScript, also we did some things like I just moved this closing categories to the bottom. So I'm just saving this file and in HTML, there is no change. Right. So I'm not saving it. Now, if you want to deploy this component so that it will be available in your org. So what you need to do, you just need to right click on this complete component. So if you right click on this complete component, so complete component, including HTML JavaScript and this configuration file, everything will be deployed to the org. So you just need to click here, deploy source to org. So it will show this message running SFDX. So here you can see deploy source to org successfully run. And here you will see this message successful message. And whenever there will be some error, so it will show those errors as well and problems you will see here. So in output, you will see the success and failure result. And if your code is having any problems, so you will see that here. Right. So this way whole component is deployed to the org. Now, if you want to deploy a particular file, like if you change something in the HTML file on the. So what you can do just right click and deploy source to org. This file will be deployed on the. So this way you can deploy your Lightning Web component to the org. Now how you can verify whether your component is deployed or not. So we can just try to place that component on the home page. If it is available to place, then it means it is deployed successfully. So I'm in the org and here you can see we are on the home page. Now I'm going to edit this page and at left you can see we have standard components if I scroll to bottom. So here custom component is available and that is our first Lightning Web component. So it is available to place on home page. Right. If I drag and drop it, so it will be available here, but it is not having anything in the HTML. So nothing will be displayed. Right. So I am just deleting it. So I just gave you the proof like it is available here on the home base to place. Now if I go back and if I add any record page, let's say I open. A count record. And if I added this record page, so let's see whether that Lightning Web component will be available or not. So here you can see that component is not available. So this custom flow component is available, but that Lightning Web component is not available because in the components configuration file, we just mentioned like it will be available for Lightning home only. So if you want to place your component on more than one places, so you just need to add more targets. So this way you can have the target like if you want to place it on the record page. So you can modify this thing and what you need to do just save it. Then either redeploy this configuration file only or redeploy the complete component. So just click on deploy source to all. So it will be deployed. Then come here and you can just refresh. So we are still on record page. So if I refresh now you will be able to see that component. So demo LWC component is available to place on lightning report page as well. So this way I hope you understood how we can set up Visual Studio code for Lightning Web component. So if you follow all the steps. So you will be all set with the Visual Studio code and you will be having a project created that project is linked with your Salesforce org. And you know how to retrieve components from org to VS code and you know how to deploy components from VS code to the org. Right. And later in another videos you will see these things again and again so you will be able to understand the things in detail. So in upcoming videos I will be explaining things in detail so that you understand the concepts very well. Thank you.