ronak301 / turf

Typescript boilerplate 🔥

Create React App v2 with modifications.

Mentionable features

• Typescript
• Redux, reselect & redux-observable
• Sentry
• Jest together with @testing-library
• Cypress
• Prettier & eslint based on Airbnb config (with some modifications)
• Lazy load router routes
• CSS modules with Sass
• react-helmet
• Service worker
• Absolute paths
• Portals
• Lodash
• reselect
• classnames

Usage

Recommended node version is defined in .nvmrc.

• yarn install - Install packages
• yarn start - Start development server on port 8080
• yarn build - Build project to the build folder
• yarn serve - Serve the build folder on port 9090
• yarn analyze - Analyzes build JavaScript bundles using the source maps
• yarn jest:run - Run application with Jest
• yarn jest:watchAll - Watch files for changes and rerun all tests when something changes with Jest
• yarn cypress:open - Open Cypress test runner
• yarn cypress:run - Run Cypress tests to completion
• yarn cypress:start - Start development server together with cypress:open
• yarn cypress:ci - Continuous integration together with cypress:run
• yarn prettier:report - Report any prettier issues
• yarn prettier:fix - Fix any prettier issues. Prettier is added to eslint, so we recommend to run yarn eslint:fix
• yarn eslint:report - Report any eslint issues
• yarn eslint:fix - Fix any eslint issues

Component lifecycle

You should look at a component as its own lifecycle. Everything about it should be wrapped in the same folder, where the folder name is the components name, and then return itself. This is the structure and files that could/should be included:

.
├── components
│   └── ...
│       ├── Example
│       │   ├── Example.module.scss   # Styling
│       │   ├── Example.test.tsx      # Testing
│       │   ├── Example.tsx           # Component
│       │   └── index.ts              # Exports component
│       │   ...
│       └── index.ts                  # Exports every component within the folder
└── ...

React

Since React 16.8 we have a new way of writing components and you should adapt to this. So skip class components and use hooks instead.

Use Lighthouse to make sure the application has a good Auditing Performance.

Redux

Using ducks-modular-redux with a small modification, just skip to prepend your constants with my-app.

Service worker

The service worker is transformed into a component.

Why? Because we want to be able to inject a "New content is available" modal where it's possible to force reload the page.

Without this modal the user has to force reload the page themself or close all tabs with the current page.

Styling

The application should be created with a Mobile First architecture. This is very important, so make sure to respect it.

Styling folder is based on ITCSS architecture. Colors, font sizes, spacings etc. are defined in _variables.scss, so make sure to use these. This will make the application scalable and consistent.

Specific component styling should not be created within the styling folder. Instead it should be a .scss file that's a sibling to the component, look at Component lifecycle above for better understanding.

A grid system is defined in _grid.scss and works very well with _gutters.scss. The grid and gutter system uses BEM methodology.

Make sure to use the mixin within _respond-to.scss when you're styling for various breakpoints. Breakpoints are then defined in _variables.scss. Follow this and the application will be consistent.

All reusable font styling should be appended in the $font-styles map within _variables.scss. This way elements can share styling without having to rewrite it every time and it's easy to make global changes. Read description of usage in _variables.scss above the definition of $font-styles. So is it okay to add background-color: #123456; to an element within this $font-styles map? No. It should only contain fundamental text and font styling.

Environment variables

You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name.

Browser support

Supported browsers are defined in .browserslistrc together with IE11 polyfills in ./src/index.tsx.

Read more

You can learn more in the Create React App documentation.