En tant que développeur Salesforce, vous avez sûrement été confronté à la lourdeur du processus de prévisualisation de vos Lightning Web Components (LWC) et ce même pour une modification mineure. En effet, nous sommes souvent confrontés à la contrainte de devoir déployer le composant dans l’organisation de dev afin de pouvoir le prévisualiser dans les applications Lightning Experience, Salesforce Mobile et les sites LWR. Ce processus, qui implique l’enregistrement du code, le déploiement des fichiers et l’actualisation de la page, peut s’avérer particulièrement chronophage.

Lorsqu’il s’agit d’un composant complexe nécessitant des prévisualisations plus fréquentes, cette tâche devient fastidieuse et chronophage dans le développement Salesforce.

Dans cet article, je vous présenterai Local Dev Salesforce, une méthode révolutionnaire permettant de gagner un temps précieux et d’optimiser votre productivité. Vous découvrirez comment visualiser vos composants LWC directement dans les applications Lightning Experience, Salesforce Mobile et les sites LWR, simplement en enregistrant vos modifications dans le code source et sans avoir à les déployer ni à rafraîchir la page.

Principe de fonctionnement de Local Dev Salesforce

Comme mentionné précédemment, Local Dev Salesforce permet de disposer d’un aperçu en temps réel du composant Lightning. Cet aperçu se met automatiquement à jour à chaque enregistrement du code source, ce qui permet d’itérer plus rapidement sur les composants LWC sans avoir à les déployer ni à devoir actualiser manuellement la prévisualisation dans le navigateur.

Local Dev peut être activé dans les scratch orgs ce qui est un atout majeur pour le développement Salesforce. Cette fonctionnalité révolutionne l’approche traditionnelle du développement en offrant une expérience fluide et interactive.

Il permet d’exécuter un aperçu des types de projets Salesforce suivants:

• Lightning Experience apps (desktop and Salesforce mobile app)
• LWR Sites for Experience Cloud

Cette approche moderne du développement Salesforce transforme radicalement la façon dont les développeurs conçoivent et testent leurs solutions.

Activation de Local Dev Salesforce pour vos Lightning Web Components

Pour commencer avec Local Development Salesforce, assurez-vous d’avoir installé Salesforce CLI et d’avoir une org cible (scratch ou sandbox) déjà activé comme Dev Hub. Cette étape est cruciale pour optimiser votre développement Salesforce.

NB : vous pouvez suivre la procédure d’installation du CLI Salesforce s’il n’était pas installé au préalable.

Activation Local Dev pour une Scratch Org

Si vous souhaitez activer Local Dev Salesforce pour une scratch org, vous pouvez simplement suivre les étapes suivantes pour optimiser vos Lightning Web Components :

1. Depuis VSCode, dans votre projet SFDX, ouvrez le fichier config/project-scratch-def.json
2. Dans la section intitulée « Settings », ajoutez la clé "enableLightningPreviewPref" et définissez-la sur "true" comme illustré ci-après :

{
    "orgName": "ingridomar company",
    "edition": "Developer",
    "features": ["EnableSetPasswordInApi"],
    "settings": {
        "lightningExperienceSettings": {
            "enableS1DesktopEnabled": true,
            "enableLightningPreviewPref" : true
        },
        "mobileSettings": {
            "enableS1EncryptedStoragePref2": true
        }
    }
}

Une fois vos modifications enregistrées dans project-scratch-def.json, les scratch orgs créées avec ce fichier JSON auront le développement local activé pour vos Lightning Web Components.

Activation Local Dev Salesforce pour une Sandbox

Si vous disposez d’une sandbox préexistante, il va falloir activer ce paramètre pour votre organisation afin de pouvoir utiliser Local Dev Salesforce. Cette configuration est essentielle pour tirer parti de cette fonctionnalité avancée de développement Salesforce.

Rendez-vous dans Setup > Development > Dev Hub pour activer cette fonctionnalité. Sans cela, si vous tentez d’utiliser Local Dev sans l’avoir préalablement activé dans le Setup, l’outil remontera une erreur dans l’interface en ligne de commande (CLI).

Installation complète de Local Dev Salesforce

Étape 1 : Mise à jour de la CLI Salesforce

Exécutez sf update pour utiliser la dernière version de la CLI, requise par Local Dev Salesforce. Cette mise à jour garantit la compatibilité avec les dernières fonctionnalités de développement Salesforce.

Étape 2 : Installation du plugin Local Dev

Dans un terminal, lancez la commande appropriée selon votre environnement :

Pour les orgs Prod/Scratch (GA) :

sf plugins install @salesforce/plugin-lightning-dev

Pour les sandboxes (bêta) :

sf plugins install @salesforce/plugin-lightning-dev@prerelease

Cette commande installe le plugin permettant de lancer le serveur Local Dev Salesforce pour vos Lightning Web Components.

Une fois ces étapes terminées, Local Dev est installé et activé. Vous pouvez désormais lancer le serveur et prévisualiser vos LWC sans autre configuration particulière. Notez que, comme le précise la documentation Salesforce, cette fonctionnalité s’utilise uniquement via la CLI Salesforce ou VS Code.

Test pratique de Local Dev avec vos Lightning Web Components

Nous allons tester le comportement d’un LWC dans une App Lightning à l’aide de Local Dev Salesforce. Cette démonstration pratique illustre parfaitement l’efficacité de cette approche moderne du développement Salesforce.

Prérequis pour tester Local Dev Salesforce

Pour cela, il faudra au préalable :

1. Créer une page d’application à l’aide du Lightning App Builder, puis la rendre disponible dans l’application Sales.
2. Une fois ceci fait, un onglet correspondant à cette page apparaîtra dans l’interface de l’application Sales.
3. Cette page servira de conteneur pour le composant LWC que vous créerez à l’étape suivante.
4. Préparer un composant LWC que vous utiliserez pour tester l’aperçu avec le serveur Local Dev Salesforce.
5. Déployer le composant LWC dans votre org, puis insérez-le dans la page d’application que vous avez créée précédemment.

Lancement du serveur Local Dev Salesforce

Lancez la commande suivante pour démarrer le serveur de développement local dans le terminal VSCode :

sf lightning dev app

Le processus interactif vous guidera à travers les étapes suivantes :

1. Sélection du type d’appareil : Vous serez invité à choisir le type d’appareil pour prévisualiser vos composants LWC. Dans ce cas, sélectionnez « Desktop » (bureau).
2. Choix de l’application : Vous devrez choisir l’application Salesforce dans laquelle vous souhaitez lancer l’aperçu (Sales, Bolt, etc.). Choisissez Sales si vous avez rendu votre page d’application disponible dans l’application Sales.
3. Ouverture automatique : Un nouvel onglet va s’ouvrir dans votre navigateur.

Fonctionnement en temps réel de Local Dev Salesforce

Si vous observez attentivement l’URL, vous remarquerez qu’elle ressemble à celle de votre org de Dev, mais qu’il ne s’agit pas réellement de votre org. Il s’agit ici d’une instance virtuelle de cette dernière, optimisée pour le développement Salesforce.

Cela signifie que lorsque vous enregistrez des modifications dans le code source de votre composant LWC, celles-ci seront automatiquement visibles dans l’aperçu, sans avoir besoin de déployer ni de recharger la page. Cette réactivité transforme l’expérience de développement Salesforce.

Important : En revanche, ces modifications ne seront pas visibles dans la véritable org tant que vous ne les avez pas déployées et que vous n’avez pas actualisé la page où le composant LWC est utilisé.

Bonnes pratiques et considérations pour Local Dev Salesforce

Recommandations d’utilisation

Toujours mettre à jour le CLI : avant chaque session Local Dev Salesforce, exécutez sf update pour bénéficier des dernières améliorations et correctifs du plugin.

Préférez Local Dev Salesforce pour :

• Le prototypage de composants UI
• Le test d’interactions front-end (sans dépendance back-end)
• Les ajustements de styles et de comportements visuels des Lightning Web Components
• Gagnez du temps : un simple Ctrl+S suffit pour visualiser le rendu

Limitations importantes à connaître

Local Dev Salesforce vous permet uniquement de prévisualiser les LWC. Vous ne pouvez pas l’utiliser pour tester les composants Aura dans l’aperçu de votre application ou de votre site. Cette limitation est importante à considérer dans votre stratégie de développement Salesforce.

Modes de visualisation disponibles avec Local Dev Salesforce

Aperçu d’une application Lightning Experience

Salesforce Local Dev vous permet de prévisualiser une application Lightning dans un environnement simulé, que ce soit :

• en mode bureau, ou
• via l’interface mobile Salesforce (iOS ou Android).

Pour cela, exécutez la commande suivante dans votre terminal :

sf lightning dev app

Vous pourrez ensuite sélectionner l’environnement de rendu souhaité (desktop ou mobile) ainsi que l’application cible. Cette flexibilité fait de Local Dev Salesforce un outil indispensable pour le développement Salesforce moderne.

🆕 Nouveauté Spring ’25 : À partir de la version Spring ’25, si vous ne spécifiez pas toutes les options en ligne de commande, la CLI vous guidera automatiquement. Elle vous proposera une sélection interactive d’options valides pour finaliser l’exécution de la commande.

Aperçu d’un site LWR Experience Cloud

Lorsque vous exécutez la commande suivante dans l’interface en ligne de commande (CLI) :

sf lightning dev site

Salesforce Local Development génère automatiquement un bundle statique du site Experience Cloud, basé sur son état actuel. Ce bundle est ensuite téléchargé et exécuté localement, permettant une prévisualisation rapide sans déploiement sur une organisation distante.

🔒 Limitation actuelle : À ce jour, la prévisualisation d’un site Experience Cloud via Local Dev est limitée à un affichage en mode bureau. Les rendus mobiles ne sont pas encore pris en charge dans ce contexte.

Aperçu d’un composant unique LWC

Lorsque vous utilisez Salesforce Local Development dans l’optique de prévisualiser un composant Lightning Web Component (LWC) dans votre navigateur, la commande CLI suivante permet de lancer un aperçu isolé du composant, sans devoir le déployer :

sf lightning dev component

Limitations des composants complexes

Cependant, cette prévisualisation locale est aujourd’hui limitée aux composants simples. Plus précisément, les composants suivants ne sont pas encore pris en charge dans ce mode d’aperçu :

• Les composants utilisant Lightning Data Service via les décorateurs @wire (ex. @wire(getRecord, {...}))
• Les composants utilisant certains modules de la plateforme (tels que force/* ou certains modules lightning/*)

Cela signifie que les composants nécessitant l’accès à des données en temps réel depuis Salesforce (comme des enregistrements, des métadonnées ou des données utilisateur) devront être testés différemment, soit :

• via des mocks de données en local,
• soit au sein d’une org (sandbox ou scratch org) une fois déployés.

Cette limitation technique est importante à considérer dans votre approche du développement Salesforce avec Local Dev.

Avantages concurrentiels du Local Dev Salesforce

Révolution du développement Lightning Web Components

Le développement local des Lightning Web Components (LWC) révolutionne la manière dont les développeurs conçoivent et affinent les interfaces utilisateur (UI) dans Salesforce. En supprimant les étapes de déploiement répétitives, Local Dev Salesforce permet une prévisualisation en temps réel des modifications.

Gains de productivité mesurables

Dès lors que le développement local est activé, chaque changement apporté au HTML, JavaScript ou CSS est immédiatement reflété dans le navigateur, réduisant ainsi les boucles de retour utilisateur de plusieurs minutes à quelques secondes. Cette réactivité :

• Accélère considérablement les itérations de design
• Limite les interruptions de concentration (context switching)
• Permet de détecter plus tôt les erreurs de logique ou de mise en page
• Optimise le workflow de développement Salesforce

Flexibilité et autonomie

Une fois l’environnement initialisé, le mode local offre également un fonctionnement hors ligne, ce qui renforce la flexibilité du prototypage, même en l’absence de connexion directe à une organisation Salesforce. Cette autonomie est un atout majeur pour les équipes de développement Salesforce.

Optimisation SEO et performance

L’utilisation de Local Dev Salesforce s’inscrit dans une démarche d’optimisation continue du développement Salesforce. Cette approche moderne permet aux développeurs de :

• Réduire les temps de cycle de développement
• Améliorer la qualité des Lightning Web Components
• Accélérer la mise sur le marché des solutions Salesforce
• Optimiser l’expérience utilisateur final

Conclusion : Local Dev Salesforce, l’avenir du développement Lightning

Local Dev Salesforce représente une évolution majeure dans l’écosystème de développement Salesforce. En permettant la prévisualisation en temps réel des Lightning Web Components LWC, cette technologie transforme fondamentalement l’approche du développement.

Les bénéfices sont multiples : gain de temps significatif, amélioration de la productivité, réduction des erreurs et optimisation de l’expérience développeur. Pour toute équipe engagée dans le développement Salesforce moderne, Local Dev devient rapidement un outil indispensable.

L’investissement initial dans la configuration et la prise en main de Local Dev Salesforce est largement compensé par les gains de productivité obtenus. Cette technologie s’impose comme un standard pour le développement Salesforce professionnel et efficace.

Références et ressources complémentaires

• Preview Components with Local Dev – Documentation officielle Salesforce
• Install Salesforce CLI – Guide d’installation CLI
• Component Reference – Bibliothèque de composants Salesforce