[컴] vendure 의 admin ui extension 만들기

reactjs / admin ui / 어드민 확장 /

vendure 의 admin ui extension 만들기

여기서는 react 를 이용해서 admin ui extension 을 만들어 보려 한다. 참고로, vendure 의 admin ui 는 angular 로 되어 있다.

• Using Other Frameworks | Vendure docs
• Getting Started | Create React App

동작 방법

다음 내용은 How It Works의 내용의 번역이다.

UI extension 은 Angular module 이다. 이것이 compile 된 후 compileUiExtensions function 에 의해 Admin UI application 이랑 같이 묶이게 된다. 이 compileUiExtensions function 은 @vendure/ui-devkit package에 의해 export 된다.

내부적으로 ui-devkit package는 javascript 번들들(이 번들에 당신의 extension 들도 포함된다.)의 최적화된 집합을 compile 하기 위해서 Angular CLI 를 이용한다.

Prerequisite

여기선 아래 source를 기본으로 설명한다.

• GitHub - vendure-ecommerce/real-world-vendure: A project showcasing a real-world tooling and plugin setup for a Vendure server

여기서는 vendure source 를 직접 사용하지 않는다. 위 real-world-vendure 에서 vendure 의 source 는 node_modules 안에 들어있게 된다.

• GitHub - vendure-ecommerce/vendure: A headless GraphQL ecommerce framework for the modern web

ui extension

이것은 admin ui 의 확장을 위한 것이다. Admin UI 를 extend 한 Vendure plugin 의 전체 source code 는 아래에 있다.

• real-world-vendure/src/ui-extensions at master · vendure-ecommerce/real-world-vendure · GitHub

아래같은 구조로 파일을 추가한다.

- src/
  - ui-extensions/
    - modules/
    - my-app/
      - <react files>
    - ui-extensions.ts

1. @vendure/ui-devkit 설치

   npm install @vendure/ui-devkit

2. react app 생성

   여기서 이름은 my-app으로 한다.

   npx create-react-app my-app --template typescript

3. package.json안에 homepage: "/admin/assets/react-app/" 추가

   React app 은 다음에 지정된 대로 하위 디렉터리에 복사되기 때문이다.

   // package.json
   {
       ...
       "homepage" : "/admin/assets/react-app/"
   }

4. my-app folder에서 .env 를 생성

   port를 변경하는 이유는 Vendure server 와 충돌하지 않게 하기 위해서이다.

   # .env file
   SKIP_PREFLIGHT_CHECK=true
   PORT=3080

5. <root>/modules/react-extension.module.ts 를 추가한다.

6. ui-extensions.ts 을 추가

7. /src/ui-extensions/shared-ui-extension.module.ts 는 navigation menu 를 위해 추가

8. react app 을 build : /src/ui-extensions/my-app 에서 yarn 실행후, yarn build

9. / 에서 yarn build 를 한다.

Reference

1. Extending the Admin UI | Vendure docs