First Commit

frontend/webpack/env.js

@@ -0,0 +1,55 @@
+const fs = require('fs')
+const path = require('path')
+
+const NODE_ENV = process.env.NODE_ENV
+
+if (!NODE_ENV) {
+  throw new Error('The NODE_ENV environment variable is required but was not specified.')
+}
+
+// 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)
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key] // eslint-disable-line no-param-reassign
+        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]) // eslint-disable-line no-param-reassign
+      return env
+    }, {}),
+  }
+
+  return { raw, stringified }
+}
+
+module.exports = getClientEnvironment

frontend/webpack/new-webpack.config.dev.js

@@ -0,0 +1,165 @@
+var path = require("path")
+var webpack = require("webpack")
+var assetsPath = path.join(__dirname, "..", "public", "assets")
+var publicPath = "/assets/"
+
+module.exports = {
+	name: "browser",
+	mode: 'development',
+	devtool: "eval-source-map",
+
+	// The base directory (absolute path!) for resolving the entry option.
+	context: path.join(__dirname, "..", "src", "client"),
+
+	entry: {
+		app: [
+			"./client",
+			"webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true"
+		]
+	},
+
+	output: {
+		path: assetsPath,
+		filename: "[name].js",
+		publicPath: publicPath
+	},
+
+	module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+		},
+		{
+			test:/\.css$/,
+			use:['style-loader','css-loader']
+
+}, 
+		// "postcss" loader applies autoprefixer to our LESS.
+		// "css" loader resolves paths in CSS and adds assets as dependencies.
+		// "style" loader turns CSS into JS modules that inject <style> tags.
+		// In production, we use a plugin to extract that CSS to a file, but
+		// in development "style" loader enables hot editing of CSS.
+		{
+			test: /\.less$/,
+			exclude: [
+				path.resolve(paths.appSrc, 'components'),
+			],
+			use: extractLess.extract({
+				fallback: {
+					loader: 'style-loader',
+					options: {
+						hmr: isDev,
+					},
+				},
+				use: [
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							importLoaders: 1,
+							minimize: process.env.NODE_ENV === 'production',
+							sourceMap: shouldUseSourceMap,
+						},
+					},
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							// Necessary for external CSS imports to work
+							// https://github.com/facebookincubator/create-react-app/issues/2677
+							ident: 'postcss',
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								autoprefixer(autoprefixerOptions),
+							],
+						},
+					},
+					{ loader: require.resolve('less-loader') }
+				],
+				...extractTextPluginOptions,
+			}),
+		},
+		// Heads up!
+		// We apply CSS modules only to our components, this allow to use them
+		// and don't break SUI.
+		{
+			test: /\.less$/,
+			include: [
+				path.resolve(paths.appSrc, 'components', 'styling'),
+			],
+			use: extractLess.extract({
+				fallback: {
+					loader: require.resolve('style-loader'),
+					options: {
+						hmr: isDev,
+					},
+				},
+				use: [
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							importLoaders: 1,
+							localIdentName: cssClassName,
+							modules: true,
+							minimize: process.env.NODE_ENV === 'production',
+							sourceMap: shouldUseSourceMap,
+						},
+					},
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							// Necessary for external CSS imports to work
+							// https://github.com/facebookincubator/create-react-app/issues/2677
+							ident: 'postcss',
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								autoprefixer(autoprefixerOptions),
+							],
+						},
+					},
+					{ loader: require.resolve('less-loader') }
+				],
+			}),
+		},
+
+// "url" loader works like "file" loader except that it embeds assets
+// smaller than specified limit in bytes as data URLs to avoid requests.
+// A missing `test` is equivalent to a match.
+{
+	test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+	loader: require.resolve('url-loader'),
+	options: {
+		limit: 10000,
+		name: 'static/media/[name].[hash:8].[ext]',
+	},
+},
+// "file" loader makes sure assets end up in the `build` folder.
+// When you `import` an asset, you get its filename.
+{
+	test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+	loader: require.resolve('file-loader'),
+	options: {
+		name: '/static/media/[name].[hash:8].[ext]',
+	},
+}
+],
+		
+  },
+
+	resolve: {
+		extensions: [".js", ".jsx"],
+		modules: [
+      path.resolve('src'),
+      'node_modules',
+    ],
+	},
+
+	plugins: [
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.NoEmitOnErrorsPlugin(),
+		new webpack.DefinePlugin({
+			"process.env": {
+				NODE_ENV: JSON.stringify("development")
+			}
+		})
+	]
+}

frontend/webpack/new-webpack.config.prod.js

@@ -0,0 +1,48 @@
+var path = require("path")
+var webpack = require("webpack")
+var assetsPath = path.join(__dirname, "..", "public", "assets")
+var publicPath = "/assets/"
+
+module.exports = {
+	// The configuration for the client
+	name: "browser",
+	mode: 'production',
+	devtool: "source-map",
+
+	// The base directory (absolute path!) for resolving the entry option.
+	context: path.join(__dirname, "..", "src", "client"),
+
+	entry: {
+		app: "./client"
+	},
+
+	output: {
+		path: assetsPath,
+		filename: "[name].min.js",
+		publicPath: publicPath
+	},
+
+	resolve: {
+		extensions: [".js", ".jsx"],
+		modules: [
+      path.resolve('src'),
+      'node_modules',
+    ],
+	},
+
+	module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+    }],
+  },
+
+	plugins: [
+		new webpack.DefinePlugin({
+			"process.env": {
+				NODE_ENV: JSON.stringify("production")
+			}
+		})
+	]
+}

frontend/webpack/paths.js

@@ -0,0 +1,49 @@
+const path = require('path')
+const fs = require('fs')
+const url = require('url')
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
+
+const envPublicUrl = process.env.PUBLIC_URL
+
+function ensureSlash(needlePath, needsSlash) {
+  const hasSlash = needlePath.endsWith('/')
+  if (hasSlash && !needsSlash) {
+    return needlePath.substr(needlePath, needlePath.length - 1)
+  } else if (!hasSlash && needsSlash) {
+    return `${needlePath}/`
+  }
+  return needlePath
+}
+
+const getPublicUrl = appPackageJson =>
+  envPublicUrl || require(appPackageJson).homepage
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson)
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
+  return ensureSlash(servedUrl, true)
+}
+
+module.exports = {
+  appBuild: resolveApp('build'),
+  appNodeModules: resolveApp('node_modules'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveApp('src/index.js'),
+  appPackageJson: resolveApp('package.json'),
+  appPublic: resolveApp('public'),
+  appSrc: resolveApp('src'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+  yarnLockFile: resolveApp('yarn.lock'),
+}

frontend/webpack/webpack.config.common.js

@@ -0,0 +1,172 @@
+var path = require("path")
+var webpack = require("webpack")
+var assetsPath = path.join(__dirname, "..", "public", "assets")
+var publicPath = "/assets/"
+const paths = require('./paths')
+const autoprefixer = require('autoprefixer')
+const isDev = process.env.NODE_ENV === 'development'
+// Some apps do not use client-side routing with pushState.
+// For these, "homepage" can be set to "." to enable relative asset paths.
+const shouldUseRelativeAssetPaths = paths.servedPath === './'
+// Note: defined here because it will be used more than once.
+const cssFilename = 'static/css/[name].[contenthash:8].css'
+const cssClassName = isDev ? '[path][name]__[local]--[hash:base64:5]' : '[hash:base64:5]'
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const extractLess = new ExtractTextPlugin({
+  filename: cssFilename,
+  disable: true
+})
+
+// Options for autoPrefixer
+const autoprefixerOptions = {
+  browsers: [
+    '>1%',
+    'last 4 versions',
+    'Firefox ESR',
+    'not ie < 9', // React doesn't support IE8 anyway
+  ],
+  flexbox: 'no-2009',
+}
+
+// ExtractTextPlugin expects the build output to be flat.
+// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
+// However, our output is structured with css, js and media folders.
+// To have this structure working with relative paths, we have to use custom options.
+const extractTextPluginOptions = shouldUseRelativeAssetPaths
+  ? // Making sure that the publicPath goes back to to build folder.
+  { publicPath: Array(cssFilename.split('/').length).join('../') }
+  : {}
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.NODE_ENV === 'production' && process.env.GENERATE_SOURCEMAP !== 'false'
+
+
+
+module.exports = {
+
+	module: {
+		rules: [{
+                test:/\.css$/,
+                use:['style-loader','css-loader']
+		},
+		// "postcss" loader applies autoprefixer to our LESS.
+		// "css" loader resolves paths in CSS and adds assets as dependencies.
+		// "style" loader turns CSS into JS modules that inject <style> tags.
+		// In production, we use a plugin to extract that CSS to a file, but
+		// in development "style" loader enables hot editing of CSS.
+		{
+			test: /\.less$/,
+			exclude: [
+				path.resolve(paths.appSrc, 'components'),
+			],
+			use: extractLess.extract({
+				fallback: {
+					loader: 'style-loader',
+					options: {
+						hmr: isDev,
+					},
+				},
+				use: [
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							importLoaders: 1,
+							sourceMap: shouldUseSourceMap,
+						},
+					},
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							// Necessary for external CSS imports to work
+							// https://github.com/facebookincubator/create-react-app/issues/2677
+							ident: 'postcss',
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								autoprefixer(autoprefixerOptions),
+							],
+						},
+					},
+					{ loader: require.resolve('less-loader') }
+				],
+				...extractTextPluginOptions,
+			}),
+		},
+		// Heads up!
+		// We apply CSS modules only to our components, this allow to use them
+		// and don't break SUI.
+		{
+			test: /\.less$/,
+			include: [
+				path.resolve(paths.appSrc, 'components', 'styling'),
+			],
+			use: extractLess.extract({
+				fallback: {
+					loader: require.resolve('style-loader'),
+					options: {
+						hmr: isDev,
+					},
+				},
+				use: [
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							importLoaders: 1,
+							localIdentName: cssClassName,
+							modules: true,
+							sourceMap: shouldUseSourceMap,
+						},
+					},
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							// Necessary for external CSS imports to work
+							// https://github.com/facebookincubator/create-react-app/issues/2677
+							ident: 'postcss',
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								autoprefixer(autoprefixerOptions),
+							],
+						},
+					},
+					{ loader: require.resolve('less-loader') }
+				],
+			}),
+		},
+    // "url" loader works like "file" loader except that it embeds assets
+    // smaller than specified limit in bytes as data URLs to avoid requests.
+    // A missing `test` is equivalent to a match.
+    {
+      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+      loader: require.resolve('url-loader'),
+      options: {
+        limit: 10000,
+        name: 'static/media/[name].[hash:8].[ext]',
+      },
+    },
+    // "file" loader makes sure assets end up in the `build` folder.
+    // When you `import` an asset, you get its filename.
+    {
+      test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+      loader: require.resolve('file-loader'),
+      options: {
+        name: '/static/media/[name].[hash:8].[ext]',
+      },
+    },
+    ],
+  },
+
+	resolve: {
+    alias: {
+      '../../theme.config$': path.resolve(paths.appSrc, 'styling/theme.config'),
+      heading: path.resolve(paths.appSrc, 'styling/heading.less'),
+    },
+		extensions: [".js", ".jsx"],
+		modules: [
+      path.resolve('src'),
+      'node_modules',
+    ],
+	},
+
+	plugins: [
+		extractLess
+	]
+}

frontend/webpack/webpack.config.dev.js

@@ -0,0 +1,64 @@
+var path = require("path")
+var webpack = require("webpack")
+var assetsPath = path.join(__dirname, "..", "public", "assets")
+var publicPath = "/assets/"
+const configMerge = require('webpack-merge')
+const commonConfig = require('./webpack.config.common')
+
+const paths = require('./paths')
+
+// This is the development configuration.
+// It is focused on developer experience and fast rebuilds.
+// The production configuration is different and lives in a separate file.
+module.exports = configMerge(commonConfig, {
+	name: "browser",
+	mode: 'development',
+	devtool: "eval-source-map",
+
+	// The base directory (absolute path!) for resolving the entry option.
+	context: path.join(__dirname, "..", "src", "client"),
+
+	entry: {
+		app: [
+			"./client",
+			"webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true"
+		]
+	},
+
+	output: {
+		path: assetsPath,
+		filename: "[name].js",
+		publicPath: publicPath
+	},
+
+	module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+    }
+    ],
+  },
+
+	resolve: {
+    alias: {
+      '../../theme.config$': path.resolve(paths.appSrc, 'styling/theme.config'),
+      heading: path.resolve(paths.appSrc, 'styling/heading.less'),
+    },
+		extensions: [".js", ".jsx"],
+		modules: [
+      path.resolve('src'),
+      'node_modules',
+    ],
+	},
+
+	plugins: [
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.NoEmitOnErrorsPlugin(),
+		new webpack.DefinePlugin({
+			"process.env": {
+				NODE_ENV: JSON.stringify("development")
+			}
+		})
+	]
+})

frontend/webpack/webpack.config.prod.js

@@ -0,0 +1,60 @@
+var path = require("path")
+var webpack = require("webpack")
+var assetsPath = path.join(__dirname, "..", "public", "assets")
+var publicPath = "/assets/"
+const configMerge = require('webpack-merge')
+const commonConfig = require('./webpack.config.common')
+const paths = require('./paths')
+
+// This is the production configuration.
+// It compiles slowly and is focused on producing a fast and minimal bundle.
+// The development configuration is different and lives in a separate file.
+module.exports = configMerge(commonConfig, {
+	// The configuration for the client
+	name: "browser",
+	mode: 'production',
+	devtool: "source-map",
+
+	// The base directory (absolute path!) for resolving the entry option.
+	context: path.join(__dirname, "..", "src", "client"),
+
+	entry: {
+		app: "./client"
+	},
+
+	output: {
+		path: assetsPath,
+		filename: "[name].min.js",
+		publicPath: publicPath
+	},
+
+	resolve: {
+		extensions: [".js", ".jsx"],
+		modules: [
+      path.resolve('src'),
+      'node_modules',
+    ],
+	},
+
+	module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+    }
+	],
+  },
+  resolve: {
+    alias: {
+      '../../theme.config$': path.resolve(paths.appSrc, 'styling/theme.config'),
+      heading: path.resolve(paths.appSrc, 'styling/heading.less'),
+    },
+  },
+	plugins: [
+		new webpack.DefinePlugin({
+			"process.env": {
+				NODE_ENV: JSON.stringify("production")
+			}
+		})
+	]
+})