Setting up a Salesforce developer organization to enable the building of Lightning Components

Before we start building Lightning Components, there are some things that need to be done to your developer organization.

Note

If you have not signed up for a Developer organization yet, you can get one for free at https://developer.Salesforce.com/signup

1. Enabling My domain is a necessary step, and if you have not enabled it, then it's not possible to test your Lightning Component. To enable My domain, the navigation path isSetup | Company Settings | My Domain. Register for a domain name, walk through the wizard, and make sure you deploy the new domain to all users. The following screenshot shows the navigation path and also the end result once My Domainis enabled:

The above screen is for deploying My Domain to users

2. Disabling caching for development purposes is very important. Lightning Experience performs caching to improve performance, and this may interfere with the testing of Lightning Components because your code changes might not immediately reflect upon page reload.
3. The navigation path to disable caching is Setup| Security | Session Settings. The following screenshot shows the checkbox that needs to be unchecked:

This is how you can disable persistent cache in salesforce environment for Lightning Component development Purpose

Note

For production, these settings need to be enabled to improve performance.

Creating a simple hello world Lightning Component

The aim of the section is to demonstrate how to build a simple Lightning Component via the Salesforce Developer Console. We will also explore how to create a simple application to test our component.

The simplest way to create a Lightning Component is to use the Salesforce Developer Console. In later chapters, we will get familiar with source-driven development and the use of an Integrated Development Editor (IDE). For now, let's use the Salesforce Developer Console:

1. Open the Salesforce Developer Console:

2. Use the File menu to create a new Lightning Component:

3. Name the component. Let's name it HelloWorld for now.
4. Enter the following code in the component markup and save it (command + S):

<aura:component > 
    HelloWorld
</aura:component>

5. Let's test this on the browser. To test this, we will need to create a Lightning Application. Go to the File menu, as we did in step 2, to create a Lightning Application. Let's name the application HelloWorldApp, enter the following code, and save it (command + S). Notice we have used the HelloWorld component in the aura:application tag to reference the component.

<aura:application >
<c:HelloWorld/>
</aura:application>

6. Click on Preview in the application and make sure the browser renders HelloWorld. The following screenshot shows the preview and the application:

7. You will see that there was a unique URL generated as Salesforce_domain/c/HelloWorldApp.app. Notice that c is the default namespace. For a managed package application, your organization may have a namespace and then the namespace is used in the URL generated instead of c. Also, note that Salesforce_domain is the domain name of your Salesforce instance. The following screenshot shows how the component markup is rendered on the browser: