/kranos

Scratch build of a react project without using CRA.

Primary LanguageJavaScript

Build Status Commitizen friendly code style: prettier

Kranos

Kranos is a beginning of using Webpack 4 with React without using the Create React App.

Kranos is hard. Kranos sucks and now I know why people would rather just use Create React App. However businesss is hard. And things need to be like Kranos more often than Create React App.

You will need..

  • A computer (MacOS, Linux or Windows)
  • Terminal or Git Bash for Windows
  • Node.js, LTS version preferred
  • GIT
  • IDE or Text Editor (VS Code, WebStorm, Sublime Text, Notepad...etc)

Some helpful plugins for the text-editor

Some reading

Questions


Why NPM instead of YARN?

Personally doesn't matter as long as you use one package manager and only one. Dependacies can get awful during updates when you have more than one package manager. I chose NPM because it has made great strides in keeping open source community engadged. And was pushed to improve with the new kid YARN on the block

Why use Airbnb instead of (insert styleguide/creating own)?

Well documented, explains every reasoning behind rule set from React perspective and I grew tired of recreating the wheel and bikeshedding discussions. We should just code and let the machine do the formatting for us. Combined with Prettier it becomes easy to just jump in

Why Travis CI?

Incredibly easy to integrate with public coding using Github. Very well could use Jenkins to do the same but with less than a couple hours using Travis CI and can leverage multiple directions after CI for FED code

To get started, clone the project and run

npm install -g commitizen

then

npm install

To run the project from root

npm run start

To run unit tests

npm run test

To build production code

npm run build

To commit code use command

git cz

I removed the forced JIRA ticket reference for Commitizen until a JIRA project becomes necessary. If that is the case you can add these lines into the package.json file

"validate-commit-msg": {
  "types": [
    "feat",
    "fix",
    "docs",
    "style",
    "refactor",
    "perf",
    "test",
    "chore",
    "revert"
  ],
  "warnOnFail": false,
  "maxSubjectLength": 100,
  "subjectPattern": "^[A-Z]+-[0-9]+ - .*",
  "subjectPatternErrorMsg": "Subject must be in format 'CMS-123 - Commit message'",
  "helpMessage": ""
}

Things for the future

  • integrating e2e testing framework that is cross browser
  • react dependacies like routing/state manager