Salesforce의 로컬 개발(베타)을 시도해 보세요!

Salesforce의 로컬 개발에서 Lightning Web Components에서 개발한 Lightning 구성 요소는 로컬 호스트에서 실행할 수 있습니다.이렇게 되면 구성 요소의 개발에서 코드를 변경할 때마다 Salesforce 조직에 디버깅을 할 필요가 없기 때문에 개발 교체의 효율화를 기대한다.로컬 호스트 Lightning 구성 요소는 PC 브라우저 외에 iOS/Android 시뮬레이터의 브라우저를 통해 접근할 수 있습니다.
Salesforce의 현지 개발은 이 보도를 집필할 때 베타판에서 제공되었다.

사전 준비

로컬 개발을 수행하려면 Salesforce CLIlwc-dev-server 구성을 추가합니다.이동 시뮬레이터를 확인해야 할 경우lwc-dev-mobile도 설치되어 있다.

$ sfdx plugins:install @salesforce/lwc-dev-server
Successfully validated digital signature for @salesforce/lwc-dev-server.
Finished digital signature check.
Installing plugin @salesforce/lwc-dev-server... installed v2.9.0

$ sfdx plugins:install @salesforce/lwc-dev-mobile
This plugin is not digitally signed and its authenticity cannot be verified. Continue installation y/n?: y
Finished digital signature check.
Installing plugin @salesforce/lwc-dev-mobile... installed v0.4.1

또한 iOS 시뮬레이터를 사용할 때는 Xcode를, 안드로이드 시뮬레이터를 사용할 때는 안드로이드 스튜디오를 설치한다.그런 다음 Android 에뮬레이터를 시작할 환경 변수를 설정합니다.

$ export ANDROID_HOME=/Users/<ユーザー名>/Library/Android/sdk/
$ export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"

로컬 개발 작업 확인

로컬 개발 동작을 확인하기 위해 기본 프로젝트 디렉터리에 간단한 구성 요소를 만들었습니다.이 구성 요소는 화면에만 Hello Local Development로 표시됩니다.
force-app/main/default/lwc/helloLocalDevelopment.html

<template>
    <p>Hello Local Development</p>
</template>

구성 요소가 준비되면 sfdx 명령으로 로컬 서버를 시작합니다.

$ sfdx force:lightning:lwc:start
Server up on http://localhost:3333

로컬 서버가 시작되면 액세스를 시도해 보십시오http://localhost:3333.그런 다음 항목 내의 Lightning 구성 요소를 나열하는 다음 화면이 표시됩니다.이번에는 조립품 하나만 만들었다c-hello-local-development.
c-hello-local-development를 클릭하면 구성 요소가 표시되고 화면 중앙에 Hello Local Development가 표시됩니다.
또한 이런 상태에서 원본 코드를 바꾸면 화면에 표시된 구성 요소도 바로 반영되어 편리합니다!

이동 시뮬레이터를 통해 동작 검사

이동 시뮬레이터에서 구성 요소를 확인하려면 로컬 서버가 시작된 후 sfdx force:lightning:lwc:preview 명령을 실행하십시오.이동 시뮬레이터를 시작하려면 이동 형식 (iOS/Android) 과 대상 구성 요소의 이름을 지정해야 합니다.
또 지령을 집행한 뒤 필요한 환경이 있는지 먼저 점검해야 한다.

# iOS の場合
sfdx force:lightning:lwc:preview -p iOS -n c/helloLocalDevelopment
└─ Setup
   ├─ Passed: @salesforce/lwc-dev-server plugin is installed.
   ├─ Passed: Running macOS.
   ├─ Passed: Xcode installed. XCode library path: /Applications/Xcode.app/Contents/Developer
   └─ Passed: One or more supported simulator runtimes are configured for iOS: [ 'iOS-14-3' ]
Launching... done

# Android の場合
$ sfdx force:lightning:lwc:preview -p Android -t Pixel_3a_API_30_x86 -n c/helloLocalDevelopment
└─ Setup
   ├─ Passed: @salesforce/lwc-dev-server plugin is installed.
   ├─ Passed: ANDROID_HOME is set to /Users/XXXXXX/Library/Android/sdk/.
   ├─ Passed: Android SDK prerequisites are met.
   ├─ Passed: Android SDK tools were detected at /Users/h.tanaka/Library/Android/sdk/tools/bin.
   ├─ Passed: Android Platform tools were detected at /Users/h.tanaka/Library/Android/sdk/platform-tools.
   ├─ Passed: android-30 API package was detected.
   └─ Passed: Android emulator image (system-images;android-30;google_apis;x86) was detected.
Launching... Opening Browser with url http://10.0.2.2:3333/lwc/preview/c/helloLocalDevelopment

Android 에뮬레이터를 시작할 때 디바이스 이름이 명시적으로 지정됩니다.sfdx 명령은 장치 이름을 지정하지 않은 상태에서 기본적으로 SFDX Emultator를 시작하지만 제 환경에서 제대로 시작하지 못하기 때문에 안드로이드 스튜디오에 들어가는 Virtual Device의 이름을 지정합니다.
부팅이 완료되면 부팅된 에뮬레이터 내의 브라우저에 구성 요소가 표시됩니다.PC 버전과 마찬가지로 원본 코드의 변경도 즉각 반영된다.

VS 코드로 편안하게 로컬 개발

VScodecmd + shit + p에서 명령 팔레트를 열면 SFDX: Preview Component Locally 로컬 개발을 간단하게 시작할 수 있어 편리합니다!

참고 자료

로컬 개발(베타) | Salesforce Extensions for Visual Studio Code

Lightning 웹 구성 요소의 로컬 개발(β) | Lightning 웹 Components DevGuide