Merge pull request #1 from machielsdev/feature/setup-react

Eran Machiels · web-flow · commit bb116d45192c · 2020-10-24T13:49:57.000+02:00
Feature/setup react
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,12 +6,12 @@
     "scripts": {
         "build": "tsc -p tsconfig-build.json",
         "test": "jest --config=jest.config.json",
-        "test-coverage": "jest --config=jest.config.json --collectCoverage"
+        "test-coverage": "jest --config=jest.config.json --collectCoverage",
+        "dev": "webpack serve --config www/webpack.config.js"
     },
     "author": "Eran Machiels",
     "license": "ISC",
     "devDependencies": {
-        "typescript": "^4.0.3",
         "@babel/plugin-proposal-class-properties": "^7.10.4",
         "@babel/preset-env": "^7.11.0",
         "@babel/preset-react": "^7.10.4",
@@ -23,14 +23,22 @@
         "@types/react-is": "^16.7.1",
         "@typescript-eslint/eslint-plugin": "^4.5.0",
         "@typescript-eslint/parser": "^4.5.0",
+        "dart-sass": "^1.25.0",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.3",
         "eslint": "^7.7.0",
         "eslint-plugin-react": "^7.20.6",
         "flush-promises": "^1.0.2",
+        "react-dom": "^17.0.1",
         "react-scripts": "^4.0.0",
         "react-test-renderer": "^17.0.1",
         "ts-loader": "^8.0.2",
-        "webpack-cli": "^4.1.0"
+        "typescript": "^4.0.3",
+        "webpack-cli": "^4.1.0",
+        "webpack-dev-server": "^3.11.0"
+    },
+    "dependencies": {
+        "clsx": "^1.1.1",
+        "react": "^17.0.1"
     }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -43,6 +43,7 @@
     "exclude": [
         "node_modules",
         "dist",
-        "setupTests.ts"
+        "setupTests.ts",
+        "www"
     ]
 }
diff --git a/www/.env b/www/.env
diff --git a/www/public/favicon.ico b/www/public/favicon.ico
diff --git a/www/public/index.html b/www/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="./favicon.ico" />
+    <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta
+            name="description"
+            content="Web site created using create-react-app"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
+
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
+
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
+</html>
diff --git a/www/public/robots.txt b/www/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/www/src/index.tsx b/www/src/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+
+ReactDom.render(
+    null,
+    document.getElementById('root')
+);
diff --git a/www/webpack.config.js b/www/webpack.config.js
@@ -0,0 +1,80 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackManifestPlugin = require('webpack-manifest-plugin');
+const dotenv = require('dotenv');
+
+/**
+ * Load env file and parse config, to be used when building the app
+ * @returns {webpack.DefinePlugin}
+ */
+const setEnvVars = () => {
+    const env = dotenv.config({
+        path: './www/.env'
+    }).parsed;
+
+    // loop over the keys and place them in the process.env namespace
+    const keys = Object.keys(env).reduce((prev, next) => {
+        prev[`process.env.${next}`] = JSON.stringify(env[next]);
+        return prev;
+    }, {});
+
+    return new webpack.DefinePlugin(keys);
+};
+
+module.exports = {
+    entry: {
+        main: './www/src/index.tsx'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts(x|)?$/,
+                use: 'babel-loader',
+                exclude: /node_modules/
+            }, {
+                test: /\.[s|]css$/,
+                use: [{
+                    loader: 'style-loader'
+                }, {
+                    loader: 'css-loader'
+                }, {
+                    loader: 'sass-loader',
+                    options: {
+                        implementation: require('dart-sass')
+                    }
+                }]
+            }, {
+                test: /\.(png|svg|jpg|jpeg|gif|ico|woff2?)$/,
+                exclude: /node_modules/,
+                use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.jsx']
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './www/public/index.html',
+            favicon: path.resolve(__dirname, 'public', 'favicon.ico')
+        }),
+        new WebpackManifestPlugin(),
+        setEnvVars()
+    ],
+    output: {
+        filename: '[name].[hash].js',
+        path: path.resolve(__dirname, 'www', 'public'),
+        publicPath: '/'
+    },
+    mode: 'development',
+    devServer: {
+        host: 'localhost',
+        port: 3000,
+        open: true,
+        historyApiFallback: true,
+        publicPath: '/',
+        hot: true
+    }
+};

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@`
`43`	`43`	`"exclude": [`
`44`	`44`	`"node_modules",`
`45`	`45`	`"dist",`
`46`		`- "setupTests.ts"`
	`46`	`+ "setupTests.ts",`
	`47`	`+ "www"`
`47`	`48`	`]`
`48`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# https://www.robotstxt.org/robotstxt.html`
	`2`	`+User-agent: *`