Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Building a Real-Time Project with LWC OSS and LWR
Rating: 4.8 out of 5(69 ratings)
574 students

Building a Real-Time Project with LWC OSS and LWR

Master the End-to-End Lead Generation Cycle for Car Company with LWC OSS and LWR
Last updated 7/2023
English

What you'll learn

  • What is LWC OSS and LWR
  • Build interactive and responsive user interfaces: Learn how to create dynamic and engaging user interfaces using LWC OSS, leveraging its powerful features
  • Will Learn to Build Components & Reusability
  • Setting up Layout Templates
  • Server Side Routing
  • Adding Lightning Design System to project
  • Components communications
  • Animation
  • Setting up Git & GitHub and pushing code to Github
  • Lead Form Creation
  • Sending Email for Customer
  • So much more..

Course content

1 section28 lectures4h 30m total length
  • Introduction1:06
  • 1. Project Demo3:47
  • 2. Fundamentals5:04
  • 3. Prerequisites5:07
  • 4. Project Setup6:08
  • 5. Folder Structure6:25
  • 6. Layout Templates9:37
  • $assetsDir Quick fix for windows0:17
  • 7. Routing12:25
  • 8. Adding Salesforce Lightning Design System16:44
  • 9. Navbar Creation13:14
  • 10. Home Page Design17:43
  • 11. Car Details Component24:43
  • 12. Range Selection Component24:57
  • 13. Color Selection Component23:24
  • 14. Price Footer Component14:20
  • 15. Components Communication13:33
  • 16. Fix Price Footer2:24
  • 17. Modal Component11:46
  • 18. Animate Footer Price5:28
  • 19. Code Push to GitHub4:33
  • 20. Code Deployment5:38
  • 21. Salesforce Developer Account2:32
  • 22. Lead Form Creation21:33
  • 23. Email for Customer5:10
  • 24. Final Deployment and Testing of Complete Journey4:55
  • 25. Thank You0:22
  • Follow only if you want $assetsDir Error Fix for Windows Machine7:40

    Please follow below steps for Windows

    1. Install Windows Subsystem For Linux (WSL) using the command wsl --install in power shell with admin access.

    2. Restart windows.

    3. Go to start menu and search for Ubuntu On Windows and open it. Please note that default distribution for WSL is Ubuntu, if you have a different one then open that.

    4. Run node -v if node is installed is good , if not follow the link attached in this video resource

    5. If node is available in WSL.  type following command to reach to your project folder
      cd /mnt/c/Users/username/projectfolder
      example - cd /mnt/c/Users/smith/hondalwcoss

    6. Run command Code . and it will open VS code with the project. When you open the teminal make sure it is pointing to wsl or ubuntu

    7. Now you can run yarn run dev.

Requirements

  • A PC with Windows or Linux or Mac with stable internet
  • Basic knowledge of the Salesforce platform and LWC
  • Basic knowledge of HTML, CSS and JS
  • Willingness to learn & Grow

Description

Are you ready to take your web development skills to the next level and dive into the world of real-time applications? In this comprehensive course, "Building a Real-Time Project with LWC OSS and LWR," you will learn how to develop a fully functional real-time project using Lightning Web Components Open Source (LWC OSS) and Lightning Web Runtime (LWR).

Throughout this course, we will guide you through each step of building a real-time project from scratch, covering all the essential concepts and techniques you need to know. We'll start by demonstrating the final project, giving you a clear vision of what you'll be building.

To ensure a strong foundation, we'll begin with the fundamentals, providing you with a solid understanding of LWC OSS and LWR. You'll learn about the project setup and folder structure, enabling you to organize your code effectively.

Next, we'll delve into the core building blocks of the project. You'll discover how to create layout templates to structure your application, implement routing for seamless navigation, and integrate the Salesforce Lightning Design System to enhance the visual appeal of your project.

With the fundamentals in place, we'll guide you through step-by-step implementation of various components. We'll start by creating a dynamic and interactive navbar, followed by designing the home page layout. You'll learn how to develop components such as Car Details, Range Selection, Color Selection, and Price Footer, allowing users to customize and explore various options.

Effective communication between components is crucial, and you'll master this skill by understanding and implementing components communication techniques.

As we progress, we'll address refinements and enhancements. You'll learn how to fix the Price Footer component, create a modal component for improved user experience, and add captivating animations to the footer.

To ensure efficient collaboration and version control, we'll explore how to push your code to GitHub, allowing seamless collaboration and tracking of changes.

Deployment is a critical aspect, and we'll guide you through the process of deploying your project and testing its functionality. You'll gain valuable insights into deploying to a Salesforce Developer Account and learn how to create a lead form and configure customer emails.

By the end of this course, you'll be equipped with the skills and knowledge to confidently develop real-time projects using LWC OSS and LWR. You'll have hands-on experience in building a fully functional real-time application and be ready to deploy it to production.

Enroll now and embark on a transformative journey to become a proficient real-time web developer with Lightning Web Components Open Source and Lightning Web Runtime.

Who this course is for:

  • Looking for a job change in Salesforce
  • Salesforce Professionals
  • Salesforce Developers who wants to build cool project using LWC OSS
  • Willing to Learn LWC OSS & LWR