Merge branch 'feature/sandbox-environment' into 'develop'

Created sandbox environment where you can run the dev servers as dependencies

See merge request bramw/baserow!1

README.md

@@ -7,28 +7,64 @@ $ docker network create baserow_default
 $ docker-compose up -d
 ```
 
-In order to start developing for the web frontend you need to execute the following commands.
+If you just want to try out the application I recommend using the sandbox environment to start. First you need to open bash in the just created container and then you should navigate to the sandbox directory, start the django development server, start the nuxt development server and visit http://localhost:3000 in your browser. An example of the commands is described below.
+
+```
+# terminal window 1
+$ docker exec -it baserow bash
+$ cd /baserow/sandbox
+$ yarn install
+$ yarn run dev
+
+# terminal window 2
+$ docker exec -it baserow bash
+$ cd /baserow/sandbox
+$ python manage.py runserver 0.0.0.0:8000
+```
+
+Both servers should be running and if you visit http://localhost:3000 you should see a working version of Baserow.
+
+## Development
+
+In order to start developing for the backend you need to execute the following commands.
+
+```
+docker exec -it baserow bash
+cd /baserow/backend/src/baserow
+python manage.py runserver 0.0.0.0:8000
+```
+
+In order to start developing for the web frontend you need to execute the following commands. Note that the backend server must also be running.
 
 ```
-# install web frontend dependencies
 $ docker exec -it baserow bash
 $ cd /baserow/web-frontend
 $ yarn install
 $ yarn run dev
-
-# build for production and launch server
-$ yarn run build
-$ yarn start
-
-# generate static project
-$ yarn run generate
-
-# lint
-$ yarn run eslint
-$ yarn run stylelint
-
-# test
-$ yarn run test
 ```
 
-When the development server starts you can visit http://localhost:3000.
+When the development servers are on you can visit http://localhost:3000.
+
+## Testing and linting
+
+There are a few commands you can use inside the container to test and lint parts of the code.
+
+```
+$ docker exec -it baserow bash
+$ cd /baserow
+
+# run pytest for the backend
+$ make lint-backend
+
+# run flake8 for the backend
+$ make test-backend
+
+# run jest for the web frontend
+$ make test-web-frontend
+
+# run eslint for the web frontend
+$ make eslint-web-frontend
+
+# run stylelint for the web frontend
+$ make stylelint-web-frontend
+```

backend/src/baserow/manage.py

@@ -0,0 +1,21 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'baserow.config.settings.dev')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

sandbox/manage.py

@@ -0,0 +1,5 @@
+from baserow.manage import main
+
+
+if __name__ == '__main__':
+    main()

sandbox/nuxt.config.js

@@ -0,0 +1,5 @@
+import path from 'path'
+
+import production from '../web-frontend/config/nuxt.config.production.js'
+
+export default production(path.resolve(__dirname))

sandbox/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "baserow-sandbox",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt --hostname 0.0.0.0",
+    "generate": "nuxt generate",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "baserow": "link:../web-frontend"
+  }
+}

web-frontend/config/nuxt.config.base.js

@@ -0,0 +1,44 @@
+export default {
+  mode: 'universal',
+
+  /*
+   ** Headers of the page
+   */
+  head: {
+    title: 'Baserow',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ]
+  },
+
+  /*
+   ** Customize the progress-bar color
+   */
+  loading: { color: '#fff' },
+
+  /*
+   ** Global CSS
+   */
+  css: ['@/assets/scss/default.scss'],
+
+  /*
+   ** Plugins to load before mounting the App
+   */
+  plugins: [{ src: '@/plugins/Vuelidate.js' }],
+
+  /*
+   ** Nuxt.js modules
+   */
+  modules: [
+    // Doc: https://axios.nuxtjs.org/usage
+    '@nuxtjs/axios'
+  ],
+
+  /*
+   ** Axios module configuration
+   */
+  axios: {
+    // See https://github.com/nuxt-community/axios-module#options
+  }
+}

web-frontend/config/nuxt.config.dev.js

@@ -0,0 +1,28 @@
+import merge from 'lodash.merge'
+import StyleLintPlugin from 'stylelint-webpack-plugin'
+
+import base from './nuxt.config.base.js'
+
+const config = {
+  build: {
+    extend(config, ctx) {
+      // Run ESLint ad Stylelint on save
+      if (ctx.isDev && ctx.isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/
+        })
+      }
+    },
+
+    plugins: [
+      new StyleLintPlugin({
+        syntax: 'scss'
+      })
+    ]
+  }
+}
+
+export default merge(base, config)

web-frontend/config/nuxt.config.production.js

@@ -0,0 +1,20 @@
+import path from 'path'
+
+import base from './nuxt.config.base.js'
+
+export default function(rootDir) {
+  const merge = require(rootDir + '/node_modules/lodash.merge')
+
+  /**
+   * Because the nuxt source files are located in we web-frontend directory, but
+   * the project is started from another directory we have to explicitly set the
+   * source directory which contains the nuxt files and the root directory which
+   * contains the node modules.
+   */
+  const config = {
+    rootDir: rootDir,
+    srcDir: path.resolve(__dirname, '../')
+  }
+
+  return merge(base, config)
+}

web-frontend/nuxt.config.js

@@ -1,72 +1,3 @@
-import StyleLintPlugin from 'stylelint-webpack-plugin'
+import config from './config/nuxt.config.dev.js'
 
-export default {
-  mode: 'universal',
-
-  /*
-   ** Headers of the page
-   */
-  head: {
-    title: 'Baserow',
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
-    ]
-  },
-
-  /*
-   ** Customize the progress-bar color
-   */
-  loading: { color: '#fff' },
-
-  /*
-   ** Global CSS
-   */
-  css: ['@/assets/scss/default.scss'],
-
-  /*
-   ** Plugins to load before mounting the App
-   */
-  plugins: [{ src: '@/plugins/Vuelidate.js' }],
-
-  /*
-   ** Nuxt.js modules
-   */
-  modules: [
-    // Doc: https://axios.nuxtjs.org/usage
-    '@nuxtjs/axios'
-  ],
-
-  /*
-   ** Axios module configuration
-   */
-  axios: {
-    // See https://github.com/nuxt-community/axios-module#options
-  },
-
-  /*
-   ** Build configuration
-   */
-  build: {
-    /*
-     ** You can extend webpack config here
-     */
-    extend(config, ctx) {
-      // Run ESLint ad Stylelint on save
-      if (ctx.isDev && ctx.isClient) {
-        config.module.rules.push({
-          enforce: 'pre',
-          test: /\.(js|vue)$/,
-          loader: 'eslint-loader',
-          exclude: /(node_modules)/
-        })
-
-        config.plugins.push(
-          new StyleLintPlugin({
-            syntax: 'scss'
-          })
-        )
-      }
-    }
-  }
-}
+export default config

web-frontend/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "baserow-web-frontend",
+  "name": "baserow",
   "version": "1.0.0",
+  "private": true,
   "description": "Baserow web frontend",
   "author": "Bram Wiepjes (Cloud 3)",
-  "private": true,
   "scripts": {
-    "dev": "nuxt --hostname 0.0.0.0",
     "build": "nuxt build",
-    "start": "nuxt start",
+    "dev": "nuxt --hostname 0.0.0.0",
     "generate": "nuxt generate",
+    "start": "nuxt start",
     "eslint": "eslint --ext .js,.vue .",
     "stylelint": "stylelint **/*.scss --syntax scss",
     "test": "jest"
@@ -17,8 +17,11 @@
     "@fortawesome/fontawesome-free": "^5.8.2",
     "@nuxtjs/axios": "^5.3.6",
     "cross-env": "^5.2.0",
+    "lodash.merge": "^4.6.1",
+    "node-sass": "^4.12.0",
     "normalize-scss": "^7.0.1",
     "nuxt": "^2.4.0",
+    "sass-loader": "^7.1.0",
     "vuelidate": "^0.7.4"
   },
   "devDependencies": {
@@ -40,10 +43,8 @@
     "eslint-plugin-standard": ">=4.0.0",
     "eslint-plugin-vue": "^5.2.2",
     "jest": "^24.1.0",
-    "node-sass": "^4.12.0",
     "nodemon": "^1.18.9",
     "prettier": "^1.16.4",
-    "sass-loader": "^7.1.0",
     "stylelint": "^9.2.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-webpack-plugin": "^0.10.5",

web-frontend/yarn.lock

@@ -6309,6 +6309,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"