Create the Application
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.
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
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.
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).
- Make sure you have the LTS version of Node.js installed on your system.
create-lwc-apprelies 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
gitinstalled. You can install it here.
create-lwc-appis 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:
npm run watchThe
watchprocess 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.
- In a browser window, navigate to http://localhost:3001 for Mac or http://0.0.0.0:3001 for Windows to access the default application.
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.