Skip to content

Latest commit

 

History

History
66 lines (55 loc) · 2.94 KB

README.md

File metadata and controls

66 lines (55 loc) · 2.94 KB
Raw

GraphQL Boilerplate React

Introduction

GraphQL base source code for ReactJs project

Requirements

Setup

yarn
yarn start

Directory Layout

The directory layout of this source code should be refactored as below:

.
├── /.vscode/                   # contain workspace visual studio code setting
├── /node_modules/              # 3rd-party libraries and utilities
├── /src/                       # application's source code
│   ├── App.jsx                 # root component
│   ├── index.html              # html template file for HtmlWebpackPlugin
│   ├── index.jsx               # webpack entry point
│   ├── reducers.js             # root redux reducer
│   ├── sagas.js                # root redux saga
│   ├── store.js                # redux store
│   ├── /common/                # reusable code for all projects
│   └── /admin/                 # custom module, contain codes related to admin area
│       ├── /login/             # sub module, contain codes related to login feature
│       ├── /profile/           # sub module, contain codes related to update profile feature
│       ├── /components/        # shared components of admin module
│       ├── /constants/         # pre-defined constants, (redux) action types
│       ├── /actions.js         # contains (redux) action creator functions
│       ├── /reducers.js        # redux reducer
│       ├── /sagas.js           # redux-saga code
│       ├── /utils.js           # custom javascript functions
│       └── ...                 # any files specific to the technology we use
├── .babelrc                    # babel configuration file
├── .eslintrc.json              # eslint config file
├── .gitignore                  # gitignore file
├── package.json                # contains 3rd party libraries and utilities
├── README.md                   # project overview and setup instructions
├── webpack.common.js           # shared webpack configuration for both development & production
├── webpack.dev.js              # Webpack configuration for development
├── webpack.prod.js             # Webpack configuration for production
└── yarn.lock                   # specify exactly which versions of each dependency were installed

What's Included?

  • React 16.6
  • Webpack 4 configured for both development and production
  • Less css supported
  • CSS module enabled with sourcemaps
  • Hot module replacement (HRM) enabled
  • Ant Design UI framework
  • Redux, Redux DevTools, Redux-Saga, React Router 4, React Router Redux integrated
  • ESLint configured with Airbnb coding style (you still need to install eslint extension for vscode)
  • Feature based project structure