ubilabs · pwambach · Sep 18, 2019 · Sep 17, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+    "printWidth": 80,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": false,
+    "jsxBracketSameLine": true,
+    "arrowParens": "avoid"
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "esa-climate-from-space",
+  "version": "1.0.0",
+  "description": "Climate from Space application for ESAs CCI+ program.",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run clean && webpack -p",
+    "clean": "rm -rf ./dist",
+    "start": "webpack-dev-server",
+    "format": "prettier 'src/scripts/**/*.{ts,tsx}'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ubilabs/esa-climate-from-space.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ubilabs/esa-climate-from-space/issues"
+  },
+  "homepage": "https://github.com/ubilabs/esa-climate-from-space#readme",
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "^1.18.2",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
+    "terser-webpack-plugin": "^2.1.0",
+    "ts-loader": "^6.1.0",
+    "typescript": "^3.6.3",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.1"
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>ESA - Climate from space</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/src/main.styl b/src/main.styl
@@ -0,0 +1,2 @@
+body
+    background-color: red
diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx
@@ -0,0 +1,7 @@
+import React, {FunctionComponent} from 'react';
+
+const App: FunctionComponent<{}> = () => {
+  return <h1>Hello</h1>;
+};
+
+export default App;
diff --git a/src/scripts/custom.d.ts b/src/scripts/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.styl' {
+  const content: any;
+  export default content;
+}
diff --git a/src/scripts/index.tsx b/src/scripts/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './components/app/app';
+
+import styles from '../main.styl';
+
+console.log(styles);
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "target": "es5",
+    "jsx": "react"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,62 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = (env, {mode} = {}) => {
+  const isProduction = mode === 'production';
+  return {
+    entry: './src/scripts/index.tsx',
+    devtool: 'inline-source-map',
+    optimization: {
+      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/
+        },
+        {
+          test: /\.styl$/,
+          use: [
+            {
+              loader: isProduction
+                ? MiniCssExtractPlugin.loader
+                : 'style-loader'
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                modules: false
+              }
+            },
+            {loader: 'stylus-loader'}
+          ]
+        }
+      ]
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.styl']
+    },
+    output: {
+      filename: 'bundle.[hash].js',
+      path: path.resolve(__dirname, 'dist'),
+      hashDigestLength: 8
+    },
+    devServer: {
+      contentBase: path.join(__dirname, 'dist'),
+      port: 9000
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: 'src/index.html'
+      }),
+      new MiniCssExtractPlugin({
+        filename: 'styles.[hash].css'
+      })
+    ]
+  };
+};