DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Set up a Node.js e-commerce app in 10 minutes with Vendure
Michael Bromley
Michael Bromley

Posted on

Set up a Node.js e-commerce app in 10 minutes with Vendure

Vendure is a modern headless e-commerce framework written in TypeScript and built on top of the excellent NestJS framework.

By "headless" we mean that it exposes an API (GraphQL in the case of Vendure), which allows you to build your storefront using your favourite front-end technology, be it Next.js, Vue, Svelte, or anything else you like!

Headless e-commerce has a somewhat justified reputation of being more complex and development-intensive than off-the-shelf SaaS solutions like Shopify. But with Vendure we aim to cut down your development time to the bare minimum with a combination of:

  • a rich set of features
  • integrations with existing solutions
  • optimal developer experience
  • modern technologies and workflows

In this tutorial I will take you step-by-step through setting up a fully-functional headless e-commerce server.

Screenshot of the Vendure Admin UI

Installation

To create your app, run the following command:

npx @vendure/create my-shop
Enter fullscreen mode Exit fullscreen mode

This will guide you through the setup by asking you a series of questions. Select the following options:

โˆš 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
Enter fullscreen mode Exit fullscreen mode

Now go make yourself a drink or check your dev.to feed for a few minutes while we install all the dependencies and scaffold your app!

Once everything is done you should see this message:

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

We suggest that you start by typing:

    cd my-shop
    npm start

Happy hacking!
Enter fullscreen mode Exit fullscreen mode

And... that's it! cd into the newly-created directory and run npm start.

Congratulations - you now have a fully-functional headless e-commerce server.

Test it out

Let's test out our shiny new GraphQL API! Go to http://localhost:3000/shop-api and paste the following query into the left-hand pane of the GraphQL Playground app:

{
  products(options: { take: 5 }) {
    totalItems
    items {
      id
      name
      featuredAsset {
        preview
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Play around with the API - because it's GraphQL, you'll get rich code-completion so you don't need to try to guess what fields are available. Press ctrl/cmd + space to get a list of available fields at any location.

Next, you can head to http://localhost:3000/admin where you can login with the credentials superadmin, superadmin. This will grant you access to the Vendure Admin UI - a full-featured interface for managing every aspect of your store.

Storefront

Vendure only provides the backend part. What about the storefront? You'll need one of those if you want anybody to be able to buy your stuff.

Vendure/Vercel Commerce integration

Building a custom storefront from scratch can be a big task, but luckily we've got a couple of great options for you to get you up-and-running in no time:

  • Vue Storefront is an industry-leading storefront library built on Vue & Nuxt.js. The official Vue Storefront / Vendure integration allows you to set up a slick, modern and performant store-front in minutes.
  • Next.js Commerce is a starter kit that gets you set up with a modern storefront built by the Vercel team. The project also comes with a Vendure integration, and you can see a live demo of it at vendure.vercel.store.
  • Build your own! Vendure is an excellent back-end to use when learning a new framework. It runs everywhere, uses few resources, and exposes a full, production-grade API to build against. Why not test out that latest framework by building a minimal e-commerce storefront?

Next Steps

While Vendure is simple to set up, it is by no means a "light" or "toy" solution. In fact, it is one of the most extensible and feature-rich of all the e-commerce frameworks out there, and is used in production by Fortune 500 companies, billion-dollar start-ups and solo-developed boutique shop projects alike!

To dive into the possibilities offered by Vendure, check out our extensive developer documentation, and if you run into any trouble, please join our Slack community where you'll find the help you need.

Finally, here's a presentation I gave at a recent conference which covers more of the background and goals of the Vendure project. Thanks for reading!

Top comments (5)

Collapse
 
michlbrmly profile image
Michael Bromley

I'm planning a more in-depth series of articles to get started on real-world development with Vendure. If there are any particular topics you'd like me to cover, please let me know in reply ๐Ÿ‘

Collapse
 
imtiyajkhan789 profile image
Mohemmad Imtiyaz Ahmed

Please explain, how to integrate with nextjs 13 storefront. Because i am having issue while integrating. What folder structure i will have to follow for integration?
Waiting for your reply.
Thnx in advance.

Collapse
 
quanganh206 profile image
Quang Anh Le

Writing custom plugin to customize as need maybe the best one @michlbrmly

Collapse
 
huzaifams profile image
HuzaifaMS

Cool tech.
Newbie question. Can it integrate with WordPress extensions like woocomerce?

Collapse
 
michlbrmly profile image
Michael Bromley

Thank you! No, it is not compatible with any WordPress extensions, because it is not based on WordPress like WooCommerce is.
The approach taken by Vendure is to attempt to make the development experience so simple and enjoyable that for most tasks, you can create your own custom extensions quickly and easily. For more complex features there is a growing list of official and community plugins.

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!