boilerplate

.gitignore

@@ -0,0 +1,3 @@
+.idea
+node_modules
+build

Makefile

@@ -0,0 +1,21 @@
+all: build
+
+.PHONY: clean
+clean:
+	rm -rf dist
+	rm -rf node_modules
+
+node_modules: package.json
+	npm install
+
+sources=$(wildcard js/*) $(wildcard js/*/*) $(wildcard css/*/*)  $(wildcard css/*)
+
+.PHONY: build
+build: node_modules $(sources)
+	node node_modules/.bin/webpack --colors --display-error-details --config webpack.prod.config.js
+
+build/js/main.js: build
+
+.PHONY: watch
+watch: node_modules
+	node node_modules/.bin/webpack-dev-server --hot --inline --config webpack.dev.config.js

package.json

@@ -0,0 +1,17 @@
+{
+  "devDependencies": {
+    "@types/react": "^15.0.21",
+    "@types/react-dom": "^0.14.23",
+    "clean-webpack-plugin": "^0.1.16",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "postcss-cssnext": "^2.10.0",
+    "postcss-loader": "^1.3.3",
+    "postcss-nested": "^1.0.1",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "ts-loader": "^2.0.3",
+    "typescript": "^2.2.2",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: [
+		require("postcss-cssnext")(),
+		require('postcss-nested')
+	]
+};

src/App.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface AppState {
+
+}
+
+export class App extends React.Component<{}, AppState> {
+	render() {
+		return <div>app</div>;
+	}
+}

src/index.tsx

@@ -0,0 +1,32 @@
+'use strict';
+
+import * as React from 'react';
+import {render} from 'react-dom';
+import {App} from './App';
+import {AppContainer} from 'react-hot-loader';
+
+declare function require(path: string): any;
+declare const module: {
+	hot: {
+		accept: (path: string, cb: Function) => null
+	}
+};
+
+const root = document.createElement('div');
+document.body.appendChild(root);
+
+render((
+	<App/>
+), root);
+
+if (module.hot) {
+	module.hot.accept('./App', () => {
+		const RootContainer = require('./App').App;
+		render(
+			<AppContainer>
+				<RootContainer />
+			</AppContainer>,
+			root
+		);
+	});
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"lib": [
+			"dom",
+			"es2015.promise",
+			"es6"
+		],
+		"module": "ES6",
+		"moduleResolution": "node",
+		"target": "ES5",
+		"declaration": true,
+		"strictNullChecks": true,
+		"sourceMap": true,
+		"jsx": "react"
+	}
+}
+

webpack.dev.config.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+	devtool: 'source-map',
+	entry: {
+		app: [
+			// 'webpack-dev-server/client?http://localhost:3000',
+			// 'webpack/hot/only-dev-server',
+			'react-hot-loader/patch',
+			'./src/index.tsx'
+		]
+	},
+	output: {
+		path: path.join(__dirname, "build"),
+		filename: "[name]-[hash].js",
+		publicPath: '/'
+	},
+	resolve: {
+		extensions: ['.js', '.jsx', '.tsx', '.ts'],
+		// alias: {
+		// 	'react': 'preact-compat',
+		// 	'react-dom': 'preact-compat'
+		// }
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			title: 'demos.tf',
+			chunks: ['app']
+		}),
+		new webpack.NamedModulesPlugin()
+	],
+	module: {
+		rules: [
+			{test: /\.tsx?$/, use: ['react-hot-loader/webpack', 'ts-loader']},
+			{
+				test: /.*\.(gif|png|jpe?g|svg|webp)(\?.+)?$/i,
+				use: [
+					'url-loader?limit=5000&hash=sha512&digest=hex&name=[hash].[ext]'
+				]
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader', 'postcss-loader']
+			}
+		]
+	},
+	devServer: {
+		contentBase: path.resolve(__dirname, './src')
+	},
+};

webpack.prod.config.js

@@ -0,0 +1,63 @@
+'use strict';
+
+const webpack = require("webpack");
+const path = require("path");
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CleanPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+	devtool: 'source-map',
+	entry: {
+		app: [
+			'./src/index.tsx'
+		]
+	},
+	output: {
+		path: path.join(__dirname, "build"),
+		filename: "[name]-[hash].js",
+		libraryTarget: 'umd',
+		publicPath: '/'
+	},
+	resolve: {
+		extensions: ['.js', '.jsx', '.tsx', '.ts']
+	},
+	plugins: [
+		new CleanPlugin(['build']),
+		new ExtractTextPlugin({
+			filename: '[contenthash].css',
+			allChunks: true
+		}),
+		new webpack.NoEmitOnErrorsPlugin(),
+		new webpack.optimize.OccurrenceOrderPlugin(),
+		new webpack.optimize.UglifyJsPlugin(),
+		new webpack.DefinePlugin({
+			'process.env': {
+				// Useful to reduce the size of client-side libraries, e.g. react
+				NODE_ENV: JSON.stringify('production')
+			}
+		}),
+		new HtmlWebpackPlugin({
+			title: 'mapboundaries demos.tf',
+			chunks: ['app']
+		})
+	],
+	module: {
+		rules: [
+			{test: /\.tsx?$/, use: 'ts-loader'},
+			{
+				test: /.*\.(gif|png|jpe?g|svg|webp)(\?.+)?$/i,
+				use: [
+					'url-loader?limit=5000&hash=sha512&digest=hex&name=[hash].[ext]'
+				]
+			},
+			{
+				test: /\.css$/,
+				use: ExtractTextPlugin.extract({
+					fallback: "style-loader",
+					use: ['css-loader', 'postcss-loader']
+				})
+			}
+		]
+	}
+};