/starter-react-flux

Generate your React PWA project with TypeScript or JavaScript

Primary LanguageJavaScriptMIT LicenseMIT

Starter React Flux

Node.js CI Build Status total per year per month per week GitHub license npm PRs Welcome

Starter-React-Flux generates a well-configured project of React and Flux PWA.

Quick start

mkdir my-app && cd my-app

npx starter-react-flux init // JavaScript and npm
npx starter-react-flux init --ts // TypeScript
npx starter-react-flux init --yarn // yarn

npm start

Installed packages

Usage of generated project

Launch the application

npm start                     // Launch the app with webpack-dev-server.

Top page

Production build with Webpack

npm run build                 // Build the app into the ./public directory.

This command also analyzes the bundle file using Webpack Bundle Analyzer and generates reports.

Testing with Jest

npm test                      // Testing with Jest.
npm run update_test           // Update snapshots for snapshot testing.

Static analysis with ESLint

npm run lint                  // Run static analysis by ESLint.

Automatic code format with Prettier

npm run fix                   // Run Prettier to fix code by lint rules.

Directory structure of the generated app

.
├── .babelrc          //Configuration for Babel
├── .eslintrc         //Configuration for ESLint
├── __tests__         //Test files for JEST
├── app
│   ├── App.(js|tsx)  //Entry point to build
│   ├── actions       //Action Creators of Flux
│   ├── components    //React Components
│   ├── constants     //Constatns for Action Creators and Stores of Flux
│   ├── dispatcher    //Dispatcher of Flux
│   ├── stores        //ReduceStore of Flux
│   ├── utils         //Utils
│   ├── html          //HTML template for PWA
│   ├── icon          //Icon source for PWA
│   ├── sw.js         //ServiceWorker template for PWA
│   └── utils         //Utils
├── node_modules
├── package.json
├── public            //`npm run build` command generates the assets
│   ├── css           //CSS files
│   ├── img           //Image files
│   ├── favicon.ico   //Favicon
│   ├── bundle.js     //Built js by Webpack
│   ├── manifest.*.json  //Generated Web App Manifest
│   ├── precache-manifest.*.js //Generated Precache Manifest for Workbox
│   ├── icon_*.png    //Generated icons from the source icon
│   ├── sw.js         //Generated ServiceWorker from the template
│   └── index.html    //Generated index.html from the template
├── analysis          //Reports of bundle analysis
│   ├── bundle-analyzer.html
│   └── bundle-size analyzer.log
│── webpack.common.js //Configuration for Webpack
│── webpack.prod.js   //Production configuration for Webpack
│── webpack.dev.js    //Development configuration for Webpack
└── tsconfig.json     //TypeScript configuration (only for TypeScript project)

License

  • MIT License