trailhead

Learn the Process for Developing Lightning Components

Learning Objectives

After completing this unit, you’ll be able to:
  • Create a harness app for viewing and testing Lightning components under development.
  • Create a development app for hosting your components in Lightning Experience.

My Domain Is Already On in Your Trailhead Playground

Do not attempt to turn on My Domain, or change its settings, in your Trailhead Playground. By default, My Domain is already active in every Trailhead Playground.

My Domain name highlighted in a Trailhead Playground URL

In your production org, My Domain lets you create a subdomain unique to your organization. With My Domain, you replace the instance URL that Salesforce assigns you, such as https://na17.lightning.force.com, with your chosen subdomain, for example, https://mydomainname.lightning.force.com.

My Domain is required to create custom Lightning components and set up single sign-on (SSO) in an org. To learn more about My Domain, check out this knowledge article. To learn how to activate it in your production org, see the User Authentication module.

View Your Lightning Component

There’s no simple way to preview a Lightning component during development. You can’t click a button or go to a URL to see individual components. This difference can take some getting used to for Visualforce developers, because Visualforce makes it so easy to create a new page, and to reload it as you make changes.

The Lightning Component framework is quite different. We talk about how and why in the Lightning Component Core Concepts module. For now, let’s focus on how to quickly load and view your component during development.

We’re going to describe two ways that you can set up a “preview” environment for your components under development. These two methods have different purposes. The first, using a harness app, is easy to set up, and works well for learning the basics of Lightning components. It’s also useful long-term if you want to build components that live “outside” of Salesforce. (See the Resources for some details on what that means.)

The second, creating a development context inside Lightning Experience, is more involved to set up, and reloading your component is slower. But you can’t develop components that integrate with Lightning Experience while testing outside of Lightning Experience. Long-term, this is probably what you’ll use most frequently.

Create a “Harness” App

Ladder! Let’s start simple, with the lightest weight way to develop and preview a Lightning component—inside a “harness” app, a stand-alone “my.app” that contains only your component.A harness app wrappign a component under development

The harness app (1) is a stand-alone Lightning application that exists only to be a shell with a directly accessible URL. It contains only one thing, the top-level component you’re working on. In the illustration, that’s a My Expenses component (2) for creating a new expense. (You might recognize it from the Lightning Components Basics module, where we build it from scratch.)

Here’s how to create a harness app.

  1. Open the Developer Console, and select File | New | Lightning Application.
  2. In the New Lightning Bundle panel, enter harnessApp for the app name, and click Submit.
  3. Select the harnessApp.app tab, and click Preview.

We know we said you should use the Force.com IDE for development, and you should. Here we’re using the Developer Console for one thing only: that Preview button. Ladder! When you click it, a new (and for now, blank) window opens. This is the window where you can reload your component to see changes while developing it.

Wait a minute! Didn’t we just say that there’s no button you can click to see a component under development? What exactly is that Preview button?!?

The Preview button lets you see a Lightning application, not a component. The two are different because, well, reasons. You put components into an app, as you’ll do in the next section.

Create a Top-Level Component

Ladder! We use the terms “app” and “component” a lot in Salesforce. Let’s talk about how the terms apply to what you’re doing here. You just created a stand-alone Lightning application in the Developer Console, which we’ve called a harness app. That “application” is just a shell—it’s going to have very little code in it— just a reference to the component you’re about to create.

The component you’ll put in it is the real “app,” the top level thing you can add to Lightning Experience, or the Salesforce app, or wherever. All of the real code for your feature goes into this component or its child components. You can call it a widget, or a top-level component, or a lot of things. But it’s better to not call it an app, because “app” has some specific meanings in Lightning components and Lightning Experience.

Confused? Let’s do something concrete.

  1. Open the Force.com IDE, and make sure you’re in the Lightning Platform perspective.

    Click Window | Perspective | Open Perspective | Other…, and choose Force.com.

  2. If you haven’t already, connect to your development org.

    In the Project Explorer, right click and select New | Force.com Project. Then follow the wizard.

  3. Create a new component, myFirstComponent.

    Right click on your project, and select New | Lightning Bundle, and enter myFirstComponent for the name. Click Finish.

  4. In the Project Explorer, find your new component and open it.

    Notice that the file extension is “.cmp”.

  5. Enter the following markup.
    <aura:component implements="force:appHostable">
    
        <p>I solemnly swear I am proficient in JavaScript.</p>
    
    </aura:component>
  6. In the Project Explorer, find your harness app and open it.

    Notice that the file extension is “.app”, instead of “.cmp”.

  7. Add the component to the harness app, by entering the following markup.
    <aura:application>
    
        <c:myFirstComponent/>
    
    </aura:application>
  8. If you’re not working in online mode, deploy your local changes back to Salesforce.

    In the Project Explorer, right click on your harnessApp, and select Lightning Platform | Save to Server. Repeat for myFirstComponent.

  9. Reload the preview page you opened in the preceding section.
  10. Make a change to the component (“I solemnly swear I’m up to no good.”), save to the server, and reload the preview page.

This is your development process for working with Lightning components in stand-alone mode. Create a harness app for your preview window. Then build your feature or widget inside a component, which you add to the harness app. To see changes, reload the preview for the harness app. Much faster than reloading all of Lightning Experience for each change!

Here are a couple things to keep in mind.

This process isn’t as simple or automatic as with Visualforce. You have to create components yourself—there’s no “quick fix” link to create a stub version for you. And you need to manually reload the harness app—it won’t reload automatically.

Second, and more important, the stand-alone app (often called “my.app”) runs just the Lightning Component framework and your component. It reloads faster because it doesn’t load Lightning Experience. But if your component depends on Lightning Experience services, such as providing the current record ID or handling navigation events, then it won’t work outside of Lightning Experience. (We talk about why in the Lightning Component Core Concepts module.)

That’s a pretty big omission for most Lightning components developers. Most of the time, you’re building something that runs inside of, and integrates with, Lightning Experience (or the Salesforce app). So, let’s create a similar, if less lightweight test environment in Lightning Experience, which will let you access all of the services provided by that (very much larger) “harness” app.

Create a Lightning Experience Development App

Ladder! The following steps create an “In Development” Lightning app that you can use to access Lightning components (and other things like Lightning and Visualforce pages) from within Lightning Experience while they’re still under development.

Create the “In Development” App

This step creates a Lightning app to hold your components while they’re under development.

  1. From Setup, enter Apps in the Quick Find box, then select App Manager.

    You should see the Lightning Experience App Manager.

  2. Click New Lightning App, and then create a custom app for your components while they’re in development.Create a new Lightning App
  3. Click Next to accept the defaults for the App Options, Utility Bar, and Select Items steps.
  4. Consider restricting your app to only System Administrators, or a profile you’ve created for developers in your organization. Restrict app to specific profiles You don’t need your users to see your pages before they’re added to their permanent place in the user interface.
  5. Click Save & Finish to create the app.

Add the In Development App to the App Menu

This step adds your app to the navigation menu, so that it’s easy to get to.

  1. From Setup, enter App Menu in the Quick Find box, then select App Menu.

    You should see the App Menu page.

  2. Make sure your In Development app is set to Visible in App Launcher. Set app to visible in App Launcher While you’re at it, you might want to rearrange items, and even hide apps you don’t use.

Create a Lightning Component Tab

This step creates a new tab that displays a Lightning component, and adds it to the In Development app.

  1. From Setup, enter Tabs in the Quick Find box, then select Tabs.

    You should see the Custom Tabs page.

  2. Click New in the Lightning component tabs section, and then create a custom tab for the page currently in development. Create a custom Lightning component tab
  3. Make the tab visible only to your development user profile. Set custom tab visibility
  4. From Setup, enter Apps in the Quick Find box, then select App Manager.
  5. Select Edit from the menu at the right of your In Development app.
  6. In the Select Items panel, add the new tab to the app.Add tab to app

To add more tabs to your app, you only have to repeat this last process.

Now you can view your component in Lightning Experience by clicking the App Launcher and selecting your In Development app. Custom app in the App Launcher Once your app is available, the My First Component tab is the first item in the app’s tab bar. myFirstComponent tab in In Development app Whenever you make changes to your component, reload Lightning Experience using your browser’s Reload command.

Adding a component to a tab is one way you can integrate a Lightning component into Lightning Experience. It’s useful if your feature has a general context—that is, it’s not tied to a specific object type, like an account, or intended to be used with individual records.

You can create components that do do those things, but you’ll need to follow a different process to add them to the right place in Lightning Experience. For example, if your component needs to work with a specific account record, you could add it to the account page layout, or as a quick action on the account object.

If your component needs to be accessed elsewhere in Lightning Experience, see the Resources to find the appropriate steps to add it to the user interface, including code you’ll need to add to your component.

Principles to Keep In Mind

In the Lightning Component Core Concepts module, we cover details about the Lightning Component framework and map concepts from Visualforce to similar features in Lightning components. Before you head there, though, keep the following in mind.

Lightning Components Is Newer than Visualforce

Visualforce has been around for more than 10 years, while the Lightning Component framework is about two years old. That means we’re still developing it. Set your expectations appropriately, and look forward to the features we’re adding all the time.

Don’t Over-Spec a “Solution”

Chute! Start small when you develop your first few Lightning components. You might be an expert Visualforce developer, but if you run too far ahead of your Lightning components expertise, you’ll probably have to re-do some of your work.

Don’t Write Visualforce Code in Lightning Components Form

Chute! The design and architecture for good Lightning components code looks nothing like most good Visualforce code. You can force a Visualforce design into a Lightning component, but that’s smashing a square peg into a round hole. It’s harder, and you’ll eventually throw the work away. It’s better to put your effort into learning The Lightning Components Way.

Remember the Alamo

We mean this a little differently than a Texan might. Some battles are unwinnable, and you’re better off surrendering. If you find yourself beating your head against the Lightning components wall, it might be time to withdraw from the field, and re-marshall your forces.

Ladder! Dedicate a day to working through the Lightning Components Basics module. Learn the fundamentals of what is, after all, a very different framework from Visualforce. A strategic retreat with a plan to return when you’re better prepared is not a loss. It’s a path to victory.

Resources

Lightning bolt icon used to indicate that the content is for Lightning Experience

Remember, this module is meant for Lightning Experience. When you launch your hands-on org, switch to Lightning Experience to complete this challenge.

retargeting