You might wonder why VueStoreFront and headless e-commerce are being discussed on the Hungarian ERPNext and Frappe blog. I’m writing about it because I not only consider the entire headless technology very innovative, but it seems that, as I mentioned in previous posts, ERPNext and Frappe developers also like it and are exploring this direction. That’s enough about VueStoreFront and its advantages. Let’s see how to set up a VueStoreFront developer environment in a Debian 11 virtual machine. (Disclaimer: there might be more suitable systems for development, but the Chromebook I use comes with this system, making my life easier. The Chromebook deserves another blog post, or maybe more, which I’m also preparing, but let’s get back to setting up the VueStoreFront developer environment.)
Since the required software versions are not available in the Debian 11 repositories, we need to download some of them.
sudo curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
source ~/.bashrc
nvm install node
nvm install --lts / nvm install 18.14.2 / nvm install 16.13.0
The last line is enough, as we use version 18.x for the current test project:
nvm use 18.14.2
Install npm:
nvm install-latest-npm
Install yarn:
npm install --global yarn
Don’t forget about environment settings if you have any. After turning off/restarting the virtual machine, you need to add them again, e.g.:
export NODE_OPTIONS=--openssl-legacy-provider
Set up the project in the appropriate git directory/branch:
yarn
yarn dev
After this, the VueStoreFront e-commerce store webpage is accessible by default at the following address:
http://localhost:3000/
You might need these two commands if something doesn’t work due to version issues:
node -v
npm rebuild node-sass
rm -rf node_modules/