create-application-template 0.3.0

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "create-application-template",
+  "version": "0.3.0",
+  "description": "provides a configured application template for you to build upon",
+  "main": "index.js",
+  "bin": {
+    "create-application-template": "bin/create-application-template.js"
+  },
+  "scripts": {
+    "start": "webpack serve --config webpack/webpack.config.js --env BUNDLER_ENV=dev",
+    "build": "webpack --config webpack/webpack.config.js --env BUNDLER_ENV=prod BUNDLER_WITH_PROFILING=false",
+    "build:profile": "webpack --config webpack/webpack.config.js --env BUNDLER_ENV=prod BUNDLER_WITH_PROFILING=true",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "dev": "concurrently \"npm run test:watch\" \"npm run start\"",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx,json}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx,json}\"",
+    "stylelint": "npx stylelint \"src/**/*.css\"",
+    "stylelint:fix": "npx stylelint --fix \"src/**/*.css\"",
+    "prepare": "husky"
+  },
+  "keywords": [
+    "template",
+    "react",
+    "typescript",
+    "webpack",
+    "jest",
+    "eslint",
+    "styelint"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/daveKontro/create-application-template.git"
+  },
+  "author": "Dave Kontrovitz",
+  "license": "MIT",
+  "proxy": "http://localhost:3000",
+  "engines": {
+    "node": "18"
+  },
+  "dependencies": {
+    "concurrently": "8.2.2",
+    "dotenv-flow": "4.1.0",
+    "husky": "9.0.11",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "yargs": "17.7.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.23.7",
+    "@babel/plugin-transform-runtime": "7.23.7",
+    "@babel/preset-env": "7.23.8",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
+    "@babel/runtime": "7.23.8",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.11.19",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
+    "babel-jest": "29.7.0",
+    "babel-loader": "9.1.3",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "confusing-browser-globals": "1.0.11",
+    "copy-webpack-plugin": "12.0.2",
+    "css-loader": "6.9.1",
+    "css-minimizer-webpack-plugin": "6.0.0",
+    "dotenv-webpack": "8.0.1",
+    "eslint": "8.56.0",
+    "eslint-plugin-eslint-comments": "3.2.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "html-webpack-plugin": "5.6.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-extended": "4.0.2",
+    "jest-watch-typeahead": "2.2.2",
+    "mini-css-extract-plugin": "2.8.0",
+    "react-refresh": "0.14.0",
+    "style-loader": "3.3.4",
+    "stylelint": "16.2.1",
+    "stylelint-config-recess-order": "5.0.0",
+    "stylelint-config-standard": "36.0.0",
+    "terser-webpack-plugin": "5.3.10",
+    "typescript": "5.2.2",
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-manifest-plugin": "5.0.0",
+    "webpack-merge": "5.10.0",
+    "whatwg-fetch": "3.6.20"
+  }
+}

package/src/app.d.ts

@@ -0,0 +1,6 @@
+declare module '*.png'
+declare module '*.svg' {
+  const content: string
+  export default content
+}
+declare module '*.module.css'

package/src/assets/cat.svg

@@ -0,0 +1,14 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#cec2eb">
+  <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="SVGRepo_iconCarrier">
+    <style type="text/css"> .st0{fill:#cec2eb;}</style>
+    <g>
+      <path class="st0" d="M430.762,126.907c-42.384-89.329-67.753-89.329-78.722-89.329c-1.947,0-3.884,0.167-5.785,0.482 c-18.1,3.014-41.374,22.031-69.302,56.579h-20.955h-20.974c-27.909-34.548-51.202-53.566-69.301-56.579 c-1.891-0.315-3.829-0.482-5.758-0.482h-0.25c-11.108,0-36.412,0.649-78.499,89.329C34.188,164.608-32.49,256.506,18.091,366.094 c49.996,108.328,191.425,108.328,237.907,108.328c46.472,0,187.911,0,237.907-108.318 C544.495,256.506,477.809,164.608,430.762,126.907z M468.055,354.161c-41.15,89.134-161.411,91.776-212.056,91.776 c-50.626,0-170.906-2.642-212.038-91.776c-56.969-123.432,60.121-208.886,60.121-208.886s36.551-79.213,55.875-79.213l1.094,0.093 c18.99,3.162,60.14,56.969,60.14,56.969h34.808h34.808c0,0,41.15-53.807,60.14-56.969l1.094-0.093 c19.305,0,55.875,79.213,55.875,79.213S525.024,230.729,468.055,354.161z"/>
+      <path class="st0" d="M317.222,368.467c-7.983,1.91-14.715,2.708-20.324,2.708c-7.446,0-12.832-1.391-16.866-3.422 c-5.981-3.059-9.458-7.621-11.841-13.5c-2.327-5.832-3.171-12.851-3.162-19.157c0-3.95,0.333-7.427,0.695-10.329l16.718-16.718 c3.078-3.079,4.005-7.714,2.336-11.73c-1.669-4.024-5.582-6.648-9.94-6.648h-37.683c-4.45,0-8.437,2.745-10.032,6.899 c-1.614,4.154-0.482,8.864,2.819,11.85l16.096,14.576c0.464,3.115,0.927,7.325,0.918,12.118c0.045,8.438-1.531,18.016-5.954,24.581 c-2.216,3.32-5.016,6.018-9.04,8.057c-4.025,2.031-9.42,3.422-16.857,3.422c-5.601,0-12.341-0.798-20.326-2.716 c-4.339-1.039-8.697,1.641-9.736,5.971c-1.029,4.339,1.651,8.697,5.981,9.736c8.976,2.142,16.941,3.143,24.081,3.152 c9.448,0,17.496-1.808,24.126-5.146c7.779-3.895,13.222-9.866,16.857-16.347c0.52,0.918,0.853,1.864,1.428,2.763 c3.551,5.387,8.623,10.246,15.243,13.584c6.639,3.338,14.688,5.156,24.136,5.146c7.14,0,15.104-1.01,24.08-3.162 c4.339-1.038,7.009-5.387,5.972-9.726C325.911,370.1,321.553,367.43,317.222,368.467z"/>
+      <path class="st0" d="M146.011,241.809c0,13.983,11.349,25.323,25.332,25.323c13.982,0,25.313-11.34,25.313-25.323 c0-13.983-11.331-25.322-25.313-25.322C157.36,216.487,146.011,227.826,146.011,241.809z"/>
+      <path class="st0" d="M340.663,267.132c13.982,0,25.323-11.34,25.323-25.323c0-13.983-11.341-25.322-25.323-25.322 c-13.983,0-25.322,11.34-25.322,25.322C315.341,255.792,326.68,267.132,340.663,267.132z"/>
+    </g>
+  </g>
+</svg>

package/src/components/App.spec.tsx

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react'
+import { App } from './App'
+
+test('renders title', () => {
+  render(<App />)
+
+  expect(screen.getByText(/create application template/i)).toBeInTheDocument()
+})

package/src/components/App.tsx

@@ -0,0 +1,24 @@
+import '../styles/app.css'
+import logo from '../assets/cat.svg'
+import { Counter } from './Counter'
+
+export const App = () => {
+  return (
+    <div className='container--main'>
+      <header className='header--wrapper'>
+        <h1>Create Application Template</h1>
+        <h2>Configured and under your control!</h2>
+      </header>
+      <section className='section--wrapper'>
+        <code className='card--env'>[NODE_ENV={process.env.NODE_ENV}]</code>
+        <code className='card--env'>[EXAMPLE={process.env.EXAMPLE}]</code>
+      </section>
+      <section className='section--wrapper'>
+        <img src={logo} className='logo--app' alt='logo' />
+      </section>
+      <section className='section--wrapper'>
+        <Counter />
+      </section>
+    </div>
+  )
+}

package/src/components/Counter.spec.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { Counter } from './Counter'
+
+test('count increases per click', async () => {
+  render(<Counter />)
+  const button = await screen.findByRole('button', { name: /count/i })
+
+  const user = userEvent.setup()
+  await user.click(button)
+  const results = button.innerHTML.match(/\d/g)
+
+  expect(results).toBeArrayOfSize(1)
+  expect(results).toIncludeAllMembers(['1'])
+})

package/src/components/Counter.tsx

@@ -0,0 +1,21 @@
+import '../styles/counter.css'
+import { FC, useState } from 'react'
+
+// NOTE update count then edit App.tsx... thanks
+// to ReactRefreshWebpackPlugin state is preserved
+
+type Count = number
+
+export const Counter: FC = (): JSX.Element => {
+  const [count, setCount] = useState<Count>(0)
+
+  const handleClickCounter = () => setCount((count: Count) => ++count)
+
+  return (
+    <div>
+      <button id='counter' onClick={handleClickCounter}>
+        count:&nbsp;{count}
+      </button>
+    </div>
+  )
+}

package/src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <meta name='theme-color' content='#000000' />
+    <meta
+      name='Create Application Template'
+      content='demo app'
+    />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>You must enable JavaScript to run this app.</noscript>
+    <div id='root'></div>
+  </body>
+</html>

package/src/index.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './styles/index.css'
+import { App } from './components/App'
+
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/src/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: /

package/src/styles/app.css

@@ -0,0 +1,53 @@
+.container--main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  font-size: max(1em, 18px);
+  color: #cec2eb;
+  background-color: #454145;
+}
+
+.header--wrapper {
+  text-align: center;
+}
+
+.section--wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 2vh;
+}
+
+.logo--app {
+  height: 240px;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo--app {
+    animation: logo--app-pulse infinite 10s ease;
+  }
+}
+
+@keyframes logo--app-pulse {
+  0% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+
+  50% {
+    opacity: 1.0;
+    transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+}
+
+.card--env {
+  margin: 0.4vh;
+  filter: brightness(0.8);
+}

package/src/styles/counter.css

@@ -0,0 +1,14 @@
+button#counter {
+  height: 40px;
+  padding: 10px;
+  font-size: 18px;
+  color: #cec2eb;
+  background-color: #454145;
+  border: 1px solid #cec2eb;
+  border-radius: 8px;
+  transition-duration: 0.5s;
+}
+
+button#counter:hover {
+  border-radius: 20px;
+}

package/src/styles/index.css

@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'exo2-regular';
+  src: url('../fonts/Exo2-Regular.ttf');
+}
+
+body {
+  margin: 0;
+  font-family: 'exo2-regular', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "types": [
+      "@types/node",
+      "@types/react",
+      "@types/react-dom",
+      "@types/jest",
+      "jest-extended",
+      "@testing-library/jest-dom"
+    ],
+    // "allowJs": true, /* allow javascript files to be compiled */,
+    // "checkJs": true, /* report errors in .js files; works with allowJs */,
+  },
+  "include": ["src/**/*"]
+}

package/webpack/utilities/createEnvironmentHash.js

@@ -0,0 +1,8 @@
+const { createHash } = require('crypto')
+
+module.exports = ({ processEnv }) => {
+  const hash = createHash('md5')
+  hash.update(JSON.stringify(processEnv))
+
+  return hash.digest('hex')
+}

package/webpack/utilities/env.js

@@ -0,0 +1,8 @@
+// NOTE passed in via webpack --env
+
+module.exports = Object.freeze({
+  BUNDLER_ENV: {
+    prod: 'prod',
+    dev: 'dev',
+  },
+})

package/webpack/utilities/generateAssetManifest.js

@@ -0,0 +1,16 @@
+module.exports = (seed, files, entrypoints) => {
+  const manifestFiles = files.reduce((manifest, file) => {
+    manifest[file.name] = file.path
+
+    return manifest
+  }, seed)
+
+  const entrypointFiles = entrypoints.main.filter(
+    fileName => !fileName.endsWith('.map')
+  )
+
+  return {
+    files: manifestFiles,
+    entrypoints: entrypointFiles,
+  }
+}

package/webpack/utilities/getPaths.js

@@ -0,0 +1,57 @@
+const path = require('path')
+const env = require('./env')
+
+// NOTE root path assumes execution from react app root
+
+const getPaths = ({ BUNDLER_ENV }) => {
+  const isProduction = (BUNDLER_ENV === env.BUNDLER_ENV.prod)
+
+  return {
+    root: process.cwd(),
+    get jsconfigJson() { return path.join(this.root, 'jsconfig.json') },
+    get tsconfigJson() { return path.join(this.root, 'tsconfig.json') },
+    get build() { return path.join(this.root, 'build') },
+    static: {
+      static: 'static',
+      get css() {
+        return {
+          css: path.join(this.static, 'css'),
+          get filenameCss() { return path.join(this.css, '[name].[contenthash].css') },
+          get chunkFilenameCss() { return path.join(this.css, '[name].[contenthash].chunk.css') },
+        }
+      },
+      get js() {
+        const filenameJs = isProduction ? '[name].[contenthash].js' : '[name].js'
+        const chunkFilenameJs = isProduction ? '[name].[contenthash].chunk.js' : '[name].chunk.js'
+
+        return {
+          js: path.join(this.static, 'js'),
+          get filenameJs() { return path.join(this.js, filenameJs) },
+          get chunkFilenameJs() { return path.join(this.js, chunkFilenameJs) },
+        }
+      },
+      get media() {
+        return {
+          media: path.join(this.static, 'media'),
+          get filenameExt() { return path.join(this.media, '[name].[hash][ext]') },
+        }
+      },
+    },
+    get src() {
+      return {
+        src: path.join(this.root, 'src'),
+        get indexTsx() { return path.join(this.src, 'index.tsx') },
+        get indexHtml() { return path.join(this.src, 'index.html') },
+        get public() { return path.join(this.src, 'public') },
+        get assets() {
+          return {
+            assets: path.join(this.src, 'assets'),
+            get faviconIco() { return path.join(this.assets, 'favicon.ico') },
+          }
+        },
+      }
+    },
+  }
+}
+
+module.exports = getPaths

package/webpack/utilities/getTerserOptions.js

@@ -0,0 +1,47 @@
+// NOTE npm module react-scripts' options where the starting point,
+// comments marked with :rs: are paraphrased from react-scripts
+
+module.exports = ({ BUNDLER_WITH_PROFILING }) => {
+  const withProfiling = (BUNDLER_WITH_PROFILING)
+
+  return {
+    parse: {
+      // :rs: want terser to parse ecma 8 code however, don't want it
+      // to apply minification steps that turns valid ecma 5 code
+      // into invalid ecma 5 code... this is also why compress and 
+      // output only apply transformations that are ecma 5 safe
+      // https://github.com/facebook/create-react-app/pull/4234
+      ecma: 8,
+    },
+    compress: {
+      ecma: 5,
+      warnings: false,
+      // :rs: disabled b/c of an issue with Uglify breaking seemingly valid code:
+      // https://github.com/facebook/create-react-app/issues/2376
+      // pending further investigation:
+      // https://github.com/mishoo/UglifyJS2/issues/2011
+      comparisons: false,
+      // :rs: disabled because of an issue with Terser breaking valid code:
+      // https://github.com/facebook/create-react-app/issues/5250
+      // pending further investigation:
+      // https://github.com/terser-js/terser/issues/120
+      inline: 2,
+    },
+    mangle: {
+      // to work around the Safari 10 loop iterator 
+      // warning "Cannot declare a let variable twice"
+      // (although, i think safari is kind of right)
+      safari10: true,
+    },
+    // :rs: for profiling in devtools
+    keep_classnames: withProfiling,
+    keep_fnames: withProfiling,
+    output: {
+      ecma: 5,
+      comments: false,
+      // :rs: emoji and regex not minified properly using default
+      // https://github.com/facebook/create-react-app/issues/2488
+      ascii_only: true,
+    },
+  }
+}

package/webpack/webpack.common.js

@@ -0,0 +1,161 @@
+const fs = require('fs')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const Dotenv = require('dotenv-webpack')
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+const env = require('./utilities/env')
+const getPaths = require('./utilities/getPaths')
+const createEnvironmentHash = require('./utilities/createEnvironmentHash')
+const generateAssetManifest = require('./utilities/generateAssetManifest')
+
+// styles regexps
+const reCss = /\.css$/
+const reCssModule = /\.module\.css$/
+
+module.exports = (webpackEnv) => {
+  const { BUNDLER_ENV } = webpackEnv
+  const { INLINE_SIZE_LIMIT } = process.env
+
+  const paths = getPaths({ BUNDLER_ENV })
+
+  // NOTE it's preferable to isolate settings in appropriate 
+  // files, but it's not always practical, hence "isProduction"
+  const isProduction = (BUNDLER_ENV === env.BUNDLER_ENV.prod)
+  const isDevelopment = (BUNDLER_ENV === env.BUNDLER_ENV.dev)
+
+  const styleLoaders = [
+    ...(isProduction
+      ? [{
+        loader: MiniCssExtractPlugin.loader,
+        options: {
+          // css is located in 'static/css', use publicPath
+          // to locate index.html directory relative to css
+          publicPath: '../../',
+        },
+      }]
+      : ['style-loader']
+    ),
+  ]
+
+  return {
+    entry: paths.src.indexTsx,
+    resolve: {
+      // can now leave off extentions when importing
+      extensions: ['.tsx', '.jsx', '.ts', '.js'],
+    },
+    watchOptions: {
+      ignored: ['**/node_modules'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(ts|js)x?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: [
+                  // for use with ReactRefreshWebpackPlugin
+                  isDevelopment
+                    && require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
+                cacheDirectory: true,
+                cacheCompression: false,
+                compact: isProduction,
+              },
+            },
+          ],
+        },
+        {
+          test: reCss,
+          use: [...styleLoaders, 'css-loader'],
+          exclude: reCssModule,
+        },
+        {
+          test: reCssModule,
+          use: [
+            ...styleLoaders,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                modules: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: parseInt(INLINE_SIZE_LIMIT || 10000),
+            },
+          },
+        },
+      ],
+    },
+    output: {
+      path: paths.build,
+      pathinfo: isProduction ? false : true,
+      filename: paths.static.js.filenameJs,
+      chunkFilename: paths.static.js.chunkFilenameJs,
+      asyncChunks: true,
+      clean: true,
+      assetModuleFilename: paths.static.media.filenameExt,
+      publicPath: '',  // public url of build, use in build/index.html
+    },
+    cache: {  // used in development mode
+      type: 'filesystem',
+      version: createEnvironmentHash({ processEnv: process.env }),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.tsconfigJson, paths.jsconfigJson].filter(file =>
+          fs.existsSync(file)
+        ),
+      },
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: paths.src.indexHtml,
+        favicon: paths.src.assets.faviconIco,
+        title: 'Application Template',
+        ...(isProduction && {
+          minify: {
+            removeComments: true,
+            collapseWhitespace: true,
+            removeRedundantAttributes: true,
+            useShortDoctype: true,
+            removeEmptyAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            keepClosingSlash: true,
+            minifyJS: true,
+            minifyCSS: true,
+            minifyURLs: true,
+          },
+        }),
+      }),
+      new WebpackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: '/',
+        generate: generateAssetManifest,
+      }),
+      new CopyPlugin({
+        patterns: [{
+          from: paths.src.public,
+          to: paths.build,
+        }],
+      }),
+      new Dotenv(),
+    ],
+  }
+}