Scalable starter boilerplate for React applications
Opinionated React starter template using TypeScript, Redux, React Router, Redux Saga, SCSS, PostCSS and more, offering PWA and offline capabilities and many more.
In order to use this setup you need to have installed the following dependencies:
npx create-react-app-ts && yarn && yarn start
Just a quick note: You should manually create a .gitignore
file if you plan on keeping your project in Git.
You can download this setup directly and extract it.
Then navigate to the react-template-ts
folder and proceed with the rest of the instructions.
yarn
# or
npm i
yarn start
# or
npm start
yarn build
# or
npm run build
yarn lint
# or
npm run lint
yarn test
# or
npm run test
Folder structure:
📦 project
┣ 📂 assets - all fonts, images, videos, translation files, etc
┣ ┣ 📂 locale - all translations
┣ ┣ 📂 styles - all shared stylesheets
┃ ┃ ┗ 📜 app.scss - Application's global SCSS entry point
┃ ┃ ┗ 📜 mixins.scss - Application's SCSS mixins
┃ ┃ ┗ 📜 functions.scss - Application's SCSS functions
┃ ┃ ┗ 📜 settings.scss - Application's SCSS settings (variables, etc)
┣ 📂 components - stateless components
┣ 📂 containers - statefull components. Each container can export more than one component. An example folder structure is included in (`src/containers/.boilerplate`)
┣ 📂 i18n - configuration settings for i18n (internationalization)
┣ 📂 store - The application Redux store
┣ ┣ 📂 branches - all store branches
┣ ┣ ┣ ┣ 📂 $BRANCH - A branch in the Redux store
┃ ┃ ┃ ┗ 📜 enums.ts - Each branch has its own enums
┃ ┃ ┃ ┗ 📜 interfaces.ts - Each branch has its own interfaces
┃ ┃ ┃ ┗ 📜 reducer.ts - The branch reducer
┃ ┃ ┃ ┗ 📜 selectors.ts - The branch selectors (hooks)
┃ ┃ ┃ ┗ 📜 sagas.ts - The branch sagas
┃ ┗ 📜 enums.ts - Store's enums
┃ ┗ 📜 index.ts - Application's main store
┃ ┗ 📜 interfaces.ts - Store's interfaces
┃ ┗ 📜 root-reducer.ts - Application's root reducer
┃ ┗ 📜 sagas.ts - Application's sagas
┣ 📂 utilities - helpers and utility functions
┗ 📜 app.tsx - Application's main component
┗ 📜 custom.d.ts - Custom type definitions
┗ 📜 index.html - Application's HTML file
┗ 📜 index.tsx - The main entry point
┗ 📜 loadables.tsx - Code split and lazy loaded components
Latest EcmaScript support
Aliases: Checkout the aliases property in the vite.config.ts
and tsconfig.json
files.
SCSS usage.
Lint your files: ESLint (with TypeScript ESLint installed and configured) and Stylelint included
Tests using Jest and React testing library. The Test environment has been configured so you don't have to
PWA ready - Install as a native app on Android and iOS
Code splitting and lazy loading
i18n included:
/src/i18n/locales
translations.pot
file located in /src/assets/locale
yarn locale
to generate ${locale}.json
file from your ${locale}.po
file.Prerendering - All pages are prerendered based on defined routes. This is included in the build step and needs no additional configuration.
This setup uses Browserslist to target browsers.
The default list of supported browsers is listed in the package.json
file:
{
"browserslist": ["> 1%", "last 2 versions"]
}
This means that supported browsers vary based on current usage data and current browser versions.
In general, this setup supports the two most recent versions of all browsers.
The start template contains a ready-to-use auth flow with Login, Logout, Sign up and Forgotten password forms with validation included. The auth flow includes also route guarding and redirects based on auth status. Please take a look at the /src/containers/auth
folder for more details.
The starting files also include ready-to-use layout components such as Header
, Footer
, Wrapper
, Button
, Icon
and form Field
s.
MIT