A basic boilerplate for React projects using TypeScript and Redux which is easy to use, extend and customize.
Basically all you need to startup a React project with TypeScript and Redux, including Webpack configuration files and Dev Server, Redux store, actions, reducers and a React component with a simple example application.
This boilerplate comes with two Webpack setups: development - defined in webpack.dev.config.js and build defined in webpack.build.config.js.
npm install
Run npm run start-dev to start the development environment. Webpack will bundle JavaScript and Sass (or CSS) files into a bundle.js, which will be added to the index.html file generated using ./src/index.html as a template. Webpack Dev Server will serve the application on http://localhost:3000/ using BrowserSync.
Run npm run build to build the production code. Webpack will compile, uglify and bundle JavaScript files into bundle.js and will compile and minify Sass (or CSS) files into style.css. The production build will be created in the "./dist" directory.
This project has hot module replacement enabled in development on the Redux store and the React UI as well. That means that changes in the code of reducers or React components won't cause a page reload therefore retaining the current state of the application.
Each tool has is own configuration file located in the root folder:
- Babel:
.babelrc - ES Lint:
.eslintrc.json - Git:
.gitignore - Jest:
jest.config.json - PostCSS:
postcss.config.json - Webpack:
webpack.config.js(accessing different configuration files according to the selected environment)
In the ./src/styles folder you will find Sass partials, mixins and variables I used for this example project. You can easily switch to scss syntax as this boilerplate also support scss files.
I used Webpack File Loader in order to include external resources such as images and fonts very easily.
I plan to extend this boilerplate by creating different branches for specific functionalities such as routing, sagas, etc., but still keeping it as basic as possible, so other developers can easily customize it according to their needs.