Skip to content

proustibat/xbks

Repository files navigation

xbks Greenkeeper badge

Fake e-commerce website with basical ES6 (transpiled with Babel via Webpack), Handlebars templates for components and Pug for pages, eslint, stylelint, scss-lint, travis, sonarcloud, codeclimate. Deployed with surge.sh.

Demo: http://xbks.surge.sh/

Development dashboard: https://github.com/proustibat/xbks/wiki/Dashboard

Prerequisites

Please be sure you have a "front environment" with yarn, npm, webpack, sass...

Installation

yarn install

Watching

yarn start

It runs your browser at http://localhost:8080/ then you could work on any source files.

Building

yarn build

It creates a dist directory with all you need to deploy.

Documentation

The generated documentation is available on https://proustibat.github.io/xbks/. You can run it manually with yarn doc:documentation command but Travis deploy it on Github Pages when pushing. It uses the 'deploy.sh' script. Read more about Documentationjs generator

Linters

yarn lint:all 

It runs 3 differents tasks: yarn lint:stylelint, yarn lint:js and yarn lint:scss. Respective configurations are in '.stylelintrc', '.eslintrc.js' and '.scss-lint.yml' files. Don't know what I mean ? Read Stylint documentation, ESLint documentationt and scsslint documentation.

Flow

A static type checker for Javascript. Run yarn run flow and yarn lint:flow if you wanna check your code is correct. A webpack plugin is included in the project that checks for you while you're watching sources. More about Flow here: https://flow.org/en/

CodeClimate

If Code Climate CLI is installed on your local machine, you can run yarn codeclimate:analyze to see what will be the result on the Code Climate dashboard of the project after you will have pushed on the github repo. The custom configuration is in '.codeclimate.yml' file.

Here are the status and the issues of the project:

Maintainability Issues

Sonarcloud

I use Sonarqube on Sonarcloud.io to keep my code safe. Check the dashboard here. Configuration file is 'sonar-project.properties'. You could run it manually if you have installed sonar-scan but I suggest you to let Travis do the job!

Here are some indicators of the project:

Travis

Configuration is in '.travis.yml' file. It install the right thingsm then run linters, build, sonar-can, deploy on surge. It should also run the tests if we had some! Here is the status of our dashboard:

Build Status

Deployment on Surge

You could manually run yarn deploy:surge but it's recommended to just push your work on master (or do a pull request) and then Travis will do the things for you! Note: this project is not deployed on Github Pages because of a restriction in requests: Github pages are in https but the project need to call http API, so browsers block. We can deploy on http with Surge. You don't know Surge? See the doc!

Contributing

Commitizen

If you wanna contribute to the project and create a pull request, use it by running git cz instead of git commit. Learn more about it here

Greenkeeper

It's a real-time monitoring and automatic updates for npm dependencies. If an update is available on our dependencies, it updates it on a specific branch and creates a pull request. Travis will then be triggered, if tests are passed the pull request can be accepted. Learn more about it here