[컴][웹] vendure 사용해 보기(빌드 및 실행)

nodejs / expressjs e commerce solution / shopping mall / shoppingmall / 쇼핑몰

vendure 사용해 보기

windows 10 에서 vendure 를 설치하고 demo 를 띄워보자.

대략적으로 vendure를 설명하면, 다음과 같은 특징이 있다.

• Nest(nestjs, expressjs 기반의 framework) 로 만들어졌다.
• headless e-commerce framework 이다. 즉 api server 만 제공한다고 보면 된다. admin-ui 는 제공한다.

사용법은 아래 링크에 잘 나와 있다.

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

설치 및 dev server 실행

1. yarn 설치
   • yarn이 필요하다. npm i를 사용해봤는데, 제대로 설치가 되지 않았다.
2. yarn bootstrap
   • 이것은 lerna bootstrap을 실행한다. lerna boostrap에 대한 설명은 여기를 참고하자.
3. yarn build
   • 이제 빌드를 하면 된다.
4. db 를 만들고, test 값을 생성해서 넣기(populate)
   • <vendure>\packages\dev-server\dev-config.ts 에서 getDbConfig() 부분에 db 설정값을 수정한다. sqlite인 경우 굳이 수정할 필요는 없다.
   • getDbConfig() 에 database 이름이 적혀있는데, 그 database 는 RDBMS 에 미리 만들어놔야 한다. sqlite은 굳이 안해도 된다.
   • cd packages\dev-server && set DB=mysql&& yarn populate 은 duplicate error 가 난다. 다만 insert 시점의 error 이기에 table은 다 만들어진다. 이것은 mysql 의 경우 table 만들때 id에 대해서 auto_increment 설정이 안되기 때문으로 보인다. postgreSQL 로 db 를 set 하는 것은 잘 동작한다.
     
   • cd packages\dev-server && set DB=sqlite&& yarn populate 는 잘 동작한다.
   • set 을 한후 && 를 바로 붙어야 한다. (참고)
5. 서버실행
   • yarn start 또는 npm run dev-server:start : dev server를 run
     cd packages/dev-server && set DB=postgres&& yarn start
6. 접속
   • http://localhost:3000/admin 로 가면 admin login 화면에 접속할 수 있다.
   • superadmin/superadmin 를 사용해서 login 할 수 있다.

admin ui 의 확장시 react / vue 사용방법

• Using Other Frameworks | Vendure docs

vendure 실행

다음 repository 를 이용해서 server 를 run 할 수 있다. 이 repo에는 react ui extesion 에 대한 예제도 들어있다.

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

vendure dev-server

vendure/packages/dev-server 의 파일들은 npx @vendure/create my-app 를 실행할 때 생기는 내용과 비슷하다.

my-app/src/의 내용과 vendure/packages/dev-server 를 비교하면 유사하다.

추후, 이 dev-server 부분을 수정해서 server run 을 하면 될 듯 하다.

vendure 는 packages 밑에 build 가 필요한 부분을 flat 하게 놔둔듯 하다. 예를 들어 packages/admin-ui 는 build 돼서, <pro>\packages\admin-ui-plugin\lib\admin-ui로 들어가는 듯 하다. npm publish 를 할 때는 이 lib 부분을 publish 한다.(추측)

clients

1. GitHub - amitavroy/react-vendure-storefront: This is a storefront built using Nextjs and React which connects to the demo Vendure commerce shop
2. GitHub - XeL077/vendure-react-storefront: react-storefront
3. Vendure + Next.js Commerce | Vendure docs
4. Vendure - DEV Community 👩‍💻👨‍💻
5. Set up a Node.js e-commerce app in 10 minutes with Vendure - DEV Community 👩‍💻👨‍💻
6. GitHub - vendure-ecommerce/storefront-gatsby-starter: A storefront for Vendure built with Gatsby
   

See Also

1. Getting Started | Vendure docs : npx @vendure/create my-app 를 이용해서 시작하는 법을 알려준다.
2. 쿠...sal: [컴][웹] vendure 설치 및 개발용 서버 실행