From 9d109a1c4ba00b8b60c27390ff4fbf0020f38147 Mon Sep 17 00:00:00 2001 From: Vivek Nayyar Date: Sun, 12 Aug 2018 20:40:54 +0700 Subject: [PATCH] :tada: React express boilerpate code with google oauth --- .babelrc | 35 + .eslintrc.js | 29 + .gitignore | 23 + .prettierrc | 11 + .vscode/settings.json | 6 + README.md | 187 ++ client/config/env.js | 73 + client/config/jest/cssTransform.js | 12 + client/config/jest/fileTransform.js | 10 + client/config/jest/jestSetup.js | 4 + client/config/paths.js | 51 + client/config/polyfills.js | 22 + client/package.json | 16 - client/public/index.html | 39 +- client/scripts/build.js | 133 ++ client/scripts/start.js | 93 + client/scripts/test.js | 21 + client/src/App.css | 16 +- client/src/App.js | 14 +- client/src/Routes.js | 43 + client/src/__mocks__/browserMocks.js | 21 + client/src/{App.test.js => __tests__/App.js} | 4 +- client/src/__tests__/util.js | 77 + client/src/assets/images/logo.png | Bin 0 -> 40492 bytes client/src/components/Footer/Footer.css | 78 + client/src/components/Footer/Footer.js | 20 + client/src/components/Footer/Logo.js | 22 + client/src/components/Footer/index.js | 2 + .../components/GoogleLogin/GoogleLogin.css | 32 + .../src/components/GoogleLogin/GoogleLogin.js | 163 ++ client/src/components/GoogleLogin/index.js | 2 + .../components/GoogleLogout/GoogleLogout.css | 30 + .../components/GoogleLogout/GoogleLogout.js | 93 + client/src/components/GoogleLogout/index.js | 2 + client/src/components/Header/Header.css | 40 + client/src/components/Header/Header.js | 74 + client/src/components/Header/index.js | 3 + client/src/components/Main.js | 114 + client/src/components/Table/Table.css | 23 + client/src/components/Table/Table.js | 118 ++ client/src/components/Table/index.js | 3 + client/src/constants/index.js | 24 + client/src/data/products.js | 44 + client/src/helpers/ApiLibrary.js | 42 + client/src/helpers/Storage.js | 55 + client/src/helpers/utils.js | 39 + client/src/index.js | 2 - client/src/pages/Products/Products.css | 12 + client/src/pages/Products/Products.js | 49 + client/src/pages/Products/index.js | 2 + env/properties.sample.env | 8 + package.json | 134 ++ server/__tests__/index.js | 71 + server/config.json | 3 + server/constants.js | 6 + .../controllers/__tests__/authentication.js | 34 + server/controllers/authentication.js | 19 + server/index.js | 121 ++ server/middleware/__tests__/auth.js | 79 + server/middleware/auth.js | 15 + server/passport/googleStrategy.js | 20 + server/passport/index.js | 6 + server/router/ApiRouter.js | 59 + server/router/BaseRouter.js | 11 + server/router/ClientRouter.js | 10 + server/utils/__tests__/generateToken.js | 36 + server/utils/generateToken.js | 7 + webpack/webpack.config.dev.js | 261 +++ webpack/webpack.config.prod.js | 339 +++ webpack/webpackDevServer.config.js | 92 + client/yarn.lock => yarn.lock | 1856 ++++++++++++++++- 71 files changed, 5055 insertions(+), 160 deletions(-) create mode 100644 .babelrc create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 .vscode/settings.json create mode 100644 README.md create mode 100644 client/config/env.js create mode 100644 client/config/jest/cssTransform.js create mode 100644 client/config/jest/fileTransform.js create mode 100644 client/config/jest/jestSetup.js create mode 100644 client/config/paths.js create mode 100644 client/config/polyfills.js delete mode 100644 client/package.json create mode 100644 client/scripts/build.js create mode 100644 client/scripts/start.js create mode 100644 client/scripts/test.js create mode 100644 client/src/Routes.js create mode 100644 client/src/__mocks__/browserMocks.js rename client/src/{App.test.js => __tests__/App.js} (73%) create mode 100644 client/src/__tests__/util.js create mode 100644 client/src/assets/images/logo.png create mode 100644 client/src/components/Footer/Footer.css create mode 100644 client/src/components/Footer/Footer.js create mode 100644 client/src/components/Footer/Logo.js create mode 100644 client/src/components/Footer/index.js create mode 100644 client/src/components/GoogleLogin/GoogleLogin.css create mode 100644 client/src/components/GoogleLogin/GoogleLogin.js create mode 100644 client/src/components/GoogleLogin/index.js create mode 100644 client/src/components/GoogleLogout/GoogleLogout.css create mode 100644 client/src/components/GoogleLogout/GoogleLogout.js create mode 100644 client/src/components/GoogleLogout/index.js create mode 100644 client/src/components/Header/Header.css create mode 100644 client/src/components/Header/Header.js create mode 100644 client/src/components/Header/index.js create mode 100644 client/src/components/Main.js create mode 100644 client/src/components/Table/Table.css create mode 100644 client/src/components/Table/Table.js create mode 100644 client/src/components/Table/index.js create mode 100644 client/src/constants/index.js create mode 100644 client/src/data/products.js create mode 100644 client/src/helpers/ApiLibrary.js create mode 100644 client/src/helpers/Storage.js create mode 100644 client/src/helpers/utils.js create mode 100644 client/src/pages/Products/Products.css create mode 100644 client/src/pages/Products/Products.js create mode 100644 client/src/pages/Products/index.js create mode 100644 env/properties.sample.env create mode 100644 package.json create mode 100644 server/__tests__/index.js create mode 100644 server/config.json create mode 100644 server/constants.js create mode 100644 server/controllers/__tests__/authentication.js create mode 100644 server/controllers/authentication.js create mode 100644 server/index.js create mode 100644 server/middleware/__tests__/auth.js create mode 100644 server/middleware/auth.js create mode 100644 server/passport/googleStrategy.js create mode 100644 server/passport/index.js create mode 100644 server/router/ApiRouter.js create mode 100644 server/router/BaseRouter.js create mode 100644 server/router/ClientRouter.js create mode 100644 server/utils/__tests__/generateToken.js create mode 100644 server/utils/generateToken.js create mode 100644 webpack/webpack.config.dev.js create mode 100644 webpack/webpack.config.prod.js create mode 100644 webpack/webpackDevServer.config.js rename client/yarn.lock => yarn.lock (80%) diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..0b52ff3 --- /dev/null +++ b/.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" + + } + ] + ] +} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..7e86326 --- /dev/null +++ b/.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'] + } +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c74426f --- /dev/null +++ b/.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 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e070593 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "parser": "babylon", + "printWidth": 120, + "tabWidth": 2, + "singleQuote": true, + "trailingComma": "none", + "bracketSpacing": true, + "semi": true, + "useTabs": false, + "jsxBracketSameLine": false +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..646491b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "editor.fontSize": 12, + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "prettier.eslintIntegration": true +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..882145a --- /dev/null +++ b/README.md @@ -0,0 +1,187 @@ +

+
+ react-express-boilerplate +
+ React Express Boilerplate +
+

+

+ + + + +

+

React Express Boilerplate with React, Node (Node 8.11.3)

+ + +[![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