react-typescript-starter

2019/07/16 - Redone all with new best practices. Removed all bad eslint rules etc. See diff at Github

This project aims to simplify starting project. It contains so much useful things which are, in my opinion, useful to get a really robust application.

It contains :

• Docker
• docker-compose
• eslint
• jest
• commitlint
• etc...

Docker

My Dockerfile is optimised to avoid useless build when no new dependencies were added, or when code did not update.

You can use the Makefile to build production app and run it

make build

make run

make build

This command will build project with default params. Built image will be named react-typescript-starter-starter and accessible port is 8080.

make run

This one will run an nginx serving static build and expose it to default port 8080.

docker-compose

I also included a docker-compose.yml file to ease up and down. To build and run development server simply run :

docker-compose up --build -d web

To build and run production server run :

docker-compose up --build -d web-prod

ESLint

I added custom plugins on top of initial ESLint configuration provided by create-react-app.

• eslint-plugin-prettier to ensure Prettier does not collide with ESLint rules

Prettier

Our code is automatically reformated when we save a file, or when we try to commit thanks to Prettier.

Final notes

Commands

You will find all available commands in package.json. Here the ones that you will use often :

• yarn start to start application if you don't use Docker

Lint :

• yarn lint:js to lint all application's JS files with ESLint. You can append --fix if you want autofix
• yarn lint:js:changed to lint ONLY changed JS files
• yarn lint:css to lint CSS-in-JS or CSS files
• yarn lint:css:changed to lint ONLY changed CSS-in-JS or CSS files
• yarn lint to lint all application
• yarn lint:changed to lint all changed application files

... All commands are listed in package.json and are pretty self-explanatory. So I won't list them all here, cuz' they all are important and useful.

Contributions

We also lint your commit names thanks to conventional-commits. If commit content or commit name is not valid, we will be rejected.

So it helps you to keep maintainable code