Vendure- The smart Shopify alternative
Tags: nextjs, opensource, webdev, graphql
Published: 2021-12-21 01:02:22


![Vendure_logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oflz8u20zu6g4ljvfhai.png)

## _Everything you need, nothing you don't_   


In 2022 online sales are expected to continue to grow 16.1% compared to 2021, which was a record-breaking year in its own right. In-person shopping, however, is expected to remain flat for the foreseeable future. This has led to an influx of online stores opening for the first time as many business owners are seeking to capitalize on the benefits of online selling. 

When building an online store for yourself or a client, there are a plethora of options available due to the growing demand. Many clients and business owners want stores that are easy to maintain, built quickly, and are cost-effective. Checking all the boxes on this list is no small task, and many developers and store owners naturally gravitate towards monolithic options such as Shopify or WordPress due to the speed at which they can be built. The issue that many face when using these options is that customization can be non-existent or expensive (Plugins), and they are prone to creating a less than stellar customer service experience. 

On the other hand, customers have higher expectations than ever for their online and mobile shopping experiences. Universally consumers prefer their online shopping experience to be effortless and personal. 

 Headless storefronts can be built on traditionally monolithic platforms however, this often still leaves a person depending on expensive plugins to enable standard back-end features. Other, newer options often come with high monthly charges and/or a percentage of your gross sales. This is a major hurdle for many small businesses that don't have the financial resources to hire a full development team. 

An option that I recently discovered that does a better job than either of the two aforementioned options is [Vendure.io ](vendure.io)which is a headless e-commerce framework that is easy to set up, cheap to host ($5 mo), and you won't have to worry about feeling overwhelmed by the admin dashboard (cough cough wp). The admin dashboard is beautiful and intuitive, perfect to hand off to a client. Vendure was developed by Michael Bromley and released in 2019 and just released version 1.4. I am just getting started using Vendure but have highlighted a few aspects that have stood out in my eyes. Down below, I will also show a quick and easy way to get started with Vendure. 

### Built with..  
- Typescript
- Nestjs
- Graphql

#### Features

##### - Customizable
- In Vendure, this is accomplished easily with a couple of lines of configuration. This is much more involved in other frameworks and can be a costly plugin depending on the platform.
- Custom the shopping experience by bringing your storefront. vendure has starters available for Next as well as Vue!
- Compatible with multiple payment gateways 

##### - Scalable 
- Sell an unlimited amount of products
- Marketplace capable 
- Multi-Tenant capable 
- Amazing support and community 

##### - Cost-effective
- Open-source 
- Deployment on the digital ocean is around 5 a month
- No additional fees for using preferred payment gateway    

##### - Approachable 
- Easy to set up in an afternoon 
- Easy to navigate and preconfigured dashboard
- Advanced image control
- Storefront starters

## Let's get started

Step .5: Prerequisites
    Basic understanding of TypeScript
    Basic understanding of Node.js
    Basic understanding of GraphQL
    Basic understanding of SQL and databases 

Keep in mind that this is a beginner's guide and setup, that does not go into the full capabilities of Vendure.io.
    
~#~#~#~#~#~#~#~
If you are new to the world of Node.js, [Node.js](https://nodejs.org/en/). 
If you are new to GraphQL, [GraphQL](https://graphql.org/). 
If you are new to SQL, [SQL](https://www.w3schools.com/sql/).
If you are new to the world of TypeScript, [TypeScript](https://www.typescriptlang.org/).
~#~#~#~#~#~#~#~

### Here we go!


Step 1: Open a new terminal window enter the following command

    npx @vendure/create my-app  

Step 2: Choose a Database- for this tutorial we will be using an SQLite database. 

Step 3: Choose a Language- for this tutorial we will be using TypeScript

Step 4: Sample Data? Yes, please  

Step 5: User name and Password? We will use the default settings provided which is superadmin/superadmin. This can be changed later in the dashboard  

Step 6: Run the command  

        cd my-app
        yarn start  
Step 7: Since the previous step will take a couple of minutes, this is a good time to get up stretch, grab a ~~beer~~ coffee, and congratulate yourself on setting up your Vendure server

## Nice work! You should now be able to access the following

    The Vendure Admin GraphQL API: http://localhost:3000/admin-api
    The Vendure Shop GraphQL API: http://localhost:3000/shop-api
    The Vendure Admin UI: http://localhost:3000/admin  

### But what does it mean...?

> Admin GraphQL API: http://localhost:3000/admin-api = Store permissions
> GraphQL API: http://localhost:3000/shop-api = Putting items on the shelves and general store operations 
> Admin UI: http://localhost:3000/admin= View from the bosses desk
(high five!)

## Creating a storefront
There are two popular integrations available at the moment: Vue and Next
Since I like Next over Vue~ Let's set up the Next js storefront

Step 1. Verify that the Vendure server is set up for cookies and not bearer tokens 
![Vendure_config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0rnyeo46n1bwjy4b56v.png)
Step 2. Fork and then clone this repo https://github.com/vercel/commerce
Step 3. NPM install and then create a .env.local file at the root of the project and add the following   

        COMMERCE_PROVIDER=vendure
    NEXT_PUBLIC_VENDURE_SHOP_API_URL=http://localhost:3000/shop-api 
    NEXT_PUBLIC_VENDURE_LOCAL_URL=/vendure-shop-api

Step 4.  Let's now double-check our tsconfig.json file and make sure that the correct framework is set up. It should show Vendure as the framework of choice, replacing "local" on lines 26 through 30. 
     
        "@components/*": ["components/*"],
        "@commerce": ["framework/commerce"],
        "@commerce/*": ["framework/commerce/*"],
        "@framework": ["framework/vendure"],
        "@framework/*": ["framework/vendure/*"]
    
Step 5.  In your terminal  enter the command "npm run dev" to start your storefront

You should now see a fully populated store full of demo items. Let's go ahead and verify connectivity by going to our Vendure admin dashboard. Once signed we can add products and collections. 
![adding products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgkw6vlvaycic7a8d8vz.png)

If we go back and check out our storefront we should see any new categories we created listed in the navbar, and a quick search should bring up any new products that are not displayed on the landing page. 
![Added items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmbud0bayv5hbkq77mu1.png)
 
 
The Next js storefront comes with Tailwind CSS installed. The only thing left to do is add your personal touch! 


## TA-DA YOU ARE FINISHED 
If you have any questions about setting up Vendure, the Slack channel is full of helpful and knowledgeable people:  https://vendure-ecommerce.slack.com.  




Check out my new newest endeavor: 
Zephyr Pixels hand-coded websites(https://zephyrpixels.dev)