ERPGAP Blog / Vuestorefront - Setting up your development environment
Vuestorefront - Setting up your development environment

Vuestorefront - Setting up your development environment


Setting up your development environment with Vuestorefront and Odoo

Getting started with docker

Easiest way is to use docker repo from https://github.com/odoogap/vuestorefront-docker.git and get both servers running then stop the one you will use to develop on the backend or on the frontend.

# Create a test folder
mkdir ~/test
# Clone Vuestorefront docker repo
$> git clone --branch 16.0 --recurse-submodules https://github.com/odoogap/vuestorefront-docker.git ~/test/vuestorefront-docker
$> cd ~/test/vuestorefront-docker
$> docker-compose up --build -d
# You might want to check what happens under the hood
$> docker-compose logs -f

You will need to wait a bit, while Odoo creates a new database and installs the graphql_vuestorefront module.

How to setup Vue Storefront on your local

Considering you are a frontend Nuxtjs./Vue.js developer, now you have Odoo/PostgreSql/Redis running on docker and you can use it while you code on your laptop. You just need to stop vsf container and run it directly on your local.

# Stop Vuestorefront container only
$> docker-compose stop vsf
# Start with Vuestorefront odoo template
$> git clone --branch main --recurse-submodules https://github.com/vuestorefront-community/template-odoo.git ~/test/vuestorefront-template
$> cd ~/test/vuestorefront-template
# create the .env file (we use use environment variables in production)
$> cp .env.example .env

Edit the .env file and make it look like this:

NODE_ENV=production
PORT=3000
NODE_LOCALE=en-US
HOST=127.0.0.1
REDIS_ENABLED=true
REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_DATABASE=0
NUXT_TELEMETRY_DISABLED=1
BASE_URL=http://localhost:8069/
SITE_URL=http://localhost:3000/
NODE_API_BASE_URL=http://localhost:3000/api/

If you need you can disable Redis using REDIS_ENABLE=false and also NODE_ENV=development for extended logging. Now you can fire it up with:

# install dependencies
$> yarn install
# generate routes and redirects from ODOO
$> yarn update:routes 
$> yarn update:redirects
# serve with hot reload at localhost:3000
$> yarn dev
# build for production and launch server
$> yarn build
# build local
$> yarn build:local

How to setup Odoo server on your local

I’m considering you are an Odoo developer

Same way as referred on top, we will now stop Odoo server and run it on our local as VueStorefront container is querying http://localhost:8069. OR you just use the http://localhost:8069/graphiql/vsf to test the endpoints you are creating.

# Stop Vuestorefront container only
$> docker-compose stop odoo
$> git clone --branch 16.0 --recurse-submodules https://github.com/odoogap/vuestorefront.git ~/test/vuestorefront-addons
# Activate Virtual Environment (I assume you have it already)
source ~/envs/16.0/bin/activate
# Run Odoo considering Odoo is cloned at ~/git/odoo/16.0
~/git/odoo/16.0/odoo-bin --addons-path ~/git/odoo/16.0/addons/,~/test/vuestorefront-addons -d v16_vsf -i graphql_vuestorefront

Check what happens inside Redis

If you want check what happens inside Redis, just use the following command:

# Redis
docker exec -it redis redis-cli
# You will get this prompt
127.0.0.1:6379> 
# Now try listing the keys (learn more at: https://redis.io/commands/ )
127.0.0.1:6379> keys *
Start Your Odoo Project Now


Check it out on Youtube

If you still have doubts just check our Youtube Video:

sales crm video

If you need help with your Vue Storefront project just reach out, we can help with both Odoo or Nuxt.js / Vue.js side.

Contact us!

Other articles



Top 5 Things to Know Before Starting with Odoo Accounting

Top 5 Things to Know Before Starting with Odoo Accounting

ERPGAP Proudly Achieves Odoo Silver Partner Status in the UK and US

ERPGAP Proudly Achieves Odoo Silver Partner Status in the UK and US

Five Major Pitfalls while Implementing Odoo ERP

Five Major Pitfalls while Implementing Odoo ERP

About us

Odoo is a management software that fits all sizes. This software is for small, medium and large companies. Your company's information is all in one place. You don't have to go back and forth to check something. All apps have real-time access to your database.

Tags tags