ts-basic

* [React](https://facebook.github.io/react/) - A JavaScript library for building user interfaces * [Redux](https://github.com/reduxjs/react-redux/) - Redux is a predictable state container for JavaScript apps. * [TypeScript](https://www.typescriptlang.o

Usage no npm install needed!

<script type="module">
  import tsBasic from 'https://cdn.skypack.dev/ts-basic';
</script>

README

ts-basic

Tech stack

  • React - A JavaScript library for building user interfaces
  • Redux - Redux is a predictable state container for JavaScript apps.
  • TypeScript - is a typed superset of Javascript
  • React Router - React Router id declarative routing for React
  • Webpack - module bundler
  • SASS - CSS with superpowers

Git Workflow

Current project is following to next Git workflow:

Git Workflow

  • develop - this is the mainline branch that will be ongoing.
  • feature - these branches will be used to develop tasks/features and should be clearly marked with the bug id and relevant to a feature within Jira.
  • master - this is protected branch and it will be deployed to production
  • hotfix - these branches will be used to hotfix issues on production. Must be merged to master and develop branches

Branch Naming Convention

  • Features - feature branches should be named as feature/issue-id (eg. feature/LUK-123). If feature doesn't have an issue associated with it, use lowercase words separated by minus "-" (eg. feature/optimize-build-performance)

  • Bugs/Defects/Issues - issue branches should be named as issue/issue-id (eg. issue/LUK-123). issue branch MUST contain issue id.

Commit Message Convention

Commit messages should include issue number with title in a first line together with description followed by an empty line and explanation of what was done

ID-123 This is issue title

* updated something
* fixed tests

Commit/push process

For running "pre-commit/pre-push" hooks is responsible husky

Commit process

  • git commit will be intercepted by husky
  • "husky" will run lint-stage commands
  • "lint-stage" will run linters on git staged files
  • "css/scss" files will be processed by npm run stylelint:fix
  • "ts/js/json/md/scss/css" files will be processed by npm run pretty-quick
  • "ts/tsx" files will be processed by npm run lint:fix

For DevOps

Build application. Commands for pipelines

To build an application run npm run build as a result you receive next structure:

├── dist
|   ├── index.html
|   ├── report.html
|   ├── main.css
|   ├── main.bundle.js
|   ├── main.bundle.js.LICENSE
|   ├── x-lp-icon.png
|   └── images
|       ├── some-img-1.png
|       ├── ...
|       └── some-img-n.png

To run lint "ts/tsx" files: npm run lint To run lint "css/scss" files: npm run stylelint To run tests: npm test

Build "Storybook" - UI components library

To build "storybook" run storybook:build. All static files will be placed under "storybook-static" directory

Nodejs & npm required versions

{
  "engines": {
    "node": ">=10.0.0",
    "npm": ">=6.7.0"
  }
}