HashemKhalifa / Webpack React Boilerplate
Licence: mit
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Webpack React Boilerplate
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-62.57%)
Mutual labels: eslint, babel, jest, enzyme, css-modules
React Ssr Starter
All have been introduced React environment
Stars: ✭ 20 (-94.41%)
Mutual labels: eslint, prettier, jest, enzyme
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+89.39%)
Mutual labels: eslint, prettier, babel, css-modules
Mostly
They mostly come at night; mostly.
Stars: ✭ 78 (-78.21%)
Mutual labels: eslint, prettier, babel, jest
React Boilerplate
Production-ready boilerplate for building universal web apps with React and Redux
Stars: ✭ 53 (-85.2%)
Mutual labels: babel, jest, css-modules, react-boilerplate
Serverless Typescript Starter
🗄🙅♀️ Deploy your next serverless JavaScript function in seconds
Stars: ✭ 653 (+82.4%)
Mutual labels: eslint, prettier, babel, jest
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-81.84%)
Mutual labels: eslint, prettier, babel, jest
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Stars: ✭ 244 (-31.84%)
Mutual labels: babel, jest, enzyme, css-modules
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (-14.25%)
Mutual labels: webpack4, jest, enzyme, css-modules
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-53.91%)
Mutual labels: eslint, babel, enzyme, css-modules
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-91.06%)
Mutual labels: eslint, prettier, babel, jest
Push Starter
React Redux Starter with SSR 🤖
Stars: ✭ 43 (-87.99%)
Mutual labels: webpack4, jest, enzyme, css-modules
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-67.6%)
Mutual labels: eslint, prettier, jest, enzyme
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+3831.01%)
Mutual labels: eslint, babel, jest, css-modules
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-36.03%)
Mutual labels: webpack4, eslint, prettier, babel
React Native Navigation Redux Starter Kit
React Native Navigation(v2) Starter Kit with Redux, Saga, ESLint, Babel, Jest and Facebook SDK 😎
Stars: ✭ 271 (-24.3%)
Mutual labels: eslint, babel, jest
rr-boilerplate
A lightweight React&Redux boilerplate
Stars: ✭ 35 (-90.22%)
Mutual labels: jest, css-modules, webpack4
react-component-library-lerna
Build your own React component library managed with lerna, presented with storybook and published in private npm registry.
Stars: ✭ 55 (-84.64%)
Mutual labels: eslint, jest, prettier
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: ✭ 41 (-88.55%)
Mutual labels: babel, eslint, webpack4
ying-template
这是一个基于 `webpack@^5.27.2` + `typescript@^4.2.3` + `@babel/core@^7.2.2` + `jest@^26.6.3` + `eslint@^7.22.0` 的多页面脚手架。
Stars: ✭ 125 (-65.08%)
Mutual labels: eslint, jest, prettier
Minimal React and Webpack 4 boilerplate with babel
Minimal webpack and react boilerplate using latest version of react and babel as well as jest and enzyme for more details about technologies used. click with real time server changes ;)
check out Medium article for more details
Table of contents
Project structure
build/
src/
|- index.jsx _______________________________ # Application entry
|- App.jsx _________________________________ # Application init
| |- Components/
| |- hello-world/
| |- index.jsx _______________________ # Sample component
webpack
|- paths.js ________________________________ # webpack paths needed
|- webpack.common.js _______________________ # common webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config
Installation
1- Clone the boilerplate repo
git clone [email protected]:HashemKhalifa/webpack-react-boilerplate.git
2- yarn
or npm install
to install npm packages
3- start dev server using yarn start
or npm start
.
3- build and bundling your resources for production yarn build
.
4- Unit testing will watch all your changes in the test files as well as create coverage folder for you.
yarn test
Configuration
- Webpack Config paths based on your file structure you can go to
webpack/paths.js
and modify the source and file names based on your need. -
webpack/webpack.common.js
config common webpack for both dev and production environments. - webpack/webpack.dev.js config webpack for dev environment.
-
webpack/webpack.prod.js
config webpack for production environment. -
/webpack.config.js
main webpack config that merge common and webpack environment based config. - Enzyme config
/setupTest.js
here you will have all setup for enzyme to test your component. - Prettier config
/.prettierc
. - Browsers list config
/.browserslistrc
.
Technologies used
- Webpack 4
- Babel 7 [ transforming JSX and ES6,ES7,ES8 ]
-
React
16.8
- Lodash
- Jest [ Unit test]
- Enzyme for UI testing.
- Eslint with airbnb config
- Prettier [ Code formatter ]
- Style & CSS Loader & SASS-loader
- CSS modules [ Isolated style based on each component ]
- Browsers list [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
- React hot loader
- Webpack dev serve
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].