Create a Lightning Application Part -1

A lightning component is a reusable unit of an app and it’s a combination of markup, JavaScript, and CSS.

It’s a component-based architecture means one component can be used anywhere.

We can not run a lightning component directly to see what we have created, hence we have to create a lightning application bundle. (Container app)

After creating the lightning application we can add lightning components and then we can see the context of the component.

To Create a Lightning application => developer console => new Lightning application

How To Create A Custom Domain In Salesforce?

We can create our custom login URL and application URL for our org with the company or any name which we can use to log in to our org.

To Create a Custom Domain:- go to setup => custom domain

Example to create an Apex Controller

public with sharing class contactContainer {
    @AuraEnabled
    public static list<Contact> findAll(){
       return [SELECT Id,Name,Phone FROM Contact LIMIT 50];
    }
    
    @AuraEnabled
    public static list<Contact> findByName(String searchKey){
        String name ='%'+searchKey+'%';
        return [SELECT Id,Name,Phone FROM Contact WHERE Name LIKE :name LIMIT 50];
    }
    @AuraEnabled
    public static Contact findById(String contactID){
       system.debug(contactID);
       return [SELECT Id, Name, Phone, title, MobilePhone, Account.Name FROM Contact WHERE id =:contactID LIMIT 1];
    }
}

Using Bootstrap In Aura

Example of Lightning Application(using the bootstrap static resource in Aura)

<aura:application >
    <link href ='/resource/bootstrap/' rel = "stylesheet"/>
	<div class = "navbarnavbar-default navbar-static-top" role = "navigation">
        <div class ="container">
	  <div class ="navbar-header">
	     <a href='#' class ='navbar-brand'>
                	lightning contacts
             </a>                                             				
           </div>
        </div>
        </div>

	<div class = "container">
	   <div class="row">
             <div class ="col-sm-12">
            	<c.searchBar></c.searchBar>
            </div>
        </div>
    </div>
                
    <div class = "container">
    	<div class="row">
            <div class ="col-sm-4">
            	<c.contactList></c.contactList>
            </div>
            <div class ="col-sm-8">
                <c.ContactDetails/>
            </div>
        </div>
    </div>

</aura:application>