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 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.
If you are new to GraphQL, GraphQL.
If you are new to SQL, SQL.
If you are new to the world of TypeScript, TypeScript.
~#~#~#~#~#~#~#~

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

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.

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.

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)

Vendure- The smart Shopify alternative