Just clone the repo with git clone https://github.com/Kamahl19/react-starter.git or click on "Use this template" button above.
Master branch is always passing CI build and it's deployed online at https://react-starter-ts.netlify.com
Once you start building your own app on top of React Starter you will probably want to keep up-to-date with the new updates of React Starter. This can be easily achieved by tracking the latest commit hash of React Starter you use. We suggest this process:
- When you clone the React Starter repo, don't forget to write down the hash of latest master's commit
- Every once in a while, compare the version of React Starter you used with the current version of React Starter like this
https://github.com/Kamahl19/react-starter/compare/{YOUR_LATEST_REACT_STARTER_COMMIT_HASH}...master - Go through the diff and apply the changes in your own app
- Commit these changes into your own repo with this commit message:
Updating to React Starter hash: {LATEST_REACT_STARTER_COMMIT_HASH}. This way you always keep the hash of the React Starter's version you currently use in your app
- TypeScript - a typed superset of JavaScript
- create-react-app - create React apps with no build configuration
- Ant.Design - a UI library
- Storybook - a development environment for UI components with a11y, actions, knobs, viewport and router addons
- JWT Authorization - including all the common features such as Sign-up, Login, Logout, Forgotten password, Email verification
- axios - promise based HTTP client
- i18next - an internationalization framework
- i18next scanner - scans the code, extracts translation keys/values and produces i18n resource file
- LESS - dynamic stylesheet language
- redux - a state container
- redux-saga - a side effect model for Redux apps
- reselect - selector library for Redux
- redux-persist - persist and rehydrate a Redux store
- redux-logger - logger for Redux
- redux-auth-wrapper - a HOC for handling Authentication and Authorization
- redux-devtools-extension - DevTools extension for browser
- redux-immutable-state-invariant - detects mutations in Redux store
- typesafe-actions - action creators with type-free code
- react-router - declarative routing
- connected-react-router - Redux binding for React Router
- oaf-react-router - an accessible wrapper for React Router to set proper scroll position & focus
- react-promise-tracker - tracking of in-progress promises
- prettier - opinionated code formatter
- ESLint - pluggable linting utility
- husky & lint-staged - run ESLint & Prettier before commiting new code
- CI/CD - Github Actions to run integration tests on each PR & Master branch and Netlify to deploy each PR & Master branch automatically
- source-map-explorer - analyze and debug space usage through source maps
- dotenv - loads environment variables from an
.envfile - react-app-polyfill - polyfill for IE11 and stable browsers defined with
browserslist
To run app locally, run yarn start in app root directory. react-scripts will start web server in the development mode at http://localhost:3000 (or first next free port).
All the Auth functionality such as Sign-up, Login, Reset password etc. requires a backend app. You can either write your own or use the Node API Starter which works with React Starter out of the box.
To build the app for production, run yarn build in app root directory. Your app is then ready to be deployed! See the create-react-app Deployment docs for more information.
Run yarn test to launch the test runner in the interactive watch mode. See create-react-app Tests docs for more information.
-| .github/: GitHub workflows for CI/CD
-| public/: Public assets
-| src/
|--| app/: Main application (framework) files.
|--| common/: Base components, services, utils, rules, enums etc. used in the whole app.
|--| features/: Features bundled into separate modules including components, screens, ducks, apis etc.
|--| index.tsx: application entry file
-| storybook/: Storybook configuration and addons.
This project uses Prettier, an opinionated code formatter. In order to format code manually, run yarn format in app root directory. All the code is also formatted automatically on pre-commit hook. There is also yarn format-check for CI purposes to check if code is formatted properly.
Project comes with ESLint configured. It helps you prevent common errors.
There are multiple ways how to run ESLint.
- CLI:
yarn lint - in browser console while developing (after running
yarn start) - it runs automatically on
pre-commithook - in IDE if supported (Visual Studio Code supports reports)
We suggest developing components in isolation. For this reason, project comes with Storybook pre-configured.
To run separated development environment, run yarn storybook which will start dedicated web server at http://localhost:9009.
To build static storybook, run yarn storybook:build. This creates a static webpage which you can deploy and showcase your components to others.
More information about supported features can be found in Storybook's Github repository
Running yarn extract-translations will update alphabetically sorted JSON files with key-translations pairs. It will use default messages for keys without explicit translations.
Project comes with the source-map-explorer which analyzes the production JS bundle. To use it just run yarn analyze.
Project comes with the default Renovate config renovate.json. It takes care of automated dependency updates and it's free for open-source projects. More about how to configure here.
This project is using GitHub's Actions to run integration tests on each PR and Master branch. It includes running eslint, prettier, tests and building the app. PR becomes mergable only if it passes. We also show badge on top of README.md to show Master branch status. If you don't use GitHub you can remove the .github folder, otherwise follow these steps to configure your GitHub repository:
- Go to Settings -> Branches -> Add rule
- Apply to your master branch
- Require status checks to pass before merging
- Select build checks being run in CI.yml
- Update path to your repository (eg.
Kamahl19/react-starter) and name of the branch for CI badge inREADME.md
This project is using Netlify to deploy each PR and Master branch automatically. If you don't use Netlify you can remove the netlify.toml file, otherwise follow these steps to setup Netlify:
- Follow Netlify's instructions
- Update Netlify status badge in
README.mdaccording to these instructions
This project is built on top of create-react-app with many more usefull guides.
This is open source software licensed as MIT.
