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)
Latest comments (2)
Great guide that earned a like and my following but... one thing to fix would be to first list the prerequisites to install on your server. I can't remember what is the npx command for, unless it's a tool you previously install before you start building your web storefront. There may be some other pre-requisite tools one needs to install on the server that is about to be turned into a storefront.
You also mentioned a preffered payment gateway. Well which one is it? Or could you maybe provide a list of available payment gateways to use with Vendure?
You mentioned WordPress and Shopify, don't underestimate SquareSpace- in my experience the most affordable and least effort route to setting up your own online store- I've set up a store there for my art from recycled materials and it was as easy as I was requiring it to be.
Thanks for reading. I appreciate the feedback, and you make some great points. I agree with you that including all the prerequisite tools would have made for a more complete setup description. I appreciate you making note of that, and will keep that in mind moving forward.
When it comes to payment gateways, you can integrate with the provider of your choice as long as they are supported in your country. The flexibility is one of the best parts about Vendure. Here are links to the documentation if interested.
vendure.io/integration/
vendure.io/docs/developer-guide/pa...
I tried to focus on just the two most well known platforms in the article to draw contrast against, but SquareSpace can definitely be a viable, and a good option in some scenarios. Congrats on getting your art store launched!