Initial commit

.babelrc

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "targets": {
+          "browsers": [
+            "last 2 versions"
+          ]
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-dynamic-import",
+    "graphql-tag",
+    "react-hot-loader/babel"
+  ]
+}

.env.example

@@ -0,0 +1,9 @@
+NODE_ENV=development
+
+CDN_BASE_URL=<YOUR_CDN_URL>
+STRIPE_PUB_KEY=<YOUR_STRIPE_KEY>
+
+AWS_ACCESS_KEY_ID=<YOUR_AWS_ACCESS_KEY_ID>
+AWS_SECRET_ACCESS_KEY=<YOUR_AWS_SECRET_ACCESS_KEY>
+AWS_REGION=<YOUR_AWS_REGION>
+AWS_BUCKET=<YOUR_AWS_BUCKET>

.eslintignore

@@ -0,0 +1 @@
+/src/common/material-ui

.eslintrc

@@ -0,0 +1,21 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "airbnb",
+    "plugin:flowtype/recommended"
+  ],
+  "plugins": [
+    "flowtype"
+  ],
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "__DEVTOOLS__": true
+  },
+  "rules": {
+    "react/forbid-prop-types": [
+      "off"
+    ]
+  }
+}

.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

.gitignore

@@ -0,0 +1,6 @@
+.env
+node_modules/
+docs/_book
+dist/
+yarn-error.log
+package-lock.json

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "eslint.autoFixOnSave": true,
+  "files.trimTrailingWhitespace": true,
+  "javascript.validate.enable": false
+}

Dockerfile

@@ -0,0 +1,12 @@
+FROM nginx:1.15.12-alpine
+
+# copy build from host to docker image
+COPY dist/ /usr/share/nginx/html/
+
+# use nginx server to serve file index.html
+# we don't copy assets like css, js, images to Docker image
+# because they will be uploaded to cdn
+# COPY build/index.html /usr/share/nginx/html
+
+# update configuration for HTML5 push state
+COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -0,0 +1,66 @@
+# GraphQL Boilerplate React
+
+## Introduction
+
+GraphQL base source code for ReactJs project
+
+## Requirements
+
+- [Node.js](https://nodejs.org/) v10.15.3 or newer
+- [Yarn](https://yarnpkg.com/) package or newer
+
+## Setup
+
+``` bash
+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?
+
+- [x] React 16.6
+- [x] Webpack 4 configured for both development and production
+- [x] Less css supported
+- [x] CSS module enabled with sourcemaps
+- [x] Hot module replacement (HRM) enabled
+- [x] Ant Design UI framework
+- [x] Redux, Redux DevTools, Redux-Saga, React Router 4, React Router Redux integrated
+- [x] ESLint configured with Airbnb coding style (you still need to install eslint extension for vscode)
+- [x] Feature based project structure

deploy/nginx.conf

@@ -0,0 +1,16 @@
+server {
+  listen 80;
+
+  root /usr/share/nginx/html;
+
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ @rewrites;
+  }
+
+  # forward all requests to index.html
+  location @rewrites {
+    rewrite ^(.+)$ /index.html last;
+  }
+}

docs/README.md

@@ -0,0 +1,4 @@
+# GraphQL React Boilerplate
+
+***
+

docs/SUMMARY.md

@@ -0,0 +1,10 @@
+# Summary
+
+* [Features](setup.md)
+* [Tech Stack](setup.md)
+* [Getting Started](setup.md)
+* [Directory structure](setup.md)
+* [Styling and UI Framwork](setup.md)
+* [References](setup.md)
+
+

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "graph-web-example",
+  "version": "1.0.0",
+  "description": "GraphQL web example project",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --config webpack.dev.js",
+    "build": "webpack-cli --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-graphql-tag": "^2.0.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "css-loader": "^2.1.0",
+    "dotenv": "^6.2.0",
+    "eslint": "^5.14.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-flowtype": "^3.4.2",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.0",
+    "file-loader": "^3.0.1",
+    "flow-bin": "^0.93.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "webpack": "^4.29.5",
+    "webpack-cdnizer": "^1.0.1",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
+    "webpack-merge": "^4.2.1",
+    "webpack-s3-plugin": "^1.0.3"
+  },
+  "dependencies": {
+    "@material-ui/core": "3.9.2",
+    "@material-ui/icons": "3.0.2",
+    "apollo-boost": "^0.3.1",
+    "apollo-link-ws": "^1.0.17",
+    "apollo-utilities": "^1.2.1",
+    "classnames": "^2.2.6",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
+    "history": "^4.7.2",
+    "perfect-scrollbar": "^1.4.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.3",
+    "react-apollo": "^2.5.1",
+    "react-bootstrap-sweetalert": "^4.4.1",
+    "react-dom": "^16.8.3",
+    "react-hot-loader": "^4.7.1",
+    "react-redux": "^6.0.1",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^4.3.1",
+    "redux": "^4.0.1",
+    "redux-form": "^8.1.0",
+    "subscriptions-transport-ws": "^0.9.16",
+    "validate.js": "^0.12.0"
+  }
+}

src/App.jsx

@@ -0,0 +1,44 @@
+// @flow
+import React, { Suspense } from 'react';
+import { Provider as ReduxProvider } from 'react-redux';
+import { createBrowserHistory } from 'history';
+import { ApolloProvider } from 'react-apollo';
+import { hot } from 'react-hot-loader/root';
+import {
+  Router, Route, Switch, Redirect,
+} from 'react-router-dom';
+import routes from './routes';
+import store from './store';
+import client from './client';
+import { IdentityProvider } from './common/identity';
+
+export const history = createBrowserHistory();
+
+function App() {
+  return (
+    <ReduxProvider store={store}>
+      <ApolloProvider client={client}>
+        <IdentityProvider>
+          <Router history={history} key={Math.random()}>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Switch>
+                {routes.map(r => (
+                  <Route
+                    key={r.name}
+                    path={r.path}
+                    render={() => <r.component />}
+                    exact
+                  />
+                ))}
+                <Route path="/" render={() => <Redirect to="/admin/dashboard" />} exact />
+                {/* <Route component={NoMatch} /> */}
+              </Switch>
+            </Suspense>
+          </Router>
+        </IdentityProvider>
+      </ApolloProvider>
+    </ReduxProvider>
+  );
+}
+
+export default hot(App);