We put together this storefront to get designers & developers creative juices flow, this store is fully functional, you can switch out the API keys and start using this store in the wild.
This storefront was developeed ontop of our Vuejs Boilerplate (https://github.com/chec/commercejs-vuejs-boilerplate).
Uses:
- Vue.js
- Tailwind
- Tilt.js
- Confetti.js
- Commerce.js
Clone the git repo into the folder of your choice - git clone https://github.com/chec/example-unnecessary-storefront.git
Alternatively, you can download the project as a zip file to your computer.
Simply run npm install or yarn install if you use Yarn Package Manager from the root of your project folder. This will install all the necessary packages required to run the boilerplate.
This demo ships with an example.env file that you will need to copy and fill with your Commerce.js credentials.
First create a copy of the example.env file named .env in the root of your project. You can do this by running cp example.env .env in the root folder. The .env will look something like this:
NODE_ENV=local
VUE_APP_CHEC_PUBLIC_KEY={YOUR_API_KEY}
VUE_APP_CHEC_API_URL=https://api.chec.io`
Add in your Commerce.js public API key which can be found in the developer's settings of the dashboard.
To aid in building your site, this boilerplate ships with a development environment which supports hot-reload on save. Run npm run serve or yarn serve from the root of the project. After it has compiled, you will be able to view the boilerplate in your browser by visiting http://localhost:8080/#/.
When you are ready to ship your project, simply run npm run build or yarn build from the root of your project. This will create a production ready version of your project.
At this point you should have the project fully up and running ready for you to add your theme or custom integrations. We look forward to seeing what you come up with!
Join us on Slack with other eCommerce developers and designers.
