Vendure로 10분 안에 Node.js 전자 상거래 앱 설정

Vendure은 TypeScript로 작성되고 우수한 NestJS 프레임워크 위에 구축된 최신 헤드리스 전자 상거래 프레임워크입니다.

"헤드리스"는 API(Vendure의 경우 GraphQL)를 노출한다는 것을 의미하며, 이를 통해 Next.js, Vue, Svelte 또는 기타 좋아하는 프런트 엔드 기술을 사용하여 매장을 구축할 수 있습니다. !

헤드리스 전자 상거래는 Shopify와 같은 기성품 SaaS 솔루션보다 더 복잡하고 개발 집약적이라는 다소 정당한 평판을 가지고 있습니다. 그러나 Vendure에서는 다음을 조합하여 개발 시간을 최소한으로 줄이는 것을 목표로 합니다.

풍부한 기능 세트

기존 솔루션과 통합

최적의 개발자 환경

최신 기술 및 워크플로

이 자습서에서는 완전한 기능을 갖춘 헤드리스 전자 상거래 서버를 설정하는 과정을 단계별로 안내합니다.

설치

앱을 만들려면 다음 명령을 실행합니다.

npx @vendure/create my-shop

일련의 질문을 통해 설정 과정을 안내합니다. 다음 옵션을 선택합니다.

√ Which database are you using? 
  » SQLite
√ Which programming language will you be using? 
  » TypeScript
√ Populate with some sample product data? 
  » yes
√ What identifier do you want to use for the superadmin user? 
  » superadmin
√ What password do you want to use for the superadmin user?
  » superadmin

이제 우리가 모든 종속성을 설치하고 앱을 스캐폴딩하는 동안 음료를 마시거나 dev.to 피드를 확인하세요!

모든 작업이 완료되면 다음 메시지가 표시됩니다.

Success! Created a new Vendure server at <path>/my-shop

We suggest that you start by typing:

    cd my-shop
    npm start

Happy hacking!

그리고 그게 다야! cd를 새로 만든 디렉토리에 넣고 npm start를 실행합니다.

축하합니다. 이제 완전한 기능을 갖춘 헤드리스 전자 상거래 서버가 생겼습니다.

그것을 시험해보십시오

멋진 새 GraphQL API를 테스트해 봅시다! http://localhost:3000/shop-api으로 이동하여 다음 쿼리를 GraphQL Playground 앱의 왼쪽 창에 붙여넣습니다.

{
  products(options: { take: 5 }) {
    totalItems
    items {
      id
      name
      featuredAsset {
        preview
      }
    }
  }
}

API를 가지고 놀아 보세요. GraphQL이기 때문에 풍부한 코드 완성 기능을 얻을 수 있으므로 사용 가능한 필드를 추측할 필요가 없습니다. ctrl/cmd + space를 눌러 모든 위치에서 사용 가능한 필드 목록을 가져옵니다.

그런 다음 superadmin , superadmin 자격 증명으로 로그인할 수 있는 http://localhost:3000/admin으로 이동할 수 있습니다. 이렇게 하면 상점의 모든 측면을 관리하기 위한 완전한 기능을 갖춘 인터페이스인 Vendure Admin UI에 대한 액세스 권한이 부여됩니다.

매장 앞

Vendure는 백엔드 부분만 제공합니다. 점포는 어떻습니까? 누군가가 당신의 물건을 살 수 있게 하려면 그것들 중 하나가 필요할 것입니다.



처음부터 맞춤형 스토어프론트를 구축하는 것은 큰 작업이 될 수 있지만 다행스럽게도 즉시 시작할 수 있는 몇 가지 훌륭한 옵션이 있습니다.

Vue Storefront은 Vue 및 Nuxt.js에 구축된 업계 최고의 매장 라이브러리입니다. official Vue Storefront / Vendure integration을(를) 사용하면 세련되고 현대적이며 성능이 뛰어난 매장 전면을 몇 분 만에 설정할 수 있습니다.

Next.js Commerce은 Vercel 팀이 구축한 현대적인 매장으로 설정할 수 있는 스타터 키트입니다. 이 프로젝트는 또한 Vendure integration 과 함께 제공되며 vendure.vercel.store 에서 라이브 데모를 볼 수 있습니다.

나만의 것을 만드세요! Vendure는 새로운 프레임워크를 배울 때 사용할 수 있는 훌륭한 백엔드입니다. 어디에서나 실행되고 리소스를 거의 사용하지 않으며 빌드할 전체 프로덕션 등급 API를 노출합니다. 최소한의 전자 상거래 매장을 구축하여 최신 프레임워크를 테스트해 보는 것은 어떻습니까?

다음 단계

Vendure는 설정이 간단하지만 결코 "가벼운"또는 "장난감"솔루션이 아닙니다. 실제로 이것은 모든 전자 상거래 프레임워크 중에서 가장 확장 가능하고feature-rich Fortune 500대 기업, 수십억 달러 규모의 신생 기업 및 단독 개발 부티크 상점 프로젝트에서 생산에 사용됩니다!

Vendure가 제공하는 가능성에 대해 자세히 알아보려면 광범위한developer documentation을 확인하고 문제가 발생하면 필요한 도움을 찾을 수 있는 당사Slack community에 가입하십시오.

마지막으로 Vendure 프로젝트의 배경과 목표에 대해 더 많이 다루는 최근 회의에서 발표한 프레젠테이션이 있습니다. 읽어 주셔서 감사합니다!