Use Docker as dev environment

Author: kisenka

.env.sample

@@ -0,0 +1,5 @@
+NODE_ENV=development
+INDEX_NAME=%env.INDEX_NAME%
+KEY_FILE_LOCATION=%env.KEY_FILE_LOCATION%
+SEARCH_KEY=%env.SEARCH_KEY%
+SEARCH_USER=%env.SEARCH_USER%

.gitignore

@@ -34,4 +34,5 @@ pdf/kotlin-docs.pdf
 pdf/tmp.html
 *.pyc
 google-credentials.json
-package-lock.json
+package-lock.json
+.env

Dockerfile

@@ -13,4 +13,4 @@ RUN pip install -r /tmp/requirements.txt; \
     gem install kramdown;
 
 EXPOSE 5000
-CMD python /src/kotlin-website.py
+ENTRYPOINT python /src/kotlin-website.py

README.md

@@ -1,44 +1,35 @@
-[![official project](http://jb.gg/badges/official.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
-<a href="http://slack.kotlinlang.org/"><img src="http://slack.kotlinlang.org/badge.svg" height="20"></a>
+# Kotlin website
+[![Official project][project-badge]][project-url] [![Slack][slack-badge]][slack-url] 
 
-This is the source for the [Kotlin Web Site](http://kotlinlang.org)
+This is the source for the [http://kotlinlang.org](http://kotlinlang.org).
 
-- [Filing bugs](#filing-bugs)
 - [Installation](#installation)
-- [Working with site](#working-with-site)
-    - [Run](#run-site)
-    - [Data](#data)
-    - [Templates](#templates)
-    - [Page metadata](#page-metadata)
-    - [Writing content](#writing-content)
-
-
-Filing Bugs
-===========
-We use [YouTrack](http://youtrack.jetbrains.com/issues/KT#) for bug reports and suggestions. Click [here to report an issue](http://youtrack.jetbrains.com/newIssue?project=KT&clearDraft=true&c=Subsystems+Web+Site).
-
-Installation
-============
-
-## Prerequisites
-
-- Python 3. Kotlinlang is a [Flask](http://flask.pocoo.org/)-based site, so you'll need Python 3 to get it working.
-- Ruby + [kramdown](http://kramdown.gettalong.org/installation.html). Python has very poor support for Markdown, so kramdown is used as the Markdown-to-HTML converter.
-- [nodejs](https://nodejs.org/en/) + npm to build frontend assets
+- [How to run](#how-to-run)
+- [Project structure & overview](#project-structure)
+- [Writing content](#writing-content)
 
 ## Installation
 
-After installation of required tools run `npm i` to download all frontend dependencies and `pip install -r requirements.txt` to download backend dependencies.
+1. You will need Docker to run site lifecycle tasks. Installation for [macOS](https://docs.docker.com/docker-for-mac/install/#download-docker-for-mac) and 
+   [Windows](https://docs.docker.com/docker-for-windows/install/#download-docker-for-windows)).
+2. If you want to develop frontend Yarn package manager is also needed ([installation instructions](https://yarnpkg.com/lang/en/docs/install/)).
+   Don't forget to install frontend dependencies - `yarn install`.
+3. All specific app parameters stored in env-file. Copy sample file `.env.sample` and rename it to `.env`. 
+   Change variables values if needed.
 
-Working with this site
-======================
+## How to run
 
-## Running this site
+- **All in one option (suitable for content authors/writers)**: `docker-compose up`. 
+  It will build all stuff and create site on [http://localhost:5000](http://localhost:5000).
+- **Developer has 2-step option**:
+  - `docker-compose up website` will run only site at [http://localhost:5000](http://localhost:5000).
+  - `yarn start` will run webpack-dev-server on [http://localhost:9000](http://localhost:9000).
+     This address should be used to development. All pages from origin server will be proxied.
+     
+<a id="project-structure"></a>
+## Project structure & overview
 
-- Use `npm run build` command to build assets. If you are going to modify js/scss files use `npm start` instead.
-- To run site use `python kotlin-website.py` command 
-
-## Data
+### Data
 
 All data is stored in the \*.yml files in folder `_data`:
 
@@ -48,19 +39,21 @@ All data is stored in the \*.yml files in folder `_data`:
   It contains a list of videos or other categories. Maximum tree depth level is 3.
 - [events.yml](_data/events.yml) event data.
 
-## Templates
+### Templates
 
 Kotlinlang uses [Jinja2](http://jinja.pocoo.org/docs/dev/) templates that can be found in templates folder.
-Note that all Markdown files are processed as Jinja templates before being converted to HTML. This allows you to use all Jinja power inside Markdown (for example, build urls with url_for function).
+Note that all Markdown files are processed as Jinja templates before being converted to HTML. 
+This allows you to use all Jinja power inside Markdown (for example, build urls with url_for function).
 
-## Page metadata
+### Page metadata
 
 Every page can have an unlimited number of metadata fields. More information [here](http://jekyllrb.com/docs/frontmatter/).
 The most important of them are the page template (e.g. `layout: reference`) and its type (e.g. `type: tutorial`). `category` and `title` fields are added for future development.
 
-## Kotlin grammar reference
+### Kotlin grammar reference
 
-The Kotlin grammar reference (grammar.xml) is generated by the [Kotlin grammar generator](https://github.com/JetBrains/kotlin-grammar-generator) from the [Kotlin grammar definition](https://github.com/JetBrains/kotlin/tree/master/grammar).
+The Kotlin grammar reference (grammar.xml) is generated by the [Kotlin grammar generator](https://github.com/JetBrains/kotlin-grammar-generator) from the 
+[Kotlin grammar definition](https://github.com/JetBrains/kotlin/tree/master/grammar).
 
 ## Writing content
 
@@ -123,3 +116,14 @@ E.g.:
 >
 > By "changing the receiver" we mean `the receiver-variable`, not the receiver object.
 {:.note}
+```
+
+## Filing Bugs
+We use [YouTrack](http://youtrack.jetbrains.com/issues/KT) for bug reports and suggestions. 
+Click [here to report an issue](http://youtrack.jetbrains.com/newIssue?project=KT&clearDraft=true&c=Subsystems+Web+Site).
+
+
+[project-url]: https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub
+[project-badge]: http://jb.gg/badges/official.svg
+[slack-url]: http://slack.kotlinlang.org
+[slack-badge]: http://slack.kotlinlang.org/badge.svg

docker-compose.yml

@@ -1,12 +1,23 @@
-version: '2'
+version: '2.1'
 
 services:
   website:
     build:
       dockerfile: ./Dockerfile
       context: .
+    env_file:
+      - .env
     ports:
       - 5000:5000
     volumes:
       - ./:/src
-    working_dir: /src
+    working_dir: /src
+
+  frontend:
+    command: /bin/bash scripts/build-frontend.sh
+    env_file:
+      - .env
+    image: node:9
+    volumes:
+      - ./:/src
+    working_dir: /src

package.json

@@ -11,7 +11,8 @@
     "babel-core": "6.18.2",
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "codemirror": "https://github.com/codemirror/CodeMirror.git#f3e6d7ea61d0a69b57cad1ff8134fe07e8b28112",
+    "clean-webpack-plugin": "0.1.18",
+    "codemirror": "git://github.com/codemirror/codemirror.git#f3e6d7ea61d0a69b57cad1ff8134fe07e8b28112",
     "core-js": "^2.4.1",
     "cross-env": "1.0.7",
     "css-loader": "0.21.0",
@@ -40,6 +41,8 @@
     "query-string": "3.0.0",
     "resolve-url-loader": "^2.1.0",
     "rimraf": "2.5.2",
+    "rollup": "^0.34.10",
+    "rollup-plugin-buble": "^0.15.0",
     "sass-loader": "^6.0.6",
     "scrolltofixed": "1.0.6",
     "smoothscroll-polyfill": "0.3.4",
@@ -55,15 +58,9 @@
     "webpack-dev-server": "^2.7.1",
     "webpack-livereload-plugin": "0.4.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/JetBrains/kotlin-web-site"
-  },
   "scripts": {
-    "start": "rimraf ./_assets/* && cross-env NODE_ENV=development webpack --watch",
-    "start:server": "cross-env NODE_ENV=development webpack-dev-server",
-    "build": "rimraf ./_assets/* && cross-env NODE_ENV=production webpack -p --bail",
-    "postinstall": "cd node_modules/codemirror && yarn install && yarn run build",
-    "clean": "rimraf ./_assets"
+    "build": "webpack --bail",
+    "postinstall": "cd node_modules/codemirror && rollup -c",
+    "start": "webpack-dev-server"
   }
 }

scripts/build-frontend.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+set -ex
+
+yarn install --frozen-lockfile
+yarn run build

webpack.config.js

@@ -1,18 +1,23 @@
 const path = require('path');
-const Webpack = require('webpack');
+
+const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const LiveReloadPlugin = require('webpack-livereload-plugin');
+const CleanPlugin = require('clean-webpack-plugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 
 module.exports = (params = {}) => {
   const isProduction = process.env.NODE_ENV === 'production';
+  const isDevelopment = !isProduction;
   const env = isProduction ? 'production' : 'development';
   const isServer = process.argv.toString().includes('webpack-dev-server');
-  const originHost = 'localhost:5000';
+  const sourcemaps = params.sourcemaps || isDevelopment;
 
+  const siteHost = 'localhost:5000';
   const webDemoURL = params['webdemo-url'] || 'http://kotlin-web-demo-cloud.passive.aws.intellij.net';
   const indexName = params['index-name'] || 'dev_KOTLINLANG';
 
-  const webpackConfig = {
+  const config = {
     entry: {
       'common': './static/js/page/common.js',
       'index': './static/js/page/index/index.js',
@@ -33,6 +38,8 @@ module.exports = (params = {}) => {
       filename: '[name].js'
     },
 
+    devtool: sourcemaps ? 'source-map' : false,
+
     module: {
       rules: [
         {
@@ -109,25 +116,23 @@ module.exports = (params = {}) => {
     plugins: [
       new ExtractTextPlugin('[name].css'),
 
-      new Webpack.optimize.CommonsChunkPlugin({
+      new webpack.optimize.CommonsChunkPlugin({
         name: 'default',
         minChunks: 3
       }),
 
-      new Webpack.ProvidePlugin({
+      new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery',
         fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
         Promise: 'imports-loader?this=>global!exports-loader?global.Promise!core-js/es6/promise'
       }),
 
-      new Webpack.DefinePlugin({
+      new webpack.DefinePlugin({
         webDemoURL: JSON.stringify(webDemoURL),
         indexName: JSON.stringify(indexName),
-        'process.env': {
-          NODE_ENV: JSON.stringify(env)
-        }
+        'process.env.NODE_ENV': JSON.stringify(env)
       })
     ],
 
@@ -138,22 +143,27 @@ module.exports = (params = {}) => {
       stats: 'errors-only',
       proxy: {
         '/**': {
-          target: `http://${originHost}`,
+          target: `http://${siteHost}`,
           bypass: function (req) {
-            req.headers.host = originHost;
+            req.headers.host = siteHost;
           }
         }
       }
     }
   };
 
+  const plugins = config.plugins;
+
   if (!isServer) {
-    webpackConfig.plugins.push(
-      new LiveReloadPlugin({
-        appendScriptTag: false
-      })
-    );
+    plugins.push(new CleanPlugin(['_assets']))
+  }
+
+  if (isProduction) {
+    const minimizePlugin = new UglifyJsPlugin({ sourceMap: sourcemaps });
+    const minimizeLoaderOptionPlugin = new LoaderOptionsPlugin({ minimize: true });
+    plugins.push(minimizePlugin);
+    plugins.push(minimizeLoaderOptionPlugin);
   }
 
-  return webpackConfig;
+  return config;
 };