https://github.com/riteshsp2000/react-boilerplate
React Template - A custom webpack configured template with support for code splitting
https://github.com/riteshsp2000/react-boilerplate
code-splitting react react-router-dom redux webpack
Last synced: 3 months ago
JSON representation
React Template - A custom webpack configured template with support for code splitting
- Host: GitHub
- URL: https://github.com/riteshsp2000/react-boilerplate
- Owner: riteshsp2000
- License: mit
- Created: 2020-10-04T19:32:14.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2021-06-26T18:38:03.000Z (about 5 years ago)
- Last Synced: 2025-04-04T08:47:54.706Z (over 1 year ago)
- Topics: code-splitting, react, react-router-dom, redux, webpack
- Language: JavaScript
- Homepage:
- Size: 725 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
React Template
A React Template with custom webpack config
·
Report Bugs
.
Add Features
Table of Contents
## About The Project
A React Template with custom webpack configuration along with support for code splitting. Following are the features specific to React.
- Individual Page code splitting support.
- Uses functional component style.
- Support for some commonly used Hooks.
- Well thought out directory structure for large scale projects.
- Supports testing using Jest and React Testing Library
Following is a list of plugins used for configuring [Webpack](https://webpack.js.org/)
- [uglify-js-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin) - For minification of Javascript
- [clean-webpack-plugin](https://www.npmjs.com/package/clean-webpack-plugin) - For cleaning of the build folder
- [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) - For visualizing size of webpack output files
- [copy-webpack-plugin](https://www.npmjs.com/package/copy-webpack-plugin) - For copying the static directory into build directory
- [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) - For simplifying the creation of HTML files to serve your bundles
- [brotli-webpack-plugin](https://www.npmjs.com/package/brotli-webpack-plugin) - For better compression using the Brotli compression algorithm
### Built With
Following technologies and libraries are used for the development of this
template
- Routing using [react-router-dom](https://reactrouter.com/web/guides/quick-start)
- Global State Mananagement with the help of [redux](https://redux.js.org/)
- Linting with [eslint](https://eslint.org/) and formating using [prettier](https://prettier.io/)
- Testing support with [jest](https://jestjs.io/) and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/)
- Uses [yarn](https://yarnpkg.com/) for faster installs
## Getting Started
To setup the project locally follow the steps below
### Prerequisites
- [Node.js](https://nodejs.org/en/download/)
```sh
# Homebrew
brew install nodejs
# Sudo apt
sudo apt install nodejs
# Packman
pacman -S nodejs
# Module Install
dnf module install nodejs: # stream is the version
# Windows (chocolaty)
cinst nodejs.install
```
- [Yarn](https://classic.yarnpkg.com/en/docs/install/)
```sh
npm install --global yarn
```
- [Git](https://git-scm.com/downloads)
```sh
# Homebrew
brew install git
# Sudo apt
apt-get install git
# Packman
pacman -S git
# Module Install (Fedora)
dnf install git
```
### Contribution guidlines 🎃
---
Our Slack Community: [Slack Invite](http://bit.ly/NITRDevs)
`Contributions are welcome 🎉🎉`
### Local Repository Setup
Please refer to the project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.
1. **Fork** the repo on GitHub
2. **Clone** the project to your local system
3. **Commit** changes to your own separate branch
4. **Push** your work back up to your fork
5. Submit a **Pull request** so that we can review your changes
NOTE 1: Please abide by the [Contributing Guidelines](https://github.com/dscnitrourkela/project-guava-web/blob/master/CONTRIBUTING.md).
NOTE 2: Please abide by the [Code of Conduct](https://github.com/dscnitrourkela/project-guava-web/blob/master/CODE_OF_CONDUCT.md).
### Running the project.
The project uses Yarn and not NPM. It is strictly advised to stick with Yarn so as to avoid dependency conflicts down the line.
```
## Checkout into the project client directory
cd client
## Install Dependencies
yarn install
## Run the Project
yarn develop
```
Following are the commands to remove/add new dependencies using yarn
```
## Add a new Package
yarn add package_name
## Remove an existing Package
yarn remove package_name
## Save Package as a Dev Dependency
yarn add -D package_name
```
## License
Distributed under the MIT License. See `LICENSE` for more information.
[contributors-shield]: https://img.shields.io/github/contributors/riteshsp2000@/react-boilerplate?style=for-the-badge
[contributors-url]: https://github.com/riteshsp2000@/react-boilerplate/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/riteshsp2000@/react-boilerplate?style=for-the-badge
[forks-url]: https://github.com/riteshsp2000/react-boilerplate/network/members
[stars-shield]: https://img.shields.io/github/stars/riteshsp2000/react-boilerplate?style=for-the-badge
[stars-url]: https://github.com/riteshsp2000/react-boilerplate/stargazers
[issues-shield]: https://img.shields.io/github/issues/riteshsp2000/react-boilerplate?style=for-the-badge
[issues-url]: https://github.com/riteshsp2000/react-boilerplate/issues
[license-shield]: https://img.shields.io/github/license/riteshsp2000/react-boilerplate?style=for-the-badge
[license-url]: https://github.com/riteshsp2000/react-boilerplate/blob/main/LICENSE.txt