Skeleton for React & Redux Apps written in TypeScript (with integrated SASS, ESLint, Prettier, and Husky)
Skeleton for React & Redux Apps written in TypeScript (with integrated SASS, ESLint, Prettier, and Husky)
This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template.
Our main purpose with this Skeleton is to start frontend application with react with redux toolkit and typescript.
Try it!! I am happy to hear your feedback or any kind of new features.
react
, @types/react
react-dom
, @types/react-dom
typescript
axios
react-redux
, @types/react-redux
react-scripts
sass
serve
https://github.com/santoshshinde2012/react-redux-typescript-boilerplate.git
npm install
npm run start:dev
.env.{environment_name}
) - .env.development
REACT_APP_{variable_name}
) - REACT_APP_APPLY_ENCRYPTION
All the different build steps are orchestrated via npm scripts.
Npm scripts basically allow us to call (and chain) terminal commands via npm.
This is nice because most JavaScript tools have easy to use command line utilities allowing us to not need grunt or gulp to manage our builds.
If you open package.json
, you will see a scripts
section with all the different scripts you can call.
To call a script, simply run npm run <script-name>
from the command line.
You'll notice that npm scripts can call each other which makes it easy to compose complex builds out of simple individual build scripts.
Below is a list of all the scripts this template has available:
Npm Script | Description |
---|---|
build |
Full build. Runs ALL build tasks |
build:prod |
Full production build. Runs ALL build tasks |
start:dev |
Run the application in dev mode |
start:prod |
Run the application in production mode |
start:staging |
Run the application in staging mode |
build:css |
Build the css for production environment |
lint |
Runs ESLint on project files |
lint:fix |
Runs ESLint on project files and fixed the auto fix issues |
format |
Runs the file formatter |
test |
Runs tests using Jest test runner |
test:coverage |
Runs tests to check code coverage |
Name | Description |
---|---|
wiki/ | You can add project documentation and insructions file here |
src | Contains your source code that will be compiled to the build dir |
src/environments/ | Environment Files |
src/components/ | UI Components |
src/pages/ | We can also call this "features" if we break the pages based on what will be served in the browser |
src/resources/ | Constant Variables such as images and strings |
src/routes/ | Routing Configuration |
src/store/ | Contains slice and hooks |
**src/store/${page-name}/slice.ts | Contains slice configuration {state, action and reducers} |
**src/store/index.ts | Entry point for store configuration |
src/styles/ | SASS styles |
src/utils/ | Reusable utlity like api http client |
src/index.ts | Entry point to your frontend app |
package.json | File that contains npm dependencies |
tsconfig.json | Config settings for compiling server code written in TypeScript |
.eslintrc.json | Config settings for ESLint code style checking |
.eslintignore | Config settings for paths to exclude from linting |
prettierrc.json | Config settings for Prettier code format checking |
.prettierignore | Config settings for paths to exclude from formatting |
.vscode | Contains VS Code specific settings |
.github | Contains GitHub settings and configurations, including the GitHub Actions workflows |
.husky | Contains Husky settings and configurations |
build | Contains the distributable (or output) from your TypeScript build. This is the code you ship |
node_modules | Contains all your npm dependencies |