ERPGAP Blog / Vuestorefront - Setting up your development environment

Vuestorefront - Setting up your development environment

Setting up your development environment with Vuestorefront and Odoo

Posted 20 June 2023 by Diogo Duarte

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 *