Add new requirements

.editorconfig

@@ -0,0 +1,26 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.yml]
+indent_size = 2
+indent_style = space
+
+[{.travis.yml,package.json}]
+# The indent size used in the `package.json` file cannot be changed
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+indent_size = 2
+indent_style = space

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "airbnb"
+}

composer.json

@@ -18,5 +18,14 @@
     },
     "require-dev": {
         "phpunit/phpunit": "^7.3.1"
+    },
+    "extra": {
+        "project-files": [
+            ".editorconfig",
+            "example.env",
+            "docker-compose.yml",
+            "serve.config.js",
+            "webpack.config.js"
+        ]
     }
 }

docker-compose.yml

@@ -0,0 +1,21 @@
+version: '3'
+services:
+ web:
+   image: twohill/silverstripe4
+   working_dir: /var/www
+   ports:
+    - 80:80
+   volumes:
+    - .:/var/www/html
+
+ database:
+   image: mariadb
+   volumes:
+    - db-data:/var/lib/mysql
+    - ./db:/root/import
+   restart: always
+   environment:
+     MYSQL_ROOT_PASSWORD: "${SS_DATABASE_PASSWORD}"
+
+volumes:
+ db-data:

example.env

@@ -0,0 +1,6 @@
+SS_DATABASE_USERNAME=root
+SS_DATABASE_PASSWORD=securerandompassword_PLEASE_CHANGE_ME
+SS_DATABASE_SERVER=database
+SS_DATABASE_NAME=silverstripe
+SS_DEPRECATION_ENABLED=true
+SS_ENVIRONMENT_TYPE=dev 

serve.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  add: (app, middleware) => {
+    app.use((ctx, next) => {
+      ctx.set('Access-Control-Allow-Origin', '*');
+      return next();
+    });
+    middleware.webpack();
+    middleware.content();
+  },
+};

webpack.config.js

@@ -0,0 +1,138 @@
+const Path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+function recursiveIssuer(m) {
+  if (m.issuer) {
+    return recursiveIssuer(m.issuer);
+  } else if (m.name) {
+    return m.name;
+  } else {
+    return false;
+  }
+}
+
+const ENV = process.env.NODE_ENV;
+const PATHS = {
+  MODULES: 'node_modules',
+  FILES_PATH: '../',
+  ROOT: Path.resolve(),
+  SRC: Path.resolve('app/client/src'),
+  DIST: Path.resolve('app/client/dist'),
+};
+const config = {
+  mode: ENV,
+  entry: {
+    main: `${PATHS.SRC}/js/main.js`,
+    bundle: `${PATHS.SRC}/styles/bundle.scss`,
+    editor: `${PATHS.SRC}/styles/editor.scss`,
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        bundleStyles: {
+          name: 'bundle',
+          test: (m, c, entry = 'bundle') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+          chunks: 'all',
+          enforce: true,
+        },
+        editorStyles: {
+          name: 'editor',
+          test: (m, c, entry = 'editor') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+  output: {
+    path: PATHS.DIST,
+    filename: 'js/[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options:  {
+              publicPath: '../',
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(sa|sc)ss$/,
+        use: [
+          {
+            loader:  MiniCssExtractPlugin.loader,
+            options:  {
+              publicPath: '../',
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+
+        ],
+      },
+      {
+        test: /\.(png|gif|jpe?g|svg)$/,
+        exclude: /fonts[\/\\]([\w_-]+)\.svg$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'images/[name].[ext]',
+        },
+      },
+      {
+        test: /fonts[\/\\]([\w_-]+)\.(woff2?|eot|ttf|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: 'fonts/[name].[ext]',
+        },
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].css',
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: `${PATHS.SRC}/images/`,
+        to: `${PATHS.DIST}/images/`,
+        flatten: true,
+      },
+    ]),
+  ],
+};
+
+module.exports = config;