Initial commit

erikh3 · erikh3 · commit ac7123e2ec3f · 2017-02-05T14:59:37.000+01:00
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,4 @@
+.git/
+.gitignore
+LICENSE
+README.md
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,17 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+app/node_modules
+
+# Webpack autogenerate files
+app/dist
+
+.idea
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,25 @@
+FROM node:7.4.0
+
+# download and configure nginx for production use
+RUN apt-get update && apt-get install -y nginx
+RUN mkdir -p /app/dist && chown www-data:www-data /app/dist
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# download dependancies to /tmp
+WORKDIR /tmp
+COPY app/package.json /tmp/
+RUN npm config set registry http://registry.npmjs.org/ &&\
+    npm install
+
+# copy node_modules from /tmp and copy ./app from host to image
+WORKDIR /app
+COPY ./app/ /app/
+RUN cp -a /tmp/node_modules /app/
+
+# set mode to production by default
+ENV NODE_ENV=production
+
+# run webpack in production
+CMD ["npm", "run", "production"]
+
+EXPOSE 80
diff --git a/app/.babelrc b/app/.babelrc
@@ -0,0 +1,3 @@
+{
+  'presets': ['react', 'es2015']
+}
diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "generic-react-docker",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "webpack-development": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js",
+    "dev": "echo Open at http://localhost:8080 && npm run webpack-development",
+    "webpack-production": "NODE_ENV='production' ./node_modules/.bin/webpack --config webpack.config.prod.js",
+    "production": "npm run webpack-production && echo Open at http://localhost:80 && service nginx start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Driftersk/generic-react-docker"
+  },
+  "author": "df",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Driftersk/generic-react-docker/issues"
+  },
+  "homepage": "https://github.com/Driftersk/generic-react-docker",
+  "devDependencies": {
+    "babel-core": "^6.3.26",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "css-loader": "^0.26.1",
+    "file-loader": "^0.10.0",
+    "style-loader": "^0.13.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.4.0",
+    "react-hot-loader": "^1.3.1",
+    "webpack-dev-server": "^2.3.0"
+  },
+  "dependencies": {
+    "babel-preset-es2015": "^6.3.13",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "webpack": "^2.2.1"
+  }
+}
diff --git a/app/src/css/style.styl b/app/src/css/style.styl
@@ -0,0 +1,3 @@
+body
+  background: embedurl('../images/electronics/image.jpg')
+  color: red
diff --git a/app/src/images/abstract.jpg b/app/src/images/abstract.jpg
diff --git a/app/src/images/electronics/image.jpg b/app/src/images/electronics/image.jpg
diff --git a/app/src/index.html b/app/src/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Webpack + React</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Generic Webpack + React">
+    <meta name="author" content="">
+
+    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+    <script src="https://raw.githubusercontent.com/aFarkas/html5shiv/master/dist/html5shiv.min.js"></script>
+    <![endif]-->
+
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script src="bundle.js"></script>
+</html>
diff --git a/app/src/index.js b/app/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import styles from './css/style.styl';
+import image from './images/abstract.jpg'
+
+ReactDOM.render(<div>
+  <pre>yay helpp</pre>
+  <img src={image} />
+</div>, document.getElementById('app'));
diff --git a/app/webpack.config.dev.js b/app/webpack.config.dev.js
@@ -0,0 +1,42 @@
+const webpack = require('webpack');
+
+const paths = require('./webpack.paths');
+
+module.exports = {
+  devServer: {
+    hot: true,
+    contentBase: './src/',
+    host: '0.0.0.0',
+    stats: 'minimal'
+  },
+  devtool: 'cheap-module-eval-source-map',
+  entry: [
+    paths.javascriptEntryPath,
+    paths.htmlEntryPath
+  ],
+  output: {
+    path: paths.buildPath,
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loaders: ['react-hot-loader', 'babel-loader']
+    }, {
+      test: /\.html$/,
+      loader: 'file-loader?name=[name].[ext]'
+    }, {
+      test: /\.styl$/,
+      loader: 'style-loader!css-loader!stylus-loader'
+    }, {
+      test: /\.(jpg|png|svg|bmp|gif)$/,
+      loader: 'file-loader?name=[path][name].[ext]'
+    }]
+  },
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  ]
+};
diff --git a/app/webpack.config.prod.js b/app/webpack.config.prod.js
@@ -0,0 +1,44 @@
+const webpack = require('webpack');
+
+const paths = require('./webpack.paths');
+
+module.exports = {
+  devtool: 'cheap-module-source-map',
+  entry: [
+    paths.javascriptEntryPath,
+    paths.htmlEntryPath
+  ],
+   output: {
+    path: paths.buildPath,
+    filename: 'bundle.js',
+  },
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+    }, {
+      test: /.html$/,
+      loader: 'file-loader?name=[name].[ext]',
+    }, {
+      test: /\.styl$/,
+      loader: 'style-loader!css-loader!stylus-loader'
+    }, {
+      test: /\.(jpg|png|svg|bmp|gif)$/,
+      loader: 'file-loader?name=[path][name].[ext]'
+    }],
+  },
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        screw_ie8: true
+      }
+    })
+  ]
+};
diff --git a/app/webpack.paths.js b/app/webpack.paths.js
@@ -0,0 +1,8 @@
+const path = require('path');
+
+
+module.exports = {
+  javascriptEntryPath: path.resolve(__dirname, 'src', 'index.js'),
+  htmlEntryPath: path.resolve(__dirname, 'src', 'index.html'),
+  buildPath: path.resolve(__dirname, 'dist')
+};
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,40 @@
+version: "2"
+
+services:
+  web:
+    build: .
+    image: generic-react
+    container_name: generic-react
+    env_file:
+      - ./mode.env
+    ports:
+      # for production
+      - "80:80"
+      # for development
+      - "8080:8080"
+    volumes:
+      - ./app/:/app/:rw
+    command: >
+      sh -c '
+        if test -d node_modules;
+        then
+          echo node_modules already exist in `pwd`;
+        else
+          cp -a /tmp/node_modules /app/;
+        fi &&
+        if test -d dist;
+        then
+          echo dist already exist in `pwd`;
+        else
+          mkdir dist;
+        fi &&
+        chown www-data:www-data dist &&
+        if [ $${NODE_ENV} = "production" ] || [ $${NODE_ENV} = "PRODUCTION" ];
+        then
+          echo Running in PRODUCTION mode.
+          npm run production
+        else
+          echo Running in DEVELOPMENT mode.
+          npm run dev
+        fi
+      '
diff --git a/mode.env b/mode.env
@@ -0,0 +1 @@
+NODE_ENV=production
diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,77 @@
+user www-data;
+worker_processes 4;
+pid /var/run/nginx.pid;
+
+# keep nginx running in foreground
+daemon off;
+
+events {
+    worker_connections  1024;
+    # multi_accept on;
+}
+
+http {
+	##
+	# Basic Settings
+	##
+
+	sendfile on;
+	tcp_nopush on;
+	tcp_nodelay on;
+	keepalive_timeout 65;
+	types_hash_max_size 2048;
+	# server_tokens off;
+
+	# server_names_hash_bucket_size 64;
+	# server_name_in_redirect off;
+
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    ##
+	# Logging Settings
+	##
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log  /var/log/nginx/access.log  main;
+    error_log  /var/log/nginx/error.log warn;
+
+    ##
+	# Gzip Settings
+	##
+
+	gzip on;
+	gzip_disable "msie6";
+
+	# gzip_vary on;
+    # gzip_proxied any;
+    # gzip_comp_level 6;
+    # gzip_buffers 16 8k;
+    # gzip_http_version 1.1;
+    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    ##
+    # Virtual Host Configs
+    ##
+
+    include /etc/nginx/conf.d/*.conf;
+
+    server {
+        listen 80 default_server;
+        listen [::]:80 default_server;
+
+        root /app/dist;
+
+        index index.html;
+
+        server_name _;
+
+        location / {
+        	# First attempt to serve request as file, then
+        	# as directory, then fall back to displaying a 404.
+        	try_files $uri $uri/ =404;
+        }
+    }
+}
diff --git a/start-development.sh b/start-development.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+echo "NODE_ENV=dev" > mode.env
+docker-compose up
diff --git a/start-production.sh b/start-production.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+echo "NODE_ENV=production" > mode.env
+docker-compose up
diff --git a/webpack.config.prod.js.save b/webpack.config.prod.js.save
@@ -0,0 +1,28 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const javascriptEntryPath = path.resolve(__dirname, 'src', 'index.js');
+const htmlEntryPath = path.resolve(__dirname, 'src', 'index.html');
+const buildPath = path.resolve(__dirname, 'public', 'build');
+
+module.exports = {
+  entry: [
+    javascriptEntryPath,
+    htmlEntryPath
+  ],
+   output: {
+    path: buildPath,
+    filename: bundle.js,
+  },
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /(node_modules|bower_compoments)/,
+      query:loader: 'babel-loader',
+      
+    }],
+  },
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin()
+  ]
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +.git/
 +.gitignore
 +LICENSE
 +README.md
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ 'presets': ['react', 'es2015']`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body`
	`2`	`+ background: embedurl('../images/electronics/image.jpg')`
	`3`	`+ color: red`