Automate Marketing Initiatives with Salesforce Marketing Cloud Learn More

Build and Deploy a Website from Scratch with Salesforce LWC



Published On:

In today’s digital age, having a strong online presence is crucial for any business or individual. Building a website from scratch can seem like a daunting task, but with the right tools and knowledge, it can be a rewarding experience. Salesforce Lightning Web Components (LWC) provides a modern and efficient way to develop web applications. In this article, we will explore how to build and deploy a website from scratch using Salesforce LWC. Whether you are a developer looking to expand your skills or a business owner wanting to create an online presence, this article will guide you through the process step by step.


Salesforce’s Site Builder enables you to create highly customized and visually appealing websites. To make a website in Salesforce, follow these steps:


  1. Enter sites in the Quick Find box from Setup, then select sites.
  2. Register the Salesforce Sites domain for your company.
  3. Create and configure your website.

Using the Quick Find box, you can search for all sites after you have registered your site domain.


  1. Click on the New button visible on the site.
  2. Choose any website which is relevant to your website.
  3. Create site.

Salesforce offers some prebuilt sites and page structures in the Site Builder after you create a site. If they are appropriate for use, modify them as needed.


You can use Lwc to add more functionality to your website (Lightning web Components).


Why Lightning Web Components?

Browsers are built on web standards, which are constantly evolving and improving the content that browsers can display to users. Salesforce created Lightning Web Components to allow Salesforce platform developers to take advantage of those evolving standards.


By creating Lightning web Components, we will able to add functionalities and properties that make the use of components very easy. You can also use standard HTML, CSS, and JavaScript to create a component.


You can use your Component anywhere in the Salesforce as well as in the website.


Here are some of the benefits of LWC:


  1. Improved performance
  2. The majority of your code is standard JavaScript and HTML.
  3. Simple to use and deploy
  4. Reusability

Create Lightning Web Component

Let’s make a simple Component to demonstrate how to make a lightning web component. We will use Visual Studio Code to create a component.

  1. Go to Visual Studio Code.
  2. Install Salesforce Extension Pack in VS Code.
  3. After installed successfully, Press Ctrl +Shift + P, then search for Create Project, Select SFDX: Create Project, and Press Enter.
  4. Leave the default Selection Standard and Press Enter.
  5. Enter the Project Name and Press Enter.
  6. Choose the directory on your local machine where the project will be stored and then Click Create Project.

And then Salesforce CLI will create a project structure to make getting started even easier.

The structure looks like this:

The project we made has a unique folder called force-app/main/default. This folder, known as a package directory, contains all of your current Salesforce DX project’s metadata.

You are done with creating your first Salesforce Project for working with Lightning Web Components.

A place for big ideas.

Reimagine organizational performance while delivering a delightful experience through optimized operations.

Authorize Org

After creating the project, the next step is to authorize your organization. To authorize your org with Salesforce, follow the steps below:

  1. In Visual Studio Code, press Ctrl + Shift + P.
  2. Search for sfdx in command palette.
  3. Select SFDX: Authorize a Dev Hub.
  4. Enter the name for your org authorization and Press Enter.
  5. It will redirect you to Salesforce login page, login in your org using your Salesforce credentials.
  6. Click Allows when asked for Allow Access.

After authenticating your Dev Hub with Salesforce, it will appear on the Status bar of the Visual Studio Code.

Creating a lightning Web Component

To create a lightning web component, follow the below steps-


  1. Open Visual Studio Code. 
  2. Press Ctrl + Shift + P and search for lightning web component.
  3. Select SFDX: Create Lightning Web Component.
  4. It is simple to create a Lightning web component. And Salesforce CLI has already created a project structure to make getting started even easier.


The folder structure looks like this:

You have completed the creation of your first Lightning web component.


Let’s take a look at the files that are generated. Open the subfolders of the newly created folder myFirstWebComponent.


Replace the XML Markup – in the XML subfolder.

  1. In Visual Studio Code Click on the myFirstWebComponent.html subfolder.
  2. Code in html by using its tags or you can also use the lwc html tags for component creation.

Or replace your code with this example:

  1. You can also customize your Component by using CSS in it. Simply you have to create a file with same name as lightning component name and add the extension .css . The file will automatically added in the component folder.

    Now you can add css to your component to customize it.

    To add JavaScript functionalities in the Component you just have to code JavaScript in the .js file.

    Now we have to deploy our first Component to our LWC site.

    1. In visual Studio Code, Press Ctril + Shift + P and search for Deploy source to org.
    2. Select SFDX: Deploy this source to org and Press Enter.

    Your Component will begin to be deployed to the Salesforce org. When the component is successfully deployed, a success message is displayed on the terminal.

  1. After Deployed to the Salesforce Org it will display on the custom Component section in the components in the LWC Site Builder.

    1. Drag and drop the Component in the Column of the section the Site Builder.


  1. In this way, you can create your own Component like these and add customization and functionality in it through js.


Websites can be easily created and customized in less time using Salesforce LWC site Builder and lightning web components. To save time, you can also use the builder’s prebuilt components. This is how we created a website from Scratch with Salesforce Lightning Web Components. Check out our more Salesforce development services here


Top Stories

Microsoft Azure Cloud
5 Reasons to Use Microsoft Azure Cloud for Your Enterprise
Cloud computing is the stream of modern computer science technology in which we learn how to deliver different services through the Internet. These services include tools like servers, data storage, databases, networking, and software. Cloud computing is an optimized solution for people and enterprises looking for several benefits, such as
Cloud Computing Platform
What Makes Microsoft Azure a Better Cloud Computing Platform
Microsoft has leveraged its continuously expanding worldwide network of data centers to create Azure cloud, a platform for creating, deploying, and managing services and applications anywhere. Azure provides an ever-expanding array of tools and services designed to fulfill all your needs through one convenient, easy-to-manage Platform. Azure sums up the
Azure Cloud
Things You Should Know About Microsoft Azure Cloud Computing
Microsoft Azure is a cloud computing service provided by Microsoft. Azure has over 600 benefits, but overall, Azure is a web-based platform for building, testing, managing, and deploying applications and services. Azure offers three main functional areas. Virtual machines, cloud services, and application services. Microsoft Azure is a platform for
Microsoft Azure Cloud Computing
What Are the Options for Automation Using Microsoft Azure?
Automation is at the forefront of all enterprise IT solutions. If processes overlap, use technical resources to automate them. If your function takes a long time, find a way to automate it. If the task is of little value and no one needs to work on it, automate it. This
Apache Airflow
How to Create and Run DAGs in Apache Airflow
Apache Airflow is an open source distributed workflow management platform built for data orchestration. Maxime Beauchemin first started his Airflow project on his Airbnb. After the project's success, the Apache Software Foundation quickly adopted his Airflow project. Initially, he was hired as an incubator project in 2016 and later as
Apache Airflow Automation
How Easy is it to Get Started with Apache Airflow?
Apache Airflow is a workflow engine that efficiently plans and executes complex data pipelines. It ensures that each task in your data pipeline runs in the correct order and that each job gets the resources it needs. It provides a friendly UI to monitor and fix any issues. Airflow is


          Keep an eye on your inbox for the PDF, it's on its way!

          If you don't see it in your inbox, don't forget to give your junk folder a quick peek. Just in case. 

              You have successfully subscribed to the newsletter

              There was an error while trying to send your request. Please try again.

              Zehntech will use the information you provide on this form to be in touch with you and to provide updates and marketing.