jbelke / commercejs-vuejs-boilerplate

Commerce.js boilerplate, built with Vue.js, for fast eCommerce development and design

Introduction

This boilerplate was developed to help developers build quick eCommerce sites in the Commerce.js ecosystem. Included is a complete, unstyled, product listing, cart, and checkout workflow to aid in fast and easy development using the Vue.js framework.

Features

• Listing page view for your products.
• A complete cart that calculates totals and allows for editing and removing products.
• Fully featured checkout with Shipping and Tax calculations.
• Thank you page template.
• 404 page template

Installation

Download

Clone the git repo into the folder of your choice - git clone https://github.com/chec/commercejs-vuejs-boilerplate.git

Alternatively, you can download the project as a zip file to your computer.

Project setup

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.

Copy example env and add Chec credentials

This boilerplate 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.

Working with the boilerplate

Compile and hot-reload for development

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/#/.

Compiles and minifies for production

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.

Lints and fixes files

npm run lint or yarn lint to run the linter. You can configure the linting rules via the eslintConfig field in the package.json file.

See the ESLint documentation for further detail.

Customize configuration

See Configuration Reference.

Whats next?

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!

Additional Resources

Join us on Slack

Join us on Slack with other eCommerce developers and designers.

Documentation

Commerce.js SDK Docs.
Commerce.js API Docs.

Examples

Styled boilerplate demo