added web-frontend webpack environment

.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[Makefile]
+indent_style = tab
+
+[*.{js,yml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1 +1,8 @@
-.idea
+.DS_Store
+.tmp
+.sass-cache
+.idea
+npm-debug.log
+yarn-error.log
+node_modules
+web-frontend/_build

.gitlab-ci.yml

@@ -0,0 +1,20 @@
+image: ubuntu:18.04
+
+before_script:
+  - apt-get update && apt-get -y install make curl gnupg2
+
+stages:
+  - lint
+  - build
+
+eslint:
+  stage: lint
+  script:
+    - make install-web-frontend-dependencies
+    - (cd web-frontend && yarn eslint)
+
+stylelint:
+  stage: lint
+  script:
+    - make install-web-frontend-dependencies
+    - (cd web-frontend && yarn stylelint)

Dockerfile

@@ -0,0 +1,10 @@
+FROM ubuntu:18.04
+
+ADD . /baserow
+
+WORKDIR /baserow
+
+RUN apt-get update && apt-get -y install make curl gnupg2
+RUN make install-dependencies
+
+CMD tail -f /dev/null

Makefile

@@ -0,0 +1,11 @@
+install-web-frontend-dependencies:
+	curl -sL https://deb.nodesource.com/setup_10.x | bash
+	apt-get install -y nodejs
+
+	curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+	echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+	apt-get update && apt-get install -y yarn
+
+	(cd web-frontend && yarn install)
+
+install-dependencies: install-web-frontend-dependencies

README.md

@@ -1 +1,16 @@
-# Baserow
+# Baserow
+
+To first start Baserow make sure you have installed docker and docker-compose. After that execute the following commands.
+
+```
+docker network create baserow_default
+docker-compose up -d
+```
+
+For now it's only possible to work on the frontend SCSS components. In order to do so you can execute the commands below and then visit http://localhost:8080 in your browser.
+
+```
+docker exec -it baserow bash
+cd /baserow/web-frontend
+yarn dev
+```

docker-compose.yml

@@ -0,0 +1,15 @@
+version: "3"
+
+services:
+  baserow:
+    container_name: baserow
+    build: .
+    volumes:
+      - .:/baserow
+    ports:
+      - 8080:8080
+
+networks:
+  default:
+    external:
+      name: baserow_default

web-frontend/.eslintignore

@@ -0,0 +1,3 @@
+_build/*
+node_modules/*
+**/node_modules/*

web-frontend/.eslintrc

@@ -0,0 +1,32 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb-base",
+  "env": {
+    "commonjs": true,
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
+      }
+    }
+  },
+  "rules": {
+    "linebreak-style": 0,
+    "import/no-unresolved": [
+      2,
+      {
+        "devDependencies": true
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      2,
+      {
+        "devDependencies": true
+      }
+    ]
+  }
+}

web-frontend/.stylelintrc

@@ -0,0 +1,19 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "/regex/",
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin",
+          "return"
+        ]
+      }
+    ]
+  }
+}

web-frontend/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "baserow-web-frontend",
+  "title": "Baserow web frontend",
+  "description": "",
+  "url": "URL",
+  "author": "Bram Wiepjes (Cloud 3)",
+  "copyright": "2019",
+  "version": "1.0.0",
+  "main": "",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/bramw/baserow"
+  },
+  "scripts": {
+    "eslint": "eslint src",
+    "stylelint": "stylelint src/scss/**/*.scss",
+    "build": "webpack -p --progress --config webpack/webpack.prod.js",
+    "dev": "webpack-dev-server -d --progress --color --open --config webpack/webpack.dev.js"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.49",
+    "@babel/preset-env": "^7.0.0-beta.49",
+    "autoprefixer": "^8.6.2",
+    "babel-eslint": "^8.2.3",
+    "babel-loader": "8.0.0-beta.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-import": "^2.12.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.9.0",
+    "postcss-loader": "^2.1.5",
+    "prettier-eslint": "^8.8.1",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "stylelint": "^9.2.1",
+    "stylelint-config-standard": "^18.2.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.3",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.2"
+  },
+  "keywords": [
+    "webpack",
+    "babel",
+    "es6",
+    "eslint"
+  ]
+}

web-frontend/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Baserow</title>
+    </head>
+    <body>
+        <h1>Baserow components</h1>
+    </body>
+</html>

web-frontend/src/index.js

@@ -0,0 +1 @@
+import './scss/default.scss';

web-frontend/src/scss/default.scss

@@ -0,0 +1,3 @@
+body {
+  color: gray;
+}

web-frontend/webpack/config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+
+const config = {
+  'entry': path.join(__dirname, '../src'),
+  'output':  path.join(__dirname, '../public'),
+  'dist': path.join(__dirname, '../_build'),
+  'host': '0.0.0.0',
+  'port': 8080,
+  'jsFilename': './baserow.js',
+  'cssFilename': './baserow.css',
+  'sourceMaps': true,
+  'devtool': 'inline-source-map'
+};
+
+// Export config
+module.exports = config;

web-frontend/webpack/webpack.common.js

@@ -0,0 +1,126 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+
+const config = require('./config');
+
+const entry = {
+  baserow: config.entry,
+};
+
+/**
+ * Array of resolve modules entry and file extension to prevent ESLint errors.
+ */
+const resolve = {
+  modules: [config.entry, 'node_modules'],
+  extensions: ['*', '.js', '.json'],
+};
+
+const modules = {
+  rules: [
+    {
+      test: /\.js$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: 'babel-loader?cacheDirectory',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+        {
+          loader: 'eslint-loader',
+        },
+      ],
+    },
+    {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: config.sourceMaps,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                autoprefixer({
+                  browsers: ['last 5 versions'],
+                }),
+              ],
+              sourceMap: 'inline',
+            },
+          },
+        ],
+      }),
+    },
+    {
+      test: /\.(woff|woff2|eot|ttf|svg|ico|jpg|jpeg|png)$/,
+      loader: 'url-loader?limit=1000000',
+    },
+    {
+      test: /\.scss$/,
+      exclude: /node_modules/,
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: config.sourceMaps,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                autoprefixer({
+                  browsers: ['last 5 versions'],
+                }),
+              ],
+              sourceMap: 'inline',
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: config.sourceMaps,
+            },
+          },
+        ],
+      }),
+    },
+    {
+      test: /\.html$/,
+      exclude: /node_modules/,
+      loader: 'raw-loader',
+    },
+  ],
+};
+
+const plugins = [
+  new CleanWebpackPlugin([config.dist], {
+    allowExternal: true,
+  }),
+  new ExtractTextPlugin(config.cssFilename),
+  new HtmlWebpackPlugin({
+    template: `${config.output}/index.html`,
+  }),
+];
+
+const webpackConfig = {
+  entry,
+  resolve,
+  module: modules,
+  plugins,
+};
+
+module.exports = webpackConfig;

web-frontend/webpack/webpack.dev.js

@@ -0,0 +1,24 @@
+const merge = require('webpack-merge');
+
+const webpackCommon = require('./webpack.common');
+const config = require('./config');
+
+const output = {
+  path: config.output,
+  filename: config.jsFilename,
+};
+
+const devServer = {
+  contentBase: config.output,
+  host: config.host,
+  port: config.port,
+};
+
+const webpackConfig = {
+  output,
+  devServer,
+  watch: true,
+  devtool: config.devtool
+};
+
+module.exports = merge(webpackCommon, webpackConfig);

web-frontend/webpack/webpack.prod.js

@@ -0,0 +1,32 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+const webpackCommon = require('./webpack.common');
+const config = require('./config');
+
+const output = {
+  path: config.dist,
+  filename: config.jsFilename,
+};
+
+const plugins = [
+  new CopyWebpackPlugin([
+    {
+      from: `${config.output}/assets/`,
+      to: `${config.dist}/assets/`,
+    },
+  ]),
+  new UglifyJsPlugin(),
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+  }),
+];
+
+const webpackConfig = {
+  output,
+  plugins,
+};
+
+module.exports = merge(webpackCommon, webpackConfig);