Initial commit with basic react website

Author: Rybadour

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

configs/jest.json

@@ -0,0 +1,19 @@
+{
+  "rootDir": "..",
+  "testEnvironment": "jsdom",
+  "coverageDirectory": "<rootDir>/tests/__coverage__/",
+  "setupFiles": ["<rootDir>/tests/__mocks__/shim.js"],
+  "roots": ["<rootDir>/src/", "<rootDir>/tests/"],
+  "moduleNameMapper": {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
+    "\\.(css|scss|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
+  },
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
+  "transformIgnorePatterns": ["/node_modules/"],
+  "testRegex": "/tests/.*\\.(ts|tsx)$",
+  "moduleDirectories": ["node_modules"],
+  "globals": {
+    "DEVELOPMENT": false,
+    "FAKE_SERVER": false
+  }
+}

configs/webpack/common.js

@@ -0,0 +1,50 @@
+// shared config (dev and prod)
+const path = require("path");
+const webpack = require("webpack");
+var SpritesmithPlugin = require('webpack-spritesmith');
+
+module.exports = {
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+    modules: ["node_modules", "public"],
+  },
+  context: path.resolve(__dirname, "../../src/"),
+  module: {
+    rules: [
+      {
+        test: [/\.tsx?$/],
+        use: ["ts-loader"],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(scss|sass)$/,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      "React": "react",
+    }),
+    new SpritesmithPlugin({
+      src: {
+        cwd: path.resolve(__dirname, '../../public/icons'),
+        glob: '*.png'
+      },
+      target: {
+        image: path.resolve(__dirname, '../../public/sprite-sheet.png'),
+        css: path.resolve(__dirname, '../../src/shared/sprite-sheet.scss')
+      },
+      apiOptions: {
+        cssImageRef: "~sprite-sheet.png"
+      }
+    }),
+  ],
+  performance: {
+    hints: false,
+  },
+};

configs/webpack/dev.js

@@ -0,0 +1,24 @@
+// development config
+const { merge } = require("webpack-merge");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const commonConfig = require("./common");
+
+module.exports = merge(commonConfig, {
+  mode: "development",
+  entry: [
+    "react-hot-loader/patch", // activate HMR for React
+    "webpack-dev-server/client?http://localhost:8080", // bundle the client for webpack-dev-server and connect to the provided endpoint
+    "./index.tsx", // the entry point of our app
+  ],
+  devServer: {
+    hot: "only", // enable HMR on the server
+    historyApiFallback: true, // fixes error 404-ish errors when using react router :see this SO question: https://stackoverflow.com/questions/43209666/react-router-v4-cannot-get-url 
+  },
+  devtool: "cheap-module-source-map",
+  plugins: [
+    new HtmlWebpackPlugin({
+      favicon: "../public/favicon.ico",
+      template: "dev-index.html",
+    }),
+  ],
+});

configs/webpack/prod.js

@@ -0,0 +1,36 @@
+// production config
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { merge } = require("webpack-merge");
+const { resolve } = require("path");
+
+const commonConfig = require("./common");
+const path = require('path');
+
+module.exports = merge(commonConfig, {
+  mode: "production",
+  entry: "./index.tsx",
+  output: {
+    filename: "js/bundle.[contenthash].min.js",
+    path: resolve(__dirname, "../../dist"),
+    publicPath: "",
+  },
+  devtool: "source-map",
+  plugins: [
+    new HtmlWebpackPlugin({
+      favicon: "../public/favicon.ico",
+      template: "prod-index.html",
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "*.png",
+          context: path.resolve(__dirname, "..", "..", "public"),
+          globOptions: {
+            ignore: ["**/sprite-sheet.png"],
+          },
+        },
+      ],
+    }),
+  ],
+});