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.
- 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
- Sell an unlimited amount of products
- Marketplace capable
- Multi-Tenant capable
- Amazing support and community
- Deployment on the digital ocean is around 5 a month
- No additional fees for using preferred payment gateway
- Easy to set up in an afternoon
- Easy to navigate and preconfigured dashboard
- Advanced image control
- Storefront starters
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.
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
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
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
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
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!
If you have any questions about setting up Vendure, the Slack channel is full of helpful and knowledgeable people: https://vendure-ecommerce.slack.com.