React Webpack Typescript Seed project

Seed project building React apps with Typescript

What you need to do to start working

git clone https://github.com/slizlaszlo/webpack-ts-seed.git
cd webpack-ts-seed
npm i
npm run start

Note: (maybe) you will need to install the typedoc package globally for documentation generation:

npm i -g typedoc

Currently it works fine if you clone the repo from Github.

I'm working on the command line install script.

Important!

Please follow the Conventional Commits rules when contributing!

Main modules used in the seed

• Typescript
• Webpack
• Webpack-Dev-Server
• TSLint
• Jest
• Ghooks
• Conventional Commits
• React.js
• React Testing Library

Webpack Dev server setup

Create a copy of the .env.example, rename it to .env and set the HOST in the file to your preference. (Note: wrong domain can cause issues in the browser during the API requests.) The webpack-dev-server loads the .env a file and uses the HOST and HTTPS values from it. This file added to the gitignore, so it won't be pushed to the repo. It should look like this:

HOST = "your.preferred.domain"
HTTPS = true

This extra configuration isn't required, it's just an option.

CLI scripts for build, run, test

Use these in your CLI to build or run the project:

npm run +

• start to start the webpack development server and start watching the source files
• build to start watching the source files without webpack dev server
• dev to create a development build
• prod to create a production build
• test to run all registered unit tests
• tslint run tslint from CLI
• gen-cov generate code coverage report
• open-cov open the generated coverage report in chrome
• cov generate and than open the code coverage report in chrome
• validate run the test and tslint scripts
• gen-doc run the typedoc document generator
• open-doc open the generated document
• doc run the typedoc document generator and open the generated document
• release update the CHANGELOG.md based on the commit messages

Linting

The webpack using the tslint-loader which checks the ts source files for linting issues and will block the compilation if it founds an error.

Testing

Test web application

You can create a test application in the sdk/test folder and when zou run the npm run build command all of those will be copied into the dist folder also.

Unit test

Jest integrated into the project: create test files next to the module files with an extra test notation, e.g.: name.test.ts and than run the npm test or npm t script.

Run npm run test-watch to enable watch mode for jest.

Code coverage

Generated by Jest, it uses Instanbul reporter under the hood. Coverage treshold can be set in the jest.config.js, currently it is set to 50%.

Commenting

Convention

Automated changelog generation is applied to the project, please create your commit message as the convention needs it!

Comments should be structured like this:

<type>[optional scope]: <description>

[optional body]

[optional footer]

Linting

Commitlint is used to check if the commit message follows the convention, the commit will fail if the linter founds an error.

Ghooks

Git hooks used to check the commit with TSLint and Commitlint and blocks the commit if either linting fails.

Style

Autoprefixing

No need to write vendor prefixes in CSS/SCSS files because the build tool chain uses postcss loader and autoprefixer to give the prefixes autimatically during compile time.

Linting

The project configured to use the Stylelint webpack plugin to lint the SCSS files.