React boilerplate integrated with react-scripts, redux, redux-thunk, reselect, sugar, gridle and more...
- Complete build process using react-scripts
- Redux built-in
- Redux saga built-in
- Redux web worker built-in
- Redux thunk built-in
- Reselect built-in
- Styled component built-in
- Formik built-in
- Immutable state through Immer
- SSR (server side rendering) ready
- I18n ready through react-intl
- Sass support through node-sass
- CSS structure based on atomic design principles
- Code linting through ESLint and Stylelint
- Jest tests stack
- Automatically reject commits if tests and linting fail through pre-commit
- Storybook built-in
- Browsersync built-in
- Docker container configuration built-in
- CSSUA built-in
- Babel polyfill built-in
- Coffeekraken scripts stack built-in
- Coffeekraken sugar built-in
- Coffeekraken gridle built-in
Table of content
- Go to website
- Get Started
- Browsers support
- Code formatting
- Code linting
- Who are Coffeekraken?
If needed, install npm.
Run this command to start working as quickly as possible
npm run scss: Build the scss files in the src folder
npm start: Build/monitor src files using coffeekraken-scripts-stack, start the http server as well as the browsersync one
npm start-react: Start the react-scripts process that will build and serve the dev application
npm run build: Build the react prod application using the react-scripts CLI
npm run build:server: Start the prod server to serve the build folder
npm run build:ssr: Start the SSR server. A build has to be done before
npm run build:favicon: Generate the favicons from the
npm run build:favicon:inject: Inject the favicon code inside the
npm run eject: Eject the configs from react-scripts
npm run browsersync: Start the browsersync service on port
npm run storybook: Start the storybook service on port
npm run test: Run the tests
npm run pretty-quick: Run prettier on the entire project
npm run pretty-quick-commit: Run prettier on staged filed
npm run lint: Run the linters
npm run lint:js: Run the Js linter
npm run lint:css: Run the css linter
npm run messages:extract: Extract the messages from all the
messages.jsfiles up to the translations folder
npm run samples:remove: Remove the samples data, containers, etc... to let you start with a clean boilerplate
IE / Edge
|IE11+||last 2 versions||last 2 versions||last 2 versions|
As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.
Your code will automatically be formatted using Prettier when you commmit your files.
This boilerplate uses some code linting rules. Here's the list:
- ESLint with airbnb, react-app, prettier and
- Stylelint with stylelint-config-standard for
Your commits will not been accepted if the code style is not respected!
This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:
Who are Coffeekraken
We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.
The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...