[세일즈포스] lwc-dev-server를 이용하여 LWC 미리보기

lwc를 앱빌더에서 다른 페이지에 붙이지 않고, 바로 프리뷰를 여는 방법이 있다. 

 

대상 : 트레일헤드의 라이트닝 관련 코스를 어느정도 맛본 사람

 

준비물 

0. 윈도우컴

1. 인텔리제이 (커뮤니티 버전 가능) 

2. 인텔리제이 플러그인 중 하나인 illuminated cloud (유료!! 라이센스없으면뒤로가기)

3. salesforce cli ( https://developer.salesforce.com/tools/sfdxcli ) 

4. node 설치 ( https://developer.salesforce.com/tools/sfdxcli )

.

.

.

 

 

 

 

 

 

1. cmd 관리자권한으로 열고 다음 세 가지 실행 

 

 

npm install --save bcryptjs

 

 

 

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command " [System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

 

 

 

 

 

choco install python visualcpp-build-tools

(물어보는 것마다 Y 입력하면 된다)

 

 

 

 

2. https://www.microsoft.com/en-us/download/confirmation.aspx?id=48159 에서 마소 빌드툴 설치

 

 

 

 

3. 다시 관리자 cmd에서 다음 두 가지 실행

 

npm install -g node-gyp

 

 

sfdx plugins:install @salesforce/lwc-dev-server

 

 

 

 

4. 인텔리제이에서 새 프로젝트 생성

 

file > new > project

 

next 클릭하고, 다음 화면도 별거없으니 create 클릭

 

 

프로젝트를 생성했으니 이제 org에 연결해야한다. ok 클릭

 

 

좌상단의 +를 클릭해서 새 연결 생성 

 

DX 옆에 지구모양 클릭하여 alias 입력, organization type(playground조직이라면 development) 선택하고 ok 클릭

 

그럼 브라우저가 하나 뜰 것인데.. 로그인 후 salesforce-cli의 접근을 허용해준다.

 

 

 

 

 

 

5. 인텔리제이 터미널에서 sfdx force:lightning:lwc:start  실행

Server up on http://localhost:3333 가 뜬다면 성공이다.

 

 

6. localhost:3333