Modify the Default Application
Update the index.html File
In the previous step you created a boilerplate application using the create-lwc-app
tool. In this step, you modify the default application and turn it into a conference management app.
You can use your favorite code editor to complete this project. We recommend using Visual Studio Code, but it is not a requirement. We assume VS Code for our future instructions.
- Open Visual Studio Code.
- Select File > Open in the menu.
- Select your
conference-app
folder and click Open. - In the VS Code file explorer, expand the
src
folder, then expand theclient
folder. -
Open the
index.html
file. -
Replace the existing content with the following HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Lightning Conference</title> <style> body { font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0; } </style> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/resources/favicon.ico" /> </head> <body> <div id="main"></div> </body> </html>
-
Save the
index.html
file.
In this new version, you changed the page title and the embedded CSS to support the requirements of our application. The div
with the id main
is the entry point where your application uses JavaScript in the index.js
file to append its first web component using createElement
to create the component.
import { createElement } from 'lwc'; import MyApp from 'my/app'; const app = createElement('my-app', { is: MyApp }); document.querySelector('#main').appendChild(app);
<my-app>
is a custom element that represents our first web component: my
is the namespace mapping to the my folder on the file system, and app
is the web component name. The app
web component is used as the container for the application.
Modify the app Web Component
Let’s modify the app
web component to display a header for our conference management application. This component coordinates any events and data within your application.
- In the VS Code file explorer, expand the
app
folder undersrc/client/modules/my
. This folder contains the three files that make up a Lightning web component: an html file (the template), a js file (the class definition), and a css file (the styles). -
Open the
app.html
file. -
Replace the existing content with the following markup:
<template> <header> <img src="resources/lwc.png" alt="App logo"> <h2>Lightning Conference</h2> </header> <main class="content"> <!-- Add components here --> </main> </template>
The<template>
tag is part of the custom element specification and includes the HTML markup for a web component. -
Save the
app.html
file.
Style the Web Component
- Lightning web components look best styled. Open the file
app.css
. -
Replace the existing content with the following styles:
.content { padding: 0 3rem; } header { padding: 1rem; display: flex; color: #ffffff; background: #0288d1; box-shadow: 0 4px 3px rgba(1, 87, 155, 0.5); align-items: center; } header img { height: 3rem; margin-right: 0.3rem; } header h2 { font-size: 1.75rem; font-weight: 300; }
-
Save the
app.css
file.
Go back to your browser window to see your changes. The application should look like this:
Great Work! You modified the default “app” web component and got it ready to host the conference app. In the next step, you create a data service that you use to retrieve the conference sessions.
We won't check any of your local development. Click Verify Step to go to the next step in the project.