С переходом на LWC у нас появилась возможность использовать локальную среду для разработки в Salesforce. Данная возможность сама по себе звучит как что-то фантастическое: Salesforce и локальный компьютер.
Вы, конечно же, спросите: а такое вообще возможно?
Да, это стало возможным с переходом на node js компоненты в Salesforce.
Из этой статьи вы узнаете, как установить локальный сервер и что для этого нужно.
Обращаю ваше внимание на то, что это будет локальный сервер для разработки LWC компонентов, и этот сервер будет рендерить только UI часть вашего компонента (увы — это далеко не та локальная разработка, о которой вы мечтали).
И, да, это значит, что все запросы на изменение данных (Lightning Data Service) и вызова Apex кода будут отправлять в вашу Scratch организацию.
Так что будьте внимательны и НЕ ИСПОЛЬЗУЙТЕ PRODUCTION организации для разработки или тестирования.
Системные требования
Начнем с требований системы и ПО, которое необходимо для запуска локального сервера.
-
Salesforce CLI
-
Включить Dev Hub в вашей организации
-
Последняя стабильная версия Chrome, Firefox или Edge
-
Safari не поддерживается
Процесс установки локального сервера
Для установки локального LWC сервера нам понадобится установить соответствующий Salesforce CLI плагин. Для этого открываем обычную консоль и выполняем следующие команды:
- Обновляем sfdx до последней версии
sfdx update
- Устанавливаем плагин
sfdx plugins:install @salesforce/lwc-dev-server
- Проверяем обновления для плагина
sfdx plugins:update
Создание Salesfroce DX проекта
Обратите внимание на то, что только в Salesforce DX проектах можно использовать и запускать локальный LWC сервер.
Создаем проект из IDE VS Code
- откройте VS Code
- вызовете контекстное меню через Ctrl + Shift + P,
- Введите sfdx и выберите SFDX: Create Project
Создание проекта из консоли
- cd path/to/your/sfdx/projects
- sfdx force:project:create --projectname MyLWC
- cd MyLWC
Клонирование проекта с git репозитория
- git clone git@github.com:trailheadapps/lwc-recipes.git
- cd lwc-recipes (Переход в корень проекта )
Включение Dev Hub
Следующим шагом для работы локального сервера является Dev Hub функциональность.
Включение Dev Hub в вашей Salesforce организации для использования Scratch Org:
- Заходим в меню Setup, в меню быстрого поиска вводим вводим Dev Hub и выбираем Dev Hub.
*Если такая функция отсутствует, проверьте на каком типе организации вы пытаетесь её активировать; если у вас организация создана давно, возможно лучше написать в техподдержку.
- Для включения Dev Hub нажмите Enable. После включения данную функцию невозможно отключить.
Более детальное описание по включению Dev Hub вы можете найти здесь: Salesforce DX Setup Guide: Enable Dev Hub in Your Org.
Авторизация Dev Hub организации
Для возможности создавать Scratch org из VS Code нам нужно авторизировать VS Code в организации с включенным Dev Hub.
Процесс авторизации
- В VS Code вызываем контекстное меню CTRL + Shift + P,
- вводим sfdx
- выбираем SFDX: Authorize a Dev Hub.
Альтернативый процесс авторизации
Так же, авторизацию можно сделать, используя консоль:
sfdx force:auth:web:login -d -a LWC-Hub
LWC-Hub - это алиас для вашей Dev Hub организации; его вы можете использовать в командной строке Salesforce CLI.
После выполнения данных манипуляций вы получаете новое окно браузера, где вам предложат пройти процесс авторизации в вашей SalesForce+ организации. Эту нужно будет сделать лишь один раз.
Создание Scratch Org
Создать Scratch Org можно используя файл конфигурации project-scratch-def.json. В этом файле вы можете прописать любые настройки для вашей scratch организации. Более детально про этот файл мы подготовим отдельное описание.
Запуск Local Development сервера
Для запуска локального сервера выполняем следующую команду в консоли:
sfdx force:lightning:lwc:start
Если вы получили ошибку при запуске, тогда создайте scratch организацию и повторите запуск, и вы получите следующее сообщение:
sfdx force:lightning:lwc:start
Starting LWC Local Development.
Dev Hub Org: mydevhub
Scratch Org: undefined - We can't find an active scratch org for this Dev Hub.
Create one by following the steps in Create Scratch Orgs in the Salesforce DX
Developer Guide (https://sfdc.co/cuuVX4) or the Local Development Server Getting Started.
Сервер запущен и доступен по следующему адресу http://localhost:3333/.
Если вы используете git, тогда в вашем Salesforce DX проекте добавьте папку .localdevserver/ в ваш .gitignore файл.
После вот таких манипуляций вы получите локальный сервер для разработки LWC компонентов. Более подробное описание этой функции можно найти по ссылке.
Спасибо за внимание!