Tune in to Trailblazers Innovate for Salesforce product news,
demos, and latest roadmaps. Register here.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Create the Application

Learning Objectives

In this project, you will:

  • Install the tools you need to work with Lightning Web Components Open Source.
  • Create a data service module with Lightning Web Components Open Source.
  • Create a sample conference management application with web components and the latest web standards.

Introduction

The recent and unprecedented level of innovation in web standards is incredibly exciting. Many features that required frameworks now come standard. You no longer need a proprietary component model, proprietary language extensions, proprietary modules, and so forth. The standardization of the core stack opens the door to a new breed of frameworks: frameworks whose major task is no longer to fill in the gaps in the core stack, but to provide a thin layer of specialized services on top of a standard stack that is now suitable for large scale app development. The benefits are substantial.

  • Common and interoperable component model
  • Common programming model
  • Transferable skills that make it easier to find and ramp up developers
  • Better performance because core features are implemented natively in web engines instead of in framework abstractions written in JavaScript

Lightning Web Components Open Source is an implementation of that new breed of lightweight frameworks built on web standards. It uses custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 6 and beyond.

In this project, you use Lightning Web Components Open Source to create a sample conference management application. This project is the first in a series of three projects that introduce you to Lightning Web Components.

What You Build

To create the conference management app, you build and assemble multiple web components: the app container, the list of conference sessions (the screenshot below), the details for a specific session, and more.

Let’s take a look at what you’ll be creating: https://conference-lwc-app.herokuapp.com.

A screenshot of the final Lightning Conference application

Now that you know what the Lightning Web Components framework is and what you’re building, it’s time to get started!

Create the Lightning Web Components Application

The fastest way to create an application with Lightning Web Components Open Source is to use the create-lwc-app CLI (command line interface).

IMPORTANT NOTES

  • Make sure you have the LTS version of Node.js installed on your system. create-lwc-app relies on the Node package runner (npx) introduced in npm 5.2. If you don’t have Node.js installed on your system, you can install it here.
  • Make sure you have git installed. You can install it here.
  • create-lwc-app is not a requirement to create a Lightning Web Components Open Source application. Lightning Web Components Open Source is available as an npm module, and you can create your own build process using Webpack or Rollup.

To create an application called conference-app, open a command line, and type:

npx create-lwc-app conference-app --yes -o express

If you use a Windows operating system, and if you want to use the non-Chromium based Edge browser, type this command instead:

npx create-lwc-app conference-app --yes -o edge,express

This command creates a default project structure and a simple app to get you started. As part of the process, the CLI installs the framework, tooling dependencies, and creates the application.

Once the application creation process completes, you should see the following message:

🎉  Created conference-app in /YOUR/FILE/STRUCTURE/conference-app. Checkout the `scripts` section of your `package.json` to get started.

Run the New Application

On the command line, type:

  1. cd conference-app
  2. npm run watch.
  3. Note

    Note

    The watch process automatically keeps track of your code changes, recompiles and refreshes the application in the browser. You don’t need to compile your changes manually and reload the application in the browser.

  4. In a browser window, navigate to http://localhost:3001 for Mac or http://localhost:3001 for Windows to access the default application.

An image of the locally hosted web page displaying a lightning bolt and text that reads: Edit src/modules/client/my/app/app.html and save for live reload.

Congratulations! You’ve created your first Lightning Web Component Open Source application. In the next step, you modify the default application.

We won't check any of your local development. Click Verify Step to go to the next step in the project.

Resources