setup frontend project

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }

index-web.js

@@ -0,0 +1 @@
+import "./src/web/index"

package.json

@@ -6,15 +6,28 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "format": "prettier --write '**/*.{js,css,json,md}'"
+    "format": "prettier --write '**/*.{js,css,json,md}'",
+    "build-web": "webpack-cli --config webpack.config.web.js",
+    "build": "npm run build-web && wrangler build",
+    "preview": "npm run build-web && wrangler preview"
   },
   "author": "Peter Cai <peter@typeblog.net>",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
     "coffee-loader": "^0.9.0",
     "coffeescript": "^2.5.1",
     "fast-xml-parser": "^3.16.0",
+    "html-webpack-inline-source-plugin": "0.0.10",
+    "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",
-    "webpack": "^4.41.6"
+    "raw-loader": "^4.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11"
   }
 }

src/index.coffee

@@ -2,6 +2,7 @@ import * as util from './util'
 import _ from './prelude'
 import S3 from './aws/s3'
 import config from '../config.json'
+import indexHtml from '../worker/index.html'
 
 s3 = new S3 config
 
@@ -16,6 +17,15 @@ buildInvalidResponse = (msg) ->
     status: 400
 
 handleRequest = (event) ->
+  # Handle request for static home page first
+  if event.request.method == "GET"
+    parsedURL = new URL event.request.url
+    if parsedURL.pathname == "/" || parsedURL.pathname == "/paste/"
+      return new Response indexHtml,
+        status: 200
+        headers:
+          'content-type': 'text/html'
+
   # Validate file name first, since this is shared logic
   file = util.getFileName event.request.url
   if not file

src/web/index.coffee

@@ -0,0 +1,9 @@
+import React from "react"
+import ReactDOM from "react-dom"
+
+elem = document.createElement "div"
+document.body.appendChild elem
+
+ReactDOM.render <div>
+  <h1>Hello, world</h1>
+</div>, elem

webpack.config.js

@@ -19,6 +19,10 @@ module.exports = {
         type: 'javascript/auto',
         test: /\.json$/,
         use: [ 'json-loader' ]
+      },
+      {
+        test: /\.html$/,
+        use: [ 'raw-loader' ]
       }
     ]
   }

webpack.config.web.js

@@ -0,0 +1,40 @@
+var HtmlWebpackPlugin = require("html-webpack-plugin")
+var HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin")
+var path = require("path")
+
+module.exports = {
+  target: "web",
+  entry: "./index-web.js",
+  mode: "production",
+  output: {
+    path: path.resolve(__dirname, "./worker"),
+    filename: "web.js"
+  },
+  optimization: {
+		// We no not want to minimize our code.
+		minimize: false
+  },
+  resolve: {
+    extensions: ['.js', '.coffee']
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      inlineSource: '.(js|css)$', // embed all javascript and css inline
+      title: 'Angry.Im Pastebin'
+    }),
+    new HtmlWebpackInlineSourcePlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.coffee$/,
+        use: [ 'babel-loader', 'coffee-loader' ]
+      },
+      {
+        type: 'javascript/auto',
+        test: /\.json$/,
+        use: [ 'json-loader' ]
+      }
+    ]
+  }
+}