Development tools & setup for Lightning Component development

It is time to get serious and head into my secret passion, the frontend development. And this, talking in terms of Salesforce, means Lightning Component development. So let’s start a new blog series starting from the very beginning.

So, log into your favourite dev org and go to the setup, because I am going to show you 3 easy actions you need to perform before start coding.

1.- My Domain.

Having our own domain is a must. This can be done in Setup > Company Settings > My Domain.

2.- Debug Mode On.

By performing this action JavaScript files will be shown unminified. This is essential for setting breakpoints or just being able to have a look at the JS code.

So go to Setup > Custom Code > Lightning Components > Debug Mode and enable the debug mode to the user or users who will be playing with code.

debugMode

3.- Cache Off.

A basic action for not getting mad saving everything twice and refreshing the browser several times.

You can perform this in Setup > Session Settings > Caching (section) > Enable secure and persistent browser caching to improve performance <– disable this checkbox

sessionSettings

 

Our org is ready, but we need to know what are the best tools for debugging and developing. So, let me give you some tips and recommendations.

 

The more comfortable you are, the faster you code, but…

  • You can use any IDE you like, but Salesforce recommendation is to use Visual Studio Code in combination with Salesforce DX. This recommendation is because of Salesforce DX, Visual Studio Code and Lightning are fully integrated.

 

Wrap your Lightning Components.

  • A really good trick is to use as a wrapper for your lightning components a Lightning resource called Standalone APP. This is because Standalone APPs are URL addressable and so, is the fasted way to check the modifications performed in the component you are working on. So, Instead of creating a Lightning Component, create a Lightning Application and access to it just by typing the name of your APP in the browser or by pressing the button shown in the gif below.

wrapper

 

Debug your components.

  • The best tool I have found for debugging is Chrome dev tools. If you do not like Chrome I think there are other likes firebug for firefox. In case you finally decide to use Chrome dev tools you can also install an extension for this browser called Lightning Inspector. This extension will show a new tab in Chrome dev tools what will grant you access to really handy info like the server response, fired events or the component tree.

lighningInspector

 

Thanks for reading!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.