Convert Components for the Salesforce Platform

In this step, you convert the Lightning web components you wrote for your Node.js app into components for the Salesforce Platform.

Note

Unless specified otherwise, all operations in this step apply to folders under the /force-app/main/default/lwc directory within the created Salesforce DX project.

Copy Component Files

1. Copy the app, sessionDetails, sessionList, and speakerCard component folders from the previous project’s /src/client/modules/my directory.
2. Paste these four folders in your Salesforce DX project /force-app/main/default/lwc directory.
3. Delete the force-app/main/default/lwc/app/__tests__ folder as we won’t test components in this project.

Add Component Metadata

The Salesforce Platform requires some extra data known as metadata in order to display components in Lightning Experience. 

1. Open Visual Studio Code.
2. Press File > Open.
3. Select your lightning-conference folder and click Open.
4. Navigate in the file explorer to the directory force-app/main/default/lwc.
5. Create an app.js-meta.xml file in the app directory.
6. Paste this content in the file:

7. <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <apiVersion>49.0</apiVersion>
     <isExposed>true</isExposed>
     <masterLabel>Conference App</masterLabel>
     <targets>
       <target>lightning__AppPage</target>
     </targets>
   </LightningComponentBundle>

   The isExposed flag set to true exposes this component to be used in Lightning App Builder, while the masterLabel attribute lets you specify a user friendly name for it. The lightning__AppPage target allows you to place this component in Lightning application pages like the one that you created before.

8. Save the app.js-meta.xml file.
9. Create a sessionDetails.js-meta.xml file in the sessionDetails directory.
10. Paste this content in the file:

11. <?xml version="1.0" encoding="UTF-8" ?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
      <apiVersion>49.0</apiVersion>
      <isExposed>false</isExposed>
    </LightningComponentBundle>

12. Save the sessionDetails.js-meta.xml file.
13. Copy sessionDetails.js-meta.xml in the sessionList directory and rename it to sessionList.js-meta.xml.
14. Copy sessionDetails.js-meta.xml in the speakerCard  directory and rename it to speakerCard.js-meta.xml.

At this point, all components directories should contain a .js-meta.xml file like so:

Update Component Namespace

In the previous project, components are placed in a my folder which acts as a namespace. On the Salesforce Platform you use a default namespace - c. In practice, this simply means that you need to replace the my- prefix of your components’ tags by a c- prefix within your components markup.

1. In VS Code, click the Search icon
2. Enter my- in the search field.
3. Press Enter, you should see “6 results in 2 files” (app.html and sessionDetails.html).
4. Enter c- in the replace field.
5. Click the Replace all icon and confirm the replacement.

Use Mock Data to Test the Conversion

In order to quickly test the conversion of your components, let’s replace the data retrieval with mock data. You fetch Salesforce data in the next step.

1. Open sessionList.js
2. Remove import { getSessions } from 'data/sessionService';
3. Replace the three lines of code in the connectedCallback function with the following code.

4. this.sessions = this.allSessions = [
     {
       id: '1',
       name: 'Mock session',
       dateTime: '2099-01-01 00:00:00',
       room: 'Mock room',
       description: "Mock description",
       speakers: [
         {
           id: '1',
           name: 'Mock speaker 1',
           bio: 'Bio for mock speaker 1',
           email: 'mock1@trailhead.com',
           pictureUrl:'https://developer.salesforce.com/files/js-dev/speaker-images/john_doe.jpg'
         },
         {
           id: '2',
           name: 'Mock speaker 2',
           bio: 'Bio for mock speaker 2',
           email: 'mock2@trailhead.com',
           pictureUrl:'https://developer.salesforce.com/files/js-dev/speaker-images/laetitia_arevik.jpg'
         }
       ]
     }
   ];

5. Save sessionList.js
6. Open sessionDetails.js
7. Remove import { getSession } from 'data/sessionService';
8. Replace this.session = getSession(id); with the following code.

9. this.session = {
     id: '1',
     name: 'Mock session',
     dateTime: '2099-01-01 00:00:00',
     room: 'Mock room',
     description: "Mock description",
     speakers: [
       {
         id: '1',
         name: 'Mock speaker 1',
         bio: 'Bio for mock speaker 1',
         email: 'mock1@trailhead.com',
         pictureUrl: 'https://developer.salesforce.com/files/js-dev/speaker-images/john_doe.jpg'
       },
       {
         id: '2',
         name: 'Mock speaker 2',
         bio: 'Bio for mock speaker 2',
         email: 'mock2@trailhead.com',
         pictureUrl: 'https://developer.salesforce.com/files/js-dev/speaker-images/laetitia_arevik.jpg'
       }
     ]
   };

10. Save sessionDetails.js

Add the App Component to the Lightning Page

At this point, your components are ready to be deployed to the Salesforce Platform, and you can add them to the Lightning Page you set up earlier.

1. In VS Code, right-click the force-app folder and click SFDX: Deploy Source to Org.

2. You should see the following text in the output tab of VS Code.

   

3. Open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
4. Type SFDX
5. Select SFDX: Open Default Org. This opens your Salesforce org in a browser.
6. Navigate to the Agenda tab of the Conference application.
7. Click the Setup icon  and select Edit Page.
8. In the left navigation list scroll down to the Custom section, find your Conference App component and drag it on the component placeholder that reads: Add Component(s) Here.
9. Click Save.
10. Click Back to return to the App.

Click the session entry and make sure that you can navigate to the single session that is listed.

We don’t need the header in our Lightning app, so let’s adjust the application style and structure.

Disable Lightning Component Caching

Lightning Experience uses secure data caching in the browser to improve page performance by avoiding additional round trips to the server. While this is helpful and recommended in production environments, disable caching during development to see the effect of any code changes without needing to empty the cache or wait for the cache to expire.

1. From Setup, enter session in the Quick Find box, then click Session Settings.
2. Deselect the “Enable secure and persistent browser caching to improve performance” checkbox.
3. Click Save.

Note

Disabling secure and persistent browser caching has a significant negative performance impact on Lightning Experience. Always enable the setting in production orgs.

Adjust Component’s Style and Structure

1. Open app.html
2. Remove the header tag with its content.
3. Replace the opening <main class="content"> tag with this code.

4. <lightning-card>
     <div class="slds-var-p-horizontal_small">

5. Replace the closing </main> tag with:

6.   </div>
   </lightning-card>

7. Save app.html
8. Right-click on the app.css file in the Explorer, select SFDX: Delete from Project and Org and click Delete Sources.
9. Edit sessionList.css, delete the :host rule and save the file.
10. Edit sessionDetails.css, delete the :host rule and save the file.
11. Redeploy your components by right-clicking the force-app folder and clicking SFDX: Deploy Source to Org.

Well-done, your app looks better now (you might need to refresh the page a couple of times to clear the cache).

In the next step, you replace the mock data with real Salesforce data.