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.

  1. Open Visual Studio Code.
  2. Select File > Open in the menu.
  3. Select your conference-app folder and click Open.

    4. A view of the Conference App in Visual Studio Code

  4. In the VS Code file explorer, expand the src folder, then expand the client folder.
  5. Open the index.html file.
  6. 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>
  7. 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.

  1. In the VS Code file explorer, expand the app folder under src/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).
  2. Open the app.html file.
  3. 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.
  4. Save the app.html file.

Style the Web Component

  1. Lightning web components look best styled. Open the file app.css.
  2. 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;
}
  3. Save the app.css file.

Go back to your browser window to see your changes. The application should look like this:

The view of the Lightning Conference app running locally.

Note

Note

If you are having trouble seeing your changes, you may have terminated the watch process on the command line. In that case, go back to the command line, make sure you are in the right folder (conference-app), and type: npm run watch. Open a browser window and navigate to http://localhost:3001 for Mac or http://0.0.0.0:3001 for Windows to access your application.

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.