create-react-app is a great toolkit. It removes a lot of boilerplate to manage. Though, a few features are not shipped by default because each developer has different needs.
If you tend to use the same kind of configuration / devDependencies accross all of your create-react-app based projects, there isn't a perfect solution. This project is an attempt to fix this problem and share it with you.
What's in it ?
I added the specific configuration / devDependencies I tend to use on my projects, such as:
- 9c0fa1b eslint with advanced rules such as config-airbnb + prettier with precommit hook
- b2a4026 local test server
- 74d81b2 setup build metadatas in
generate-changelognpm run task
- f69bb96 setup default
- 0f2c3d6 add
Each feature added can be identified by its commit, if you want to repeat only one of the steps on your own project.
This configuration has been inspired by topheman/npm-registry-browser, a project where I use all of the above (and more).
This remains an un-ejected create-react-app project, which means that you can:
- customize or remove any of the features added
- Nodejs v8
- npm v5
git clone https://github.com/topheman/my-react-app-starter.git cd my-react-app-starter npm install
npm run build
Will build a production version of the website in the
Once you've built you're app, you can test the build on a local server with:
npm run serve
The following command will run all your tests in a single run mode.
npm run test:unit: single run of the unit tests
npm run test:unit:watch: run the unit tests in watch mode
End to end
No end to end test configured yet.
I use eslint to check the coding style, with the following presets:
- eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
- eslint-config-react-app: Shipping preset from create-react-app
The following command will run the linter on your code base. This task is ran at pre-commit to ensure code quality.
npm run lint
Prettier is a great tool that enforces a consistent style accross your code base (usefull when working in teams).
Once it's done, when you'll save a file, it will reformat it.
The following command will let you format your code base. This task is ran at pre-commit.
npm run pretty
To have uniform commit messages, I follow the AngularJS git commit guidelines, please take a look at it. I helps generate changelogs:
npm run generate-changelog -- v1.1.0 v1.2.0
Continuous Integration (CI)
This part is optional. A .travis.yml file is ready to use.
git push triggers a test suite on travis. The following will be ran:
- unit tests
One of the following npm task will take care of the testing according of the commit:
- For PRs:
npm run test:travis:prTravis CI doesn't share env vars on PR builds (this is so that your build would not fail if you were using those vars)
- For other types of commits:
npm run test:travis
You can use github-pages to host your project. All you need to do is to push your build on a
gh-pages orphan branch, your project will be accessible at
npm run deploy
The demo of this website is hosted at topheman.github.io/my-react-app-starter.