Merge branch 'francisli-docker'

.eslintrc

@@ -38,7 +38,8 @@
       { "ignorePureComponents": true
     }],
     "class-methods-use-this": 0,
-    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}]
+    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}],
+    "no-return-assign": [2, "except-parens"]
   },
   "plugins": [
     "react", "jsx-a11y", "import"

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:8.9.0
+
+ENV APP_HOME=/opt/node/app \
+    TERM=xterm
+
+# Copy in the project files and set as working directory
+ADD . $APP_HOME
+WORKDIR $APP_HOME
+
+# Install node modules
+RUN git submodule init && \
+    npm install
+
+# Rebuild node-sass just to be safe
+RUN npm rebuild node-sass
+
+# For development, mark the directory as a mount override point
+VOLUME $APP_HOME
+
+# Expose default server port
+EXPOSE 8000

README.md

@@ -38,6 +38,32 @@ Please refer to [this gist](https://gist.github.com/andrewn/953ffd5cb17ac2634dc9
 
 The automatic redirection to HTTPS is turned off by default in development. If you need to test this behavior, put `FORCE_TO_HTTPS=true` in your `.env` file.
 
+## Development Installation using Docker
+
+Using Docker, you can have a complete, consistent development environment without having to manually install dependencies such as Node, Mongo, etc. It also helps isolate these dependencies and their data from other projects that you may have on the same computer that use different/conflicting versions, etc.
+
+Note that this takes up a significant amount of space on your machine. Make sure you have at least 5GB free. 
+
+1. Install Docker for your operating system
+   * Mac: https://www.docker.com/docker-mac
+   * Windows: https://www.docker.com/docker-windows
+2. Clone this repostory and cd into it
+3. `$ docker-compose build`
+4. `$ docker-compose run --rm server npm run fetch-examples`
+
+Now, anytime you wish to start the server with its dependencies, you can run:
+
+5. `$ docker-compose up`
+6. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
+
+To open a terminal/shell in the running Docker server (i.e. after `docker-compose up` has been run):
+
+7. `$ docker-compose exec server bash -l`
+
+If you don't have the full server environment running, you can launch a one-off container instance (and have it automatically deleted after you're done using it):
+
+8. `$ docker-compose run server --rm bash -l`
+
 ## Production Installation
 1. Clone this repostory and `cd` into it
 2. `$ git submodule init`

docker-compose.yml

@@ -0,0 +1,25 @@
+version: '2'
+services:
+  mongo:
+    image: mongo:3.4.7
+  server:
+    build: .
+    command: npm start
+    environment:
+      - API_URL=/api
+      - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
+      - PORT=8000
+      - SESSION_SECRET=override_in_dotenv
+      - AWS_ACCESS_KEY=override_in_dotenv
+      - AWS_SECRET_KEY=override_in_dotenv
+      - AWS_REGION=override_in_dotenv
+      - S3_BUCKET=override_in_dotenv
+      - GITHUB_ID=override_in_dotenv
+      - GITHUB_SECRET=override_in_dotenv
+    volumes:
+      - .:/opt/node/app
+      - /opt/node/app/node_modules
+    ports:
+      - '8000:8000'
+    depends_on:
+      - mongo

package.json

@@ -31,7 +31,7 @@
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-react-optimize": "^1.0.1",
     "babel-preset-stage-0": "^6.5.0",
-    "chunk-manifest-webpack-plugin": "^0.1.0",
+    "chunk-manifest-webpack-plugin": "^1.1.2",
     "css-loader": "^0.23.1",
     "cssnano": "^3.7.1",
     "eslint": "^3.14.0",
@@ -39,20 +39,20 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.9.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.8.5",
-    "node-sass": "^3.7.0",
+    "node-sass": "^4.5.3",
     "nodemon": "^1.9.2",
     "postcss-cssnext": "^2.7.0",
     "postcss-focus": "^1.0.0",
     "postcss-loader": "^0.9.1",
     "postcss-reporter": "^1.3.3",
-    "sass-loader": "^3.2.0",
+    "sass-loader": "^6.0.6",
     "style-loader": "^0.13.1",
     "webpack-manifest-plugin": "^1.1.0"
   },
   "engines": {
-    "node": ">=6"
+    "node": ">=8.9.0"
   },
   "dependencies": {
     "archiver": "^1.1.0",
@@ -124,7 +124,7 @@
     "shortid": "^2.2.6",
     "srcdoc-polyfill": "^0.2.0",
     "url": "^0.11.0",
-    "webpack": "^1.14.0",
+    "webpack": "^2.6.1",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0",
     "xhr": "^2.2.1"

webpack.config.dev.js

@@ -19,7 +19,7 @@ module.exports = {
 		publicPath: '/dist/'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
       'client',
       'node_modules'
@@ -50,19 +50,19 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: [/node_modules/, /.+\.config.js/],
-        loaders: ['babel', 'eslint-loader']
+        loaders: ['babel-loader', 'eslint-loader']
       },
       {
         test: /\.scss$/,
-        loaders: ['style', 'css', 'sass']
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
         test: /\.(svg|mp3)$/,
-        loader: 'file'
+        loader: 'file-loader'
       },
       {
           test: /fonts\/.*\.(eot|svg|ttf|woff|woff2)$/,
-          loader: 'file'
+          loader: 'file-loader'
       }
     ],
   },

webpack.config.prod.js

@@ -43,7 +43,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
       'client',
       'node_modules',
@@ -55,20 +55,23 @@ module.exports = {
       {
         test: /\.scss$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract('style', 'css!sass!postcss')
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader!sass-loader!postcss-loader'
+        })
       },
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loader: 'babel'
+        loader: 'babel-loader'
       },
       {
         test: /\.(svg|mp3)$/,
-        loader: 'file'
+        loader: 'file-loader'
       },
       {
           test: /fonts\/.*\.(eot|svg|ttf|woff|woff2)$/,
-          loader: 'file'
+          loader: 'file-loader'
       }
     ]
   },
@@ -87,7 +90,7 @@ module.exports = {
       minChunks: Infinity,
       filename: 'vendor.js',
     }),
-    new ExtractTextPlugin('app.[chunkhash].css', { allChunks: true }),
+    new ExtractTextPlugin({ filename: 'app.[chunkhash].css', allChunks: true }),
     new ManifestPlugin({
       basePath: '/',
     }),
@@ -99,19 +102,23 @@ module.exports = {
       compress: {
         warnings: false
       }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: () => [
+          postcssFocus(),
+          cssnext({
+            browsers: ['last 2 versions', 'IE > 9']
+          }),
+          cssnano({
+            autoprefixer: false
+          }),
+          postcssReporter({
+            clearMessages: true
+          })
+        ]
+      }
     })
   ],
 
-  postcss: () => [
-    postcssFocus(),
-    cssnext({
-      browsers: ['last 2 versions', 'IE > 9']
-    }),
-    cssnano({
-      autoprefixer: false
-    }),
-    postcssReporter({
-      clearMessages: true
-    })
-  ]
 };