Salesforce LWC/LWR Portfolio Site Tutorial Part 1: Setup

in this video series I will show you how to make this simple portfolio website using lightning web components and running on the lightning web runtime inexperience cloud we will be using the build your own lightning web runtime template to build this single page responsive website as you can see here as we collapse the size of the website we collapse down to a hamburger menu with the options to jump to the different sections of the site the theme of this series will be to use HTML CSS and JavaScript to create infinitely customizable components within your website since we do not want the website to look like the rest of Salesforce we will not be using the lightning design system with that said let's get started with the setup of the website here we are in Visual Studio code and the first step with anything Salesforce development related is to create an sfdx project so we'll go to our Command palette here and select create project should give us the template selection foreign there we are we'll just pick standard and we're going to call this a portfolio site and I'll stick this in a folder on the root of C create a project okay so now we have a blank sfdx project since during this project we're going to be using uh scratch orgs we're going to need to config configure our scratch orgs so that when we create one it already has the settings for digital experience sites set up so I already have the settings in place so I don't like to memorize all of these things so I'm just going to paste them in here so you have to add communities insights to the features and then we're going to add a couple of settings related to communities and deploying experience bundles let's add these two right here let's get rid of that nonsense we don't have a scratch work set up yet so that's going to be angry mix that in a minute get that tabbing fixed okay so this will allow us to already have communities enabled in our scratch orgs and it'll allow us to deploy and retrieve the experience site bundles so once you get this set up once you can kind of just copy and paste this into future projects no need to remember all of these settings we're going to save that and let's create a scratch org now remember in order to create scratch always you're going to need to have a Dev Hub setup I already have a couple Dev hubs set up and authorized in the CLI so if you if you don't have that set up you're going to want to go get that taken care of right now so you're gonna need something like that okay let's close that let's go created a false scratch org and we'll just call before the site that's nice to call it the same thing as the project okay so now we have a scratch org and you can see that portfolio site is our default org now so anything we run in the um terminal window let me sfdx command will go to that site so let's let's open that guy up right now so we'll say Salesforce org open you can also do this for the command palette but I like to use these commands they've really shortened up the CLI commands so I use them a lot more often now and here we are with the browser window pointed to the setup of our scratch org now we can go to the quick find and say all Sites if we hadn't modified our scratch ORD config file we wouldn't have this available to us automatically so let's go click on all Sites and new okay in this case we're going to use the latest and greatest we're going to go with the build your own lwr site and we'll call this portfolio I like to give it a URL just in case we end up deploying this to an org that has other sites oh helps if I spell the name right obviously I've done this before so add portfolio to the URL and create okay here we are in workspace so let's go to Builder and we'll see the default layout I like to delete this HTML editor straight away so I'll go to page structure delete the HTML editor yes and just to make it our own improve that this is our site let's add a text block to the body and some text here Center it and let's make it big heading one okay great so now we have a site we've modified it just a little bit let's go back to visual studio code and let's go to the terminal window and we're going to run the Salesforce CLI command SF project retrieve preview now what this will do is give us a list of the files that the project retrieve command would pull down if we ran it you can see here there are a bunch of digital experience files that represent the site we just created so portfolio and they put the number one on the end of the name and then a bunch of boilerplate pages and classes in here but this is these are the files that represent the site we just created via the UI in Salesforce setup so if we go back and instead of preview we say SF project retrieve start we will actually pull those files down from our scratch org into Visual Studio code and there we are so all the files are now in our Force app let's make this a little bigger got my text cranked up so you guys can actually see my screen okay so if you look in let's see where is it sites you can see we have portfolio site we have a sample the sample or the default assets for the website like images and things like that you can see in here there's a CSS file and some images so lots of things in here that well just things that we need to deploy our site to a different org so at this point what I like to do is make sure that I'm no longer dependent on the original uh scratch org that we created so I'm going to try to deploy this to a new scratch work so let's go back and we'll create another scratch org in the same file we're going to call this um deployment Target or just deploy Target okay now we have our second scratch org and you can see deploy Target is Now the default so any commands we run in the CLI at the terminal window it will apply to the new scratch org so if I now do the reverse of the retrieve command is deploy so if I say SF it's kind of funky huh let's clear that out okay so I say SF project deploy start retrieve also works here so I can show that as well retrieve it'll show the files that it would push to the default org oh uh that's not what I wanted to do project deploy preview using the wrong words here so the preview command will show us the files that it would deploy to order to follow org and you can see that it's all the same files that we just pulled down from our first org so let's just go ahead and say I'll just hit the up Arrow and instead of preview I'll say start and this will deploy all the files to the new the second scratch that we created okay we have a failure there but this is an expected failure so it looks like the app switcher won't deploy so I found the easiest way to get around this is to really just delete that file from your local project and add it to your Force ignore file which means when you pull the site down and when you push it up it'll completely ignore that in both directions so what we can do is go to let's see chat menus app switcher this is the guy it's choking on so we're going to go ahead and just delete that we don't need to delete it from the project in the org because it's not in the org we're trying to deploy to that's the whole error so we'll delete the file itself and then we'll go down to this file minimize that let's go down to this file called Force ignore so this is let me reclaim some screen space here this is the file that determines what will be ignored when you push and pull or sorry retrieve and deploy to and from a scratch org you can see that package XML is in here by default so we're going to go ahead and add the app switcher.app menu and that's it so now if we go back to our terminal window and try the let's do that again on me go ahead and clear that out just so it doesn't look so funky we're going to run the project deploy start command again and deploy all the files to our new scratch org okay now you can see that the deployment succeeded so let's go check the results of our work here we'll say SF org open I'll open up our deploy Target scratch org we still have a browser window to the previous scratch org so we can do a comparison here now from setup of go to all sites again come on all Sites we can see that we have a portfolio site here and this is the data inspiration 5030 URL if we go back to our original uh org that's efficiency data 4030. so we were able to pull that entire site down and push the entire site back up or retrieve and then deploy to two separate sites now that's important because now we don't have to worry about the existence of the org or the lifetime of the org to save our site we have everything we need securely on our computers in order to replicate this site anywhere we want so that's great if you go to Builder we can prove that it's our site because it should have our text on the home page sure enough data inspiration this is our site and efficiency data this other site so same site both ways awesome so let's just close all those browsers and at this point it's probably a good idea to put this project in GitHub so that you have it stored safely somewhere and you have a starting point so if you're going to modify the files and you do something you don't like or you screw something up you can go back to this clean version where you've just started the site so let's go ahead and go to the source control tab in Visual Studio code and let's say publish to get a and I'm going to put this into a public repository so you guys can all see it and let's go open it on GitHub so I can show you guys that all worked and there we are so we're all set up for the next stage in the next video we will create our first lightning web component which will be this responsive hero section at the top of our page

Channel: Mitch Routt

Views: 7,807

Keywords: CSS, Communities, Experience Cloud, HTML, JavaScript, LWC, LWR, Premiere_Elements_2023, SFDX, Salesforce

Id: ig2Aa1QIUh0

Length: 15min 25sec (925 seconds)

Published: Sun Jun 18 2023