🎉 React express boilerpate code with google oauth

.babelrc

@@ -0,0 +1,35 @@
+{
+  "presets": [
+    ["react"],
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "safari >= 7"]
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "transform-runtime",
+      {
+        "helpers": false,
+        "polyfill": false,
+        "regenerator": true,
+        "moduleName": "babel-runtime"
+      }
+    ],
+    ["transform-object-rest-spread"],
+    ["transform-class-properties"],
+    ["syntax-dynamic-import"],
+    [     
+      "import",     
+      {
+        "libraryName": "antd",
+        "style": "css"
+
+      }
+    ]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+      arrowFunctions: true,
+      module: true,
+      experimentalObjectRestSpread: true
+    }
+  },
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+    es6: true
+  },
+  plugins: ['react'],
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  rules: {
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    'no-console': ['off'],
+    'jsx-quotes': ['error', 'prefer-single']
+  }
+};

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+env/properties.env
+*.swp

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "parser": "babylon",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "jsxBracketSameLine": false
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.fontSize": 12,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "prettier.eslintIntegration": true
+}

README.md

@@ -0,0 +1,187 @@
+<h1 align="center">
+  <br>
+  <a href="#"><img src="./client/src/assets/images/logo.png" alt="react-express-boilerplate" width="100"></a>
+  <br>
+  React Express Boilerplate
+  <br>
+</h1>
+<p align="center">
+    <img src='https://forthebadge.com/images/badges/made-with-javascript.svg' />
+    <img src='https://forthebadge.com/images/badges/uses-css.svg' />
+    <img src='https://forthebadge.com/images/badges/validated-html5.svg' />
+    <img src='https://forthebadge.com/images/badges/uses-html.svg' />
+</p>
+<h4 align="center">React Express Boilerplate with React, Node (Node 8.11.3)</h4>
+
+
+[![React](https://img.shields.io/badge/react-16.2.0-lightgrey.svg)](https://github.com/facebook/react)
+[![Node](https://img.shields.io/badge/node-8.9.4-yellow.svg)](https://nodejs.org/en/download/)
+[![Jest](https://img.shields.io/badge/Jest-22.4.3-lightgrey.svg)](https://jestjs.io/)
+
+- This repo holds the entire front end code base for React Express Boilerplate.The code is written in React 16, with node express server to act as a proxy layer between back-end and front-end.
+- This repo was bootstrapped with CRA(CREATE-REACT-APP) and has been ejected.
+- For styling we are using normal css with flex box
+- Test cases are written in Jest and snapshot tests in Enzyme
+
+## 📦 Table of Contents
+
+1.  [Requirements](#requirements)
+2.  [Installation](#getting-started)
+3.  [Running the Project](#running-the-project)
+4.  [Project Structure](#project-structure)
+5.  [Routing](#routing)
+6.  [Development Tools](#development-tools)
+7.  [Building for Production](#building-for-production)
+    - [Deployment](#deployment)
+
+## 💼 Requirements
+
+- node `^8.11.3`
+- yarn `^1.7.0` or npm `^3.10.10`
+
+## 💾 Installation
+
+After confirming that your environment meets the above [requirements](#requirements), you can start this project by following the steps mentioned below:-
+
+```bash
+$ git clone https://github.com/vivek12345/react-express-boilerplate.git
+$ cd react-express-boilerplate
+```
+
+When that's done, install the project dependencies. It is recommended that you use [Yarn](https://yarnpkg.com/) for deterministic dependency management, but `npm install` will suffice.
+
+```bash
+$ yarn install # Install project dependencies (or `npm install`)
+```
+
+## ▶️ Running the Project
+
+After completing the [installation](#installation) step, you're ready to start the project!
+When you are running this project for the first time, you need to follow these steps:-
+
+Since the project relies on a lot of environment variables, one needs to create a copy of the properties_sample.env file inside config folder and save as properties.env
+```bash
+# For development environment
+
+$ cp env/properties_sample.env env/properties.env # Make a properties.env file from properties_sample.env
+
+```
+Make changes in it according to the environment variables you need, we use [dotenv](https://www.npmjs.com/package/dotenv) which will read all environment variables from properties.env and set them on process.env
+
+### For react and express project execution
+
+```bash
+# For development environment
+
+$ yarn dev:build-client # Build the client bundles (or `npm run dev:build-client`)
+$ yarn dev:server # Runs the nodemon server to start express server (or `npm run dev:server`)
+$ yarn dev # Run the client build and server in watch mode and start the nodemon server(all in parallel) (or `npm run dev`)
+
+```
+
+```bash
+# For development environment
+
+$ yarn start # In production we would just run this command to start our node or pm2 servert
+
+While developing, you will probably rely mostly on `yarn start`; however, there are additional scripts at your disposal:
+
+|`yarn <script>`                                |Description|
+|-----------------------------------------------|-----------|
+|`yarn start`                                   |Starts node app at `localhost:8000` by default|
+|`yarn dev`                                     |Starts client build and nodemon server in parallel|
+|`yarn dev:build-client`                        |Runs webpack in watch mode and serves react app at `localhost:3000`|
+|`yarn dev:server`                              |Runs nodemon server at localhost:3000 for express app|
+|`yarn build`                                   |Builds the app in production mode and serves files from build folder|
+|`yarn lint-staged`                             |Runs prettier and eslint fixes|
+|`yarn build:staging`                           |Builds the app in staging mode and serves files from build folder|
+|`yarn eslint:fix`                              |Runs all eslint fixes|
+```
+
+## ✏️ Project Structure
+
+The project structure using CRA directory structure where folders are grouped into containers and components and since we are using redux, we do have actions, reducers, selectors, hocs, store and helpers.
+This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications.
+To understand what goes inside components and what inside containers, please check out this [component-state-vs-redux-store](https://medium.com/netscape/component-state-vs-redux-store-1eb0c929277) by [Vivek Nayyar](twitter.com/viveknayyar09).
+
+```
+├── build                                           # All production ready files with minified JS, html and css files
+├── client                                          # All react related code will go here
+│   ├── config                                      # All CRA related config goes here including paths, environment variables and │jest config goes here
+│   ├── public                                      # Static public assets used while in dev mode
+│   ├── scripts                                     # All webpack related code
+│   │   ├── build.js                                # Script for making production bundle
+│   │   ├── start.js                                # Script for development mode
+│   │   ├── test.js                                 # Script for test mode
+│   ├── src                                         # Client Application source code
+│   │   ├── helpers                                 # All api helpers, utils, local storage, analytics and config helpers go inside this folder
+│   │   ├── components                              # Global Reusable Components
+│   │   │   ├── ComponentName                       # Component Name Folder and every component will have a index.js and css file
+│   │   │   │   ├── index.js                        # Main file which exports the component
+│   │   │   │	├── ComponentName.js                # Main component code
+│   │   │   │	├── ComponentName.css               # Styling for the component
+│   │   ├── pages                                   # Global Reusable Components
+│   │   │   ├── PageName                            # Component Name Folder and every component will have a index.js and css file
+│   │   │   │   ├── index.js                        # Main file which exports the component
+│   │   │   │	├── PageName.js                     # Main component code
+│   │   │   │	├── PageName.css                    # Styling for the component
+│   │   ├── assets                                  # Any images, fonts and icons which need to be cache bursted go here
+│   │   ├── index.js                                # Application bootstrap and rendering
+│   │   ├── constants                               # Folder for constants file
+│   │   ├── Routes.js                               # All application client side routes using react-router
+├── env                                             # All environment variables to be configured from here
+│   ├── properties.sample.env                       # Sample file for setting up environment vars
+├── server                                          # Express application that provides webpack middleware
+│   ├── controllers                                 # All route controlling logic will go here for example authentication controller
+│   ├── middleware                                  # Middleware for checking JWT token in every api call 
+│   ├── models                                      # Schema for mongo db documents
+│   ├── router                                      # Main express route handlers
+│   │   ├── BaseRouter.js                           # Base routes which the other routers extend
+│   │   ├── Router.js                               # Express router for server side rendering the react app
+│   │   ├── ApiRouter.js                            # API router for all back end api calls
+│   ├── constants.js                                # All server needed constants can be found here
+│   ├── index.js                                    # Entry point for the node js server
+├── webpack                                         # All front end and back end webpack config will go here
+│   ├── webpack.config.dev.js                       # webpack file for dev environment
+│   ├── webpack.config.prod.js                      # webpack file for prod environment
+│   ├── webpackDevServer.config.dev.js              # webpack dev server for dev work
+├── .babelrc                                        # Babel file for es6 and react code transpilation
+├── .gitignore                                      # The name says it all
+├── .eslintrc.js                                    # This file maintains all end points of the back end routes
+├── .prettierrc                                     # Prettier config
+├── package.json                                    # All npm dependencies can be found here
+├── README.md                                       # Readme file for the whole app
+├── yarn.lock                                       # Yarn lock file for locking the dependency versions
+```
+
+## 🚀 Routing
+
+We use `react-router` [route definitions](https://github.com/ReactTraining/react-router)
+See the [project structure](#project-structure) section for more information.
+
+## ⚙️ Development Tools
+
+### Prettier
+
+- We use `prettier` for code formatting.Here is the link to downlod the same.[Prettier](https://www.npmjs.com/package/prettier)
+
+- Make sure you are using vscode and your vscode user_settings has the following code:-
+
+```bash
+{
+    "editor.fontSize": 12,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "prettier.eslintIntegration": true,
+}
+```
+
+## 🚚 Building for Production
+
+## Deployment
+
+- Deployment will always happen from the `release` branch on production.
+- Any production related environment variables need to be configured on env/properties.env.Take a copy of sample and edit values for prod environment
+- ci folder has a docker script to deploy all the code in a docker instance
+- yarn build will built the production build
+- yarn start will start the node server or pm2 server( which ever we chose to go with)

client/config/env.js

@@ -0,0 +1,73 @@
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error('The NODE_ENV environment variable is required but was not specified.');
+}
+
+var dotenvFile = `${paths.dotenv}/properties.env`;
+
+if (fs.existsSync(dotenvFile)) {
+  require('dotenv-expand')(
+    require('dotenv').config({
+      path: dotenvFile
+    })
+  );
+}
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const DASHBOARD_APP = /^DASHBOARD_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => DASHBOARD_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {})
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

client/config/jest/cssTransform.js

@@ -0,0 +1,12 @@
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  }
+};

client/config/jest/fileTransform.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  }
+};

client/config/jest/jestSetup.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });