We may earn an affiliate commission when you visit our partners.
Salesforce troop

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).

Read more

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.

Enroll now

What's inside

Learning objectives

  • 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..
  • Show more
  • Show less

Syllabus

Introduction
1. Project Demo
2. Fundamentals
3. Prerequisites
Read more
4. Project Setup
5. Folder Structure
6. Layout Templates
$assetsDir Quick fix for windows
7. Routing
8. Adding Salesforce Lightning Design System
9. Navbar Creation
10. Home Page Design
11. Car Details Component
12. Range Selection Component
13. Color Selection Component
14. Price Footer Component
15. Components Communication
16. Fix Price Footer
17. Modal Component
18. Animate Footer Price
19. Code Push to GitHub
20. Code Deployment
21. Salesforce Developer Account
22. Lead Form Creation
23. Email for Customer
24. Final Deployment and Testing of Complete Journey
25. Thank You

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.

Save this course

Save Building a Real-Time Project with LWC OSS and LWR to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Building a Real-Time Project with LWC OSS and LWR with these activities:
Review JavaScript Fundamentals
Strengthen your understanding of JavaScript fundamentals, as LWC OSS relies heavily on modern JavaScript concepts. This will make learning LWC easier.
Browse courses on JavaScript Fundamentals
Show steps
  • Review data types, variables, and operators.
  • Practice working with functions and objects.
  • Familiarize yourself with ES6+ features.
Practice with HTML and CSS
Refresh your HTML and CSS skills, as these are essential for creating the structure and styling of your LWC OSS components. This will help you build better UIs.
Show steps
  • Review HTML structure and semantic elements.
  • Practice CSS styling, selectors, and box model.
  • Experiment with responsive design techniques.
Read 'Lightning Web Components Quick Start Guide'
Read this book to get a head start on LWC concepts and syntax. This will help you understand the course material more easily.
Show steps
  • Read the chapters on component creation and data binding.
  • Experiment with the code examples provided in the book.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Follow LWC OSS Tutorials
Follow online tutorials to gain practical experience with LWC OSS and LWR. This will reinforce the concepts learned in the course.
Show steps
  • Find tutorials on creating basic LWC OSS components.
  • Implement the examples provided in the tutorials.
  • Experiment with different component configurations.
Build a Simple To-Do App with LWC OSS
Start a small project to apply your knowledge of LWC OSS and LWR. This will help you solidify your understanding of the concepts.
Show steps
  • Set up a new LWC OSS project.
  • Create components for adding, deleting, and displaying to-do items.
  • Implement data binding and event handling.
  • Style the app using SLDS.
Contribute to an Open Source LWC Project
Contribute to an open-source LWC project to gain experience working with a real-world codebase. This will expose you to best practices and collaborative development workflows.
Show steps
  • Find an open-source LWC project on GitHub.
  • Identify a bug or feature to work on.
  • Submit a pull request with your changes.
Write a Blog Post on LWC OSS Best Practices
Write a blog post summarizing best practices for LWC OSS development. This will help you consolidate your knowledge and share it with others.
Show steps
  • Research LWC OSS best practices.
  • Organize your findings into a blog post outline.
  • Write the blog post and publish it online.

Career center

Learners who complete Building a Real-Time Project with LWC OSS and LWR will develop knowledge and skills that may be useful to these careers:
Customer Relationship Management Developer
A Customer Relationship Management Developer (CRM Developer) customizes and extends CRM platforms like Salesforce. This course is a good fit, as it directly addresses the skills needed for this role, particularly with its focus on Lightning Web Components Open Source and Lightning Web Runtime. The course provides practical experience in integrating the Salesforce Lightning Design System, creating lead forms, and configuring customer emails, all of which are common tasks for a CRM Developer. The course's hands-on approach to building real-time applications and deploying them to Salesforce environments equips you with the skills to excel in this role. By learning this course, you can improve your skillset as a CRM Developer.
Frontend Developer
A Frontend Developer builds the user interface and user experience of websites and web applications. This role is a natural fit for those who complete this course, as it emphasizes building real-time projects using Lightning Web Components Open Source and Lightning Web Runtime. This course's focus on creating layout templates, implementing routing, integrating the Salesforce Lightning Design System, and developing interactive components directly translates to the daily tasks of a Frontend Developer. By mastering component communication and animations, as taught in this course, you will be well-prepared to create engaging and dynamic user experiences. The course also may be helpful, as it covers deployment, which is a critical aspect of seeing frontend work come to fruition.
Web Application Developer
A Web Application Developer designs, develops, and maintains web applications. This course helps build a strong foundation for this role with its focus on Lightning Web Components Open Source and Lightning Web Runtime. The course guides you through building a complete real-time project from scratch, covering essential concepts and techniques. Specifically, learning to create layout templates, implement routing, and integrate the Salesforce Lightning Design System directly applies to building robust and user-friendly web applications. The emphasis on component communication, creating dynamic interactive components, modal components and deployment, as taught, will prove invaluable for any aspiring Web Application Developer.
UI/UX Developer
A UI/UX Developer focuses on the user interface (UI) and user experience (UX) aspects of web applications. This course helps build essential skills for a UI/UX Developer, emphasizing Lightning Web Components Open Source and Lightning Web Runtime. The course provides hands-on experience in creating dynamic and interactive user interfaces, which is a core responsibility of a UI/UX Developer. This individual may be helped as they learn how to create layout templates, implement routing, integrate the Salesforce Lightning Design System, develop interactive components, and add animations. This aligns with the UI/UX Developer's goal of creating engaging and user-friendly web applications. The course’s perspective on folder structure may also be useful for this role.
User Interface Engineer
A User Interface Engineer specializes in creating and implementing user interfaces for web applications. This course may be useful, as it helps build the skills needed to excel in this field, particularly with its focus on Lightning Web Components Open Source and Lightning Web Runtime. The course provides hands-on experience in building dynamic and interactive user interfaces, which is a core responsibility of a User Interface Engineer. The course's coverage of layout templates, routing, integrating the Salesforce Lightning Design System, component creation, and animations directly applies to the daily tasks of crafting engaging and effective user interfaces. The course's explanation of version control with Github may prove very useful.
Salesforce Developer
A Salesforce Developer customizes and develops solutions on the Salesforce platform. This course may be useful, as it helps build a foundation in Lightning Web Components Open Source and Lightning Web Runtime, which are key technologies within the Salesforce ecosystem. The course's material on integrating the Salesforce Lightning Design System, creating lead forms, and configuring customer emails is directly relevant to Salesforce development. Furthermore, the course's explanation of version control with Github can be helpful, due to Salesforce projects often involving collaborative development and deployment processes. Many Salesforce projects need the kind of real-time interactivity that this course focuses on.
Full-Stack Developer
A Full Stack Developer works on both the frontend and backend of web applications. While this course focuses primarily on the frontend, the skills gained are essential for any Full Stack Developer. This course helps one develop a strong understanding of Lightning Web Components Open Source and Lightning Web Runtime, allowing for the creation of interactive and responsive user interfaces. The course's material on project setup, folder structure, layout templates, routing, component communication, and deployment are directly applicable to building the frontend of web applications. While a Full Stack Developer also needs backend skills, this course provides a solid foundation for frontend mastery, and may be useful to prepare you to work on the full stack.
Technical Consultant
A Technical Consultant advises clients on technology solutions to improve their business. This course may be useful, as it provides a strong base in Lightning Web Components Open Source and Lightning Web Runtime, which are relevant in many modern web development projects. A Technical Consultant may be able to advise clients on the feasibility and benefits of using these technologies to build real-time applications. Knowledge of layout templates, routing, component communication, and deployment processes enhances their ability to provide informed recommendations. Learning the hands-on experience gained through deployment may also prove practical for a Consultant.
Cloud Application Developer
A Cloud Application Developer builds and deploys applications in cloud environments. This course helps build a practical understanding of cloud deployment through its focus on Lightning Web Runtime and Lightning Web Components Open Source. The course emphasizes the deployment of a real-time project, giving Cloud Application Developers useful experience in deploying to a Salesforce Developer Account. This can be useful when creating lead forms and configuring customer emails in a cloud context. The course's insight into setting up Git and Github for cloud development may also prove practical. This course may be useful in providing familiarity and confidence in cloud-based app development.
Web Designer
A Web Designer creates the visual design and layout of websites. This course may be useful, as it provides a foundation for understanding the technical aspects of implementing a design, particularly using Lightning Web Components Open Source and Lightning Web Runtime. While a Web Designer may not directly code the entire application, understanding how layout templates, routing, the Salesforce Lightning Design System, and animations are implemented will allow them to make more pragmatic design choices. Web Designers will benefit from exploring component creations too. The course's coverage of these elements will enable a Web Designer to collaborate more effectively with developers and create designs that are both visually appealing and technically feasible.
Software Engineer
A Software Engineer designs, develops, and tests software applications. This course may be useful to Software Engineers, as it builds practical skills in building real-time web applications using modern technologies. Software Engineers build a foundation in Lightning Web Components Open Source and Lightning Web Runtime; the knowledge gained on project setup, layout templates, routing, component communication, and deployment processes are valuable for any software engineer. The practical, hands-on approach of the course, culminating in the deployment of a functional application, aligns well with the core responsibilities of a Software Engineer.
Application Architect
An Application Architect designs the overall structure of software applications. While this course focuses on a specific aspect of web development, it can provide valuable insights for an Application Architect. This is because understanding the capabilities and constraints of technologies like Lightning Web Components Open Source and Lightning Web Runtime is useful insight to an architect. The course helps them build an understanding of how components communicate, how routing is implemented, and how applications are deployed using cloud services, will inform their architectural decisions. The course’s perspective on folder structure may also be useful for architects. The course will provide a practical perspective that complements their high-level design expertise and may be useful.
Solutions Architect
A Solutions Architect designs and implements comprehensive solutions to meet business needs. This course may be useful, as it offers insights into the practical aspects of building real-time web applications with Lightning Web Components Open Source and Lightning Web Runtime. The course provides a hands-on understanding of layout templates, routing, and integration with the Salesforce Lightning Design System, which can inform architectural decisions. Knowledge of component communication, deployment strategies, and the use of Git and GitHub can assist a Solutions Architect in designing scalable and maintainable solutions. All of this knowledge may be useful to a solutions architect.
Technical Lead
A Technical Lead manages and guides a team of developers, making technical decisions and ensuring project success. This course may be useful, as it helps broaden their understanding of modern web development technologies and practices. A Technical Lead can help lead a team effectively, especially when it involves Lightning Web Components Open Source and Lightning Web Runtime. The course's perspective on project setup, folder structure, routing, component communication, deployment processes, and the use of Git and GitHub will enable them to make more informed technical decisions and mentor their team members. The knowledge gained will enhance their ability to oversee the development of real-time web applications.
Enterprise Architect
An Enterprise Architect aligns IT strategy with business goals, designing the overall IT infrastructure and application landscape. This course may be useful, as it provides a practical understanding of modern web development technologies and practices, and it provides insight into Lightning Web Components Open Source and Lightning Web Runtime. While an Enterprise Architect may not directly code applications, understanding how these technologies are used to build real-time applications informs their strategic decisions about technology adoption and integration. Insight into cloud deployment strategies may be particularly useful for this role. Grasping the implications of routing, component communication, and the Salesforce Lightning Design System may also assist an Enterprise Architect.

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Building a Real-Time Project with LWC OSS and LWR.
Provides a practical introduction to Lightning Web Components. It covers the fundamentals of LWC development, including component creation, data binding, and event handling. It's a useful resource for getting up to speed with LWC concepts before diving into the course. This book is more valuable as additional reading than it is as a current reference.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser