loopstudio / react-app-boilerplate

A boilerplate for React applications

An opinionated boilerplate code for starting a new react web project.

_{Created and maintained with ❤️ by LoopStudio}

Table of Contents

• Project Structure
• Features
• Prerequisites
• List of Packages
• Recommended Extensions
• Getting Started
• Running the Test Suite
• Contributing
• Credits

Project Structure

.
├── .github/
├── public/
├── src
│   ├── assets/
│   ├── features/
│   ├── helpers/
│   ├── store/
│   ├── testUtils/
│   ├── index.js
│   ├── serviceWorker.js
│   ├── setupTests.js
│   └── theme.js
├── .env
├── .gitignore
├── .eslintrc
├── .prettierrc
├── CONTRIBUTING.md
├── jsconfig.json
├── LICENSE
├── netlify.toml
├── package.json
├── README.md
└── yarn.lock

Feature Structure

├── features
│ └── myFeature
│   ├── components/
│   ├── hooks/
│   ├── layouts/
│   ├── locales/
│   ├── pages/
│   ├── services/
│   ├── actions.js
│   ├── reducer.js
│   ├── types.js
│   └── index.js

What does a feature export?

A feature should export anything that is meant to be consumed from outside the feature IE:

• actions
• reducer
• components (if they're meant to be used outside the feature)
• hooks (if they're meant to be used outside the feature)
• helpers (if they're meant to be used outside the feature)

Component Structure

├── MyComponent
│ ├── index.js
│ ├── MyComponent.js
│ ├── MyComponent.styles.js
│ ├── MyComponent.test.js

Optional

If you want to split your component into pieces for readability, maintainability, or any other reason you could put the secondary components in the same folder. This is only for cases where these secondary components are only used inside MyComponent. If later they want to be used in other places they should be extracted to their own folder inside components.

├── MyComponent
│ ├── index.js
│ ├── MyComponent.js
│ ├── MyComponent.styles.js
│ ├── MyComponent.test.js
│ ├── SecondaryComponent.js
│ ├── SecondaryComponent.styles.js

Features

1. Based on create-react-app.
2. Code splitting and prefetching.
3. Errors handling.
4. The httpClient provides status code errors handling and camelCase to snake_case automatic conversion.
5. Async actions and store hydration.
6. Internationalization.
7. Concurrent Mode ready.
8. Absolute imports.
9. Environment-specific settings provided through the built-in environment variables system provided by CRA.

Prerequisites

1. Install Node.js 10.16.3 or greater.
2. Install Yarn as a package manager.

List of Packages

State management

• redux: the state management solution.
• react-redux: provides an easy way to connect the React components to the store.
• redux-persist: persists the user session data in the localStorage.
• redux-promise-middleware: handle async actions and side effects.
• redux-thunk: as a power-up for the 'redux-promise-middleware'.
• redux-devtools-extension: useful tool for debugging.

Immutability helper:

• immer: provides an easy way to work with immutable state.

API Requests:

• axios: HTTP client.
• axios-case-converter: axios interceptor that converts snake_case/camelCase.

Routing:

• react-router-dom: the most popular and powerful routing solution for React.

Type checking:

• prop-types: Runtime type checking for React props and similar objects.

Datetime:

• dayjs: A minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. This tool isn't installed in our project, but we recommend to use it, you can install it running yarn add dayjs.

Testing:

• jest: a delightful JavaScript Testing Framework with a focus on simplicity.
• react-testing-library: a very light-weight solution for testing React components.
• nock: HTTP server mocking and expectations library for Node.js
• cypress: automated integration tests. This tool isn't installed in our project, but we recommend to use it. You can install it running yarn add cypress --dev. For more information about the configuration, you can read this guide
• storybook: when your app is going to have a set of components that you want to manual test on isolation you should consider Storybook which is not installed on our project but you could simply do so by running npx sb init. After running that command you must check out its many addons that will improve your experience using this tool.

Styling:

• emotion: Provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
• font-awesome: A comprehensive icon library. Currently, the free version of Font Awesome is added by default to the boilerplate. To upgrade and use the pro version sign in to your Font Awesome account and follow the instructions on this link. Imported icons are encouraged to be stored in assets/icons, and invoked as a string in each component.

Deployment:

• netlify: "The fastest way to build the fastest sites". We recommend Netlify as a hosting solution. The free plan is very generous and meets the basic needs of any standard project. Also, it is dead simple to set up and use. For more information, you can dig into the official docs.

Error Monitoring:

NOTE: These tools are not enabled by default. For instructions on how to set them up, please visit their respective vendor website

• sentry: Sentry provides self-hosted and cloud-based error monitoring that helps all software teams discover, triage, and prioritize errors in real-time.
• sentry + logrocket: Add a LogRocket session recording URL to every Sentry exception report. The integration of both of these tools allows us to access a video recording of the exact moment a user encountered an error including network events and console output.

Recommended Extensions

Style / Linting

VSCode:

• Prettier - An opinionated code formatter.
• ESLint - Integrates ESLint into VS Code.

Sublime:

• Prettier - JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter.
• ESLint - ESLint any JavaScript file in Sublime Text.

Intellisense

VSCode:

• Visual Studio IntelliCode - AI-assisted development features.
• Path Intellisense - Visual Studio Code plugin that autocompletes filenames.
• npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements.

Sublime:

• SublimeCodeIntel - Full-featured code intelligence and smart autocomplete engine.
• AutoFileName - Sublime Text plugin that autocompletes filenames.

Version Control

VSCode:

• Git Blame - See Git Blame information in the status bar for the currently selected line.

Sublime:

• Git Blame - Show Git blame information while viewing a file in Sublime Text.

Syntax Highlighting

VSCode:

• DotENV - A port of DotENV for VSCode.
• Color Highlight - This extension styles CSS/web colors found in your document.
• VSCode Styled Components - Syntax highlighting and IntelliSense for styled-components or emotion.

Sublime:

• DotENV - SublimeText Syntax Highlighting support for Environment (.env) Files
• Color Highlight - 🎨 Lightweight Color Highlight colorizer for Sublime Text

Snippets

VSCode:

• ES7 React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VSCode.

Sublime:

• ES7 React/Redux/GraphQL/React-Native snippets - Sublime ES7 React/Redux/React-Native/JS snippets.

Getting Started

1. Clone this repository and navigate to the folder.
2. Install all dependencies by running the yarn install command in the root directory.
3. Modify the environment variables files in root folder(.env.dev, .env.staging and .env.prod).
4. Start the dev server: yarn start command.

Running the Test Suite

1. Run the yarn test command.

Credits

React App Boilerplate is maintained by LoopStudio.