sokichifujita / starter-react-flux Goto Github PK

View Code? Open in Web Editor NEW

68.0 6.0 11.0 5.51 MB

Generate your React PWA project with TypeScript or JavaScript

License: MIT License

JavaScript 89.89% HTML 1.37% CSS 0.21% TypeScript 8.54%

react pwa webpack prettier eslint flux workbox jest react-router babel typescirpt create-react-app material-ui

starter-react-flux's Introduction

Starter React Flux

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

TypeScript and JavaScript are supported.
npm and yarn are supported.

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

React
TypeScript (Optional)
Flux
Jest
Babel v7
- @babel/preset-react
- @babel/preset-env
- Experimental Plugins
- @babel/preset-typescript (Optional)
- babel-eslint
- babel-jest
- babel-loader
Webpack v5
ESLint v7
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-config-airbnb
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-jest
- eslint-plugin-jsx-a11y
- @typescript-eslint/eslint-plugin (Optional)
- @typescript-eslint/parser (Optional)
Prettier
Workbox
React-Router v5
Material-UI v4
axios
Immutable.js

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

starter-react-flux's People

Contributors

Stargazers

Watchers

Forkers

nishida-t leexhwhy hgminh95 zxclovetotti hi-time chanlimchoi hisato-kawaji hi-noikiy trendingtechnology ujjwalbatra joe105598055

starter-react-flux's Issues

can't start webpack-dev-server

Thanks for nice starter kit :)

I've got following error, when i run yarn start.

yarn run v1.3.2
$ webpack-dev-server -d --progress --colors
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:538
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/xxx/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Becouse, webpack v4 is released at Feb 25.
I worked around this issue with older webpack and webpack-dev-server.

$ yarn remove webpack webpack-dev-server
$ yarn add -D [email protected] [email protected]

npm run build bundle.js doesn't render

I've run into a problem where the bundle.js does not render anything on index.html after "npm run build", even with a fresh, unedited starter-react-flux init project

Replacing (...</MUIThemeProvider)with

Hello World

in the App.js render() function does render Hello World to the #root div, so I imagine the issue is somewhere along React Router or Material UI

Thank you for the cool starter tool!

Support for React Router v4

React Router v4 has a lot of breaking changes. Thus our routing code should be updated.

Support for Webpack2

Update the webpack configuration.

Update to more pragmatic example

Current initial application is too simple to develop real world application.
Initial application should be improved but keep it simple.

Update configuration for Workbox v5

Currently following error is displayed because interface of precacheAndRoute() has been changed in Workbox v5.

ERROR in Can't find self.__WB_MANIFEST in your SW source.

The configuration for workbox should be changed as follows:

https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v4

Support for Travis CI

Use Travis CI for CI

Support both JavaScript and TypeScript

Currently only JavaScript is supported. To respond increasing TypeScript users, both JavaScrip t and TypeScript should be supported.

Add .mjs to webpack config for supporting AWS amplify

Currently if aws-amplify is added, then this (Compile error with webpack 4) issue will be occurred.

To resolve this issue, developer have to add .mjs in the top extensions section of webpack.common.js like extensions: [".mjs", ".ts", ".tsx", ".js", ".jsx"].

Amplify is a major platform to deploy a React app. Thus .mjs should be automatically added in the top of extension section of a webpack configuration.

Todo

Add .mjs in the top of extensions section of webpack.common.js

TypeError: merge is not a function

Now following error is displayed when npm start is called. Because webpack-merge changed the API.

$ npm start

> ***@1.0.0 start ***
> webpack-dev-server --progress --colors --config webpack.dev.js

***/webpack.dev.js:16
module.exports = merge(common, config);
                 ^

TypeError: merge is not a function
    at Object.<anonymous> (***/webpack.dev.js:16:18)

We need to add {} outside the definition of merge.

Error when running starter-react-flux init

Output after running `starter-react-flux init`

> starter-react-flux init
*** starter-react-flux ***
Create: ./app
Create: ./app/actions
Create: ./app/constants
Create: ./app/components
Create: ./app/dispatcher
Create: ./app/stores
Create: ./app/utils
Create: ./public
Create: ./public/css
Create: ./public/img
Create: ./public/js
Create: ./__tests__
Fix: package.json Key: description
Fix: package.json Key: repository
Fix: package.json Key: jest
Fix: package.json Key: scripts
Fix: package.json Key: keywords
Fix: package.json Key: license
Create: .eslintrc
Create: .babelrc
C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\public\index.html
Create: ./public/index.html
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\public\main.css
Create: ./public/css/style.css
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\webpack.js
Create: webpack.config.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\App.js
Create: ./app/App.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\dispatcher\dispatcher.js
Create: ./app/dispatcher/AppDispatcher.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\constants\constant.js
Create: ./app/constants/AppConstants.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\components\Navi.js
Create: ./app/components/Navi.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\components\Menu.js
Create: ./app/components/Menu.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\app\components\Content.js
Create: ./app/components/Content.js
Read: C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\__tests__\Content-test.js
Create: ./__tests__/Content-test.js
Create: ./app/stores/SampleStore.js
Create: ./app/actions/SampleActionCreators.js
Create: ./app/components/TopContainer.js
Create: ./app/components/SampleContainer.js
npm install yarn
npm notice created a lockfile as package-lock.json. You should commit this file.
./node_modules/yarn/bin/yarn add --dev babel-cli
'.' is not recognized as an internal or external command,
operable program or batch file.
child_process.js:644
    throw err;
    ^

Error: Command failed: ./node_modules/yarn/bin/yarn add --dev babel-cli
'.' is not recognized as an internal or external command,
operable program or batch file.

    at checkExecSyncError (child_process.js:601:13)
    at execSync (child_process.js:641:13)
    at npms.map.command (C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\index.js:248:5)
    at Array.map (<anonymous>)
    at npmInstall (C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\index.js:246:8)
    at setupReact (C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\index.js:238:3)
    at main (C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\index.js:155:9)
    at Object.<anonymous> (C:\Users\user\AppData\Roaming\npm\node_modules\starter-react-flux\bin\index.js:147:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)

System Info

Windows 10, 64-bit
npm 5.6.0

Support for Webpack 5

Webpack 5 should be supported.

Modularize the index.js

Split the index.js to modules.

Babel 7.13

Support for babel 7.13 https://babeljs.io/blog/2021/02/22/7.13.0

* starter-react-flux * Error: Cannot create the directories

Hi SokichiFujita,
As per instruction I tried to install starter-react-flux but on "starter-react-flux init" I am getting "*** starter-react-flux *** Error: Cannot create the directories" issue.

Could you please help me to understand this issue.

Thanks,
Ajit

<Switch> should be placed on top of <Route> components
Page components should be defined as a children component of <Route>, not like <Route component={}>.

See: https://reacttraining.com/blog/react-router-v5-1/

Support prettier 2.0

Prettier 2.0 has been released on 2 days ago. By the default configuration changing, lint errors are displayed when prettier is executed. The lint errors should be fixed.