How to setup free E-commerce Store in 3 steps with medusa(React) and vuestorefront(Vue)
@Hustler
Problem :
Let’s say you have business with some ‘XYZ’ products and you want to sell it online or may be you are a developer who wants to provide an E-commerce service to other business owners.In any case you would want to make an E-commerce platform. well there are plenty of options in the market like Shopify, Wix, Square, woo commerce, etc which provide all services with ease, but one thing which is common among all these is that eventually, you will have to pay for the services.
In this blog, I want to introduce you to two open source platforms called Medusa-an open source shopify alternative and vuestorefront UI integrated with Odoo CRM.which are absolutely free and easy to use.
I have personally used these platforms and did the setup and want to share my experience with it
Solution :
First let’s talk about medusa
Medusa-It is an open-source alternative to shopify.
It has Three main componenets :
Admin Dashboard :-It is used by store admins to add,delete,view or modify details of products,orders,customers giving end to end functionalities build In.
StorefrontUI :-It is a beautiful-looking store UI where customer/user shall interact to make purchase.currently, it has two store UI available
Note- both of these libraries use React but If you want you can create you own storefront with different frontend framework. you can do that with their [storefront REST API](https://docs.medusajs.com/api/store/)
- Medusa Server : This is headless backend server. admin dashboard and strorefront UI interact with the server to get,post,update data through REST API
Let’s jump into implementation part
The Three steps are
Step 1 : install medusa server
Step 2 : install medusa admin dasboard
Step 3 : install medusa storefront UI
Prerequisite : Node = 14 & 16 ,Git,code editor(VScode)
Step-1 Installing medusa server commands
//installing medusa cli
npm install @medusajs/medusa-cli -g
//creating a new project
medusa new my-medusa-store --seed
//changing directory and starting server
cd my-medusa-store
medusa develop
//test server on this port -localhost:9000/store/products
To know more : medusa server
Step-2 Installing medusa admin dashboard commands
//cloning medusa admin from GitHub and changing directory
git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin
//installing node dependencies
npm install
npm run start
//By default password
Email -admin@medusa-test.com
Password -supersecret
To know More : Admin dashboard
The dashboard looks something like this
Step -3 Installing medusa storefront UI commands -Next.js
//creating a new project
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefron
//changing directory and starting server
cd my-medusa-storefront
npm run dev
//test server on this port -localhost:8000
To know more : medusa storefront UI
storefrontUI demo
Are you a Vue developer?Then this section of blog might help you.
The second open source platform is vuestorefront which is a headless backend e-commerece platform build in vue.js.
It provides powerful integration with E-commerece platforms like shopify,magento,Odoo.it also provide ready to use vuestorestorefront UI library which contains all components necessary for an ecommerece platform.
I have tried to build an E-commerece Shoe store using odoo CMS and customized it with vuestorefrontui library.
Steps to install Odoo
//clone the odoo repository and run the commands in sequence -
//if you don't have yarn install it using this command npm install -g yarn
1. git clone https://github.com/vuestorefront-community/odoo
2. git submodule init
3. git submodule update # now you fetched the theme submodule from template-odoo
2. yarn install
3. yarn build # (optional)
4. yarn dev
You should be able to see by default template from vuestorefront ui in your local.
I have tried to customised the template according to my needs
github: https://github.com/Sharanya98/VuestoreFrontUI-odoo
here is the demo
“Build a good name. Keep your name clean. Don’t make compromises. Don’t worry about making a bunch of money or being successful. Be concerned with doing good work … and if you can build a good name, eventually that name will be its own currency.”
_William Burroughs
Stay healthy!Keep Hustling❤️