Set up a Node.js e-commerce app in 10 minutes with Vendure
Tags: typescript, node, tutorial, javascript
Published: 2021-12-13 21:21:31

[Vendure](https://www.vendure.io/) is a modern headless e-commerce framework written in TypeScript and built on top of the excellent [NestJS](https://nestjs.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyhi1rash5j42cpd5i51.jpg)

## Installation

To create your app, run the following command:

```shell
npx @vendure/create my-shop
```

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
```

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!
```

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:

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

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l95dspcc3xm4c6vs922p.jpg)

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](https://www.vuestorefront.io/) is an industry-leading storefront library built on [Vue](https://vuejs.org/) & [Nuxt.js](https://nuxtjs.org/). The [official Vue Storefront / Vendure integration](https://www.vendure.io/integration/vue-storefront/) allows you to set up a slick, modern and performant store-front in minutes.
* [Next.js Commerce](https://nextjs.org/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](https://github.com/vercel/commerce/blob/main/framework/vendure/README.md), and you can see a live demo of it at [vendure.vercel.store](https://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](https://www.vendure.io/features/) 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](https://www.vendure.io/docs/), and if you run into any trouble, please join our [Slack community](https://join.slack.com/t/vendure-ecommerce/shared_invite/enQtNzA1NTcyMDY3NTg0LTMzZGQzNDczOWJiMTU2YjAyNWJlMzdmZGE3ZDY5Y2RjMGYxZWNlYTI4NmU4Y2Q1MDNlYzE4MzQ5ODcyYTdmMGU) 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!

{% youtube FE2yQA2Gkyk %}