adding routes, configuration and data

Author: Ayush Krishnatray

.babelrc

@@ -2,5 +2,15 @@
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
+  ],
+  "plugins": [
+    ["@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties"
+    ]
   ]
 }

.eslintrc

@@ -38,6 +38,7 @@
     "quotes": ["error", "single"],
     "react/jsx-filename-extension": 0,
     "react/destructuring-assignment": 0,
+    "react/forbid-prop-types": 0,
     "semi": ["error", "always"],
     "comma-dangle": ["error", "never"]
   }

.prettierignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 80
+}

.stylelintrc

@@ -4,7 +4,6 @@
   ],
   "extends": ["stylelint-config-recommended"],
   "rules": {
-    "scss/dollar-variable-pattern": "^foo",
     "scss/selector-no-redundant-nesting-selector": true,
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true

config/webpack/path.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  root: path.resolve(__dirname, '../../'),
+  outputPath: path.resolve(__dirname, '../../', 'dist'),
+  entryPath: path.resolve(__dirname, '../../', 'src/index.js'),
+  templatePath: path.resolve(__dirname, '../../', 'src/index.html'),
+  commonStyles: path.resolve(__dirname, '../../', 'src/styles')
+};

config/webpack/webpack.common.js

@@ -0,0 +1,38 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const commonPaths = require('./path');
+
+module.exports = {
+  // Webpack 4 by default has a default entry point of index.js in your src folder
+  entry: commonPaths.entryPath,
+  output: {
+    filename: 'bundle.js',
+    path: commonPaths.outputPath
+  },
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        test: /\.(js|jsx)$/,
+        use: ['babel-loader']
+      }]
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx', '.scss']
+  },
+  devServer: {
+    port: 3333,
+    historyApiFallback: true,
+    publicPath: '',
+    contentBase: commonPaths.outputPath,
+    hot: true
+  },
+  plugins: [
+    // Now, every Webpack build will wipe the content of your dist/ folder
+    // before creating the new dist/index.html and dist/bundle.js files from scratch.
+    new CleanWebpackPlugin(),
+    new HtmlWebPackPlugin({
+      template: commonPaths.templatePath
+    })
+  ]
+};

config/webpack/webpack.dev.js

@@ -0,0 +1,34 @@
+module.exports = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      // node-sass provides binding for Node.js to LibSass, a Sass compiler.
+      // sass-loader is a loader for Webpack for compiling SCSS/Sass files.
+      // style-loader injects our styles into our DOM.
+      // css-loader interprets @import and @url() and resolves them.
+      // mini-css-extract-plugin extracts our CSS out of the JavaScript bundle into a separate file, essential for production builds.
+      {
+        test: /\.s(a|c)ss$/,
+        loader: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: {
+                localIdentName: '[local]'
+              }
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true
+            }
+          }
+        ]
+      }
+    ]
+  }
+};

config/webpack/webpack.prod.js

@@ -0,0 +1,44 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  // optimization: {
+  //   splitChunks: {
+  //     chunks: 'all'
+  //   }
+  // },
+  mode: 'production',
+  module: {
+    rules: [
+      // node-sass provides binding for Node.js to LibSass, a Sass compiler.
+      // sass-loader is a loader for Webpack for compiling SCSS/Sass files.
+      // style-loader injects our styles into our DOM.
+      // css-loader interprets @import and @url() and resolves them.
+      // mini-css-extract-plugin extracts our CSS out of the JavaScript bundle into a separate file, essential for production builds.
+      {
+        test: /\.s(a|c)ss$/,
+        loader: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: false
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: false
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css'
+    })
+  ]
+};