filmaj · November 25, 2018 21:49 · Nov 25, 2018 · Nov 25, 2018 · Nov 25, 2018
diff --git a/base_route_munger.js b/base_route_munger.js
@@ -5,7 +5,7 @@ const INDEX_ROUTE = 'src/http/get-index/index.js';
 let html = fs.readFileSync(INDEX_HTML).toString();
 let route = fs.readFileSync(INDEX_ROUTE).toString();
 
-route = route.replace(/`.*`/, '`' + html + '`');
+route = route.replace(/`.*`/, '`' + html + '`'); // replace everything between two backticks with index.html. that's my sophisticated templating engine!
 console.log('\nOverwriting index route to return new index.html...');
 fs.writeFileSync(INDEX_ROUTE, route, 'utf-8');
 console.log('... done.');
diff --git a/pwa-index.css b/pwa-index.css
@@ -0,0 +1,26 @@
+/* this goes under pwa/index.css 
+*/
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+}
+
+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin: 2rem auto;
+}
+
+img {
+  transition: 3s;
+  height: 100px;
+  width: 100px;
+}
+
+.App:hover > img {
+  transform: rotate(1080deg);
+}
diff --git a/pwa-index.html b/pwa-index.html
@@ -0,0 +1,17 @@
+<!-- this goes under pwa/index.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>Parcel React Example</title>
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/pwa-index.js b/pwa-index.js
@@ -0,0 +1,17 @@
+// this goes into pwa/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+const App = () => (
+  <div className="App">
+    <h1 className="App-Title">Hello from React</h1>
+  </div>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// Hot Module Replacement
+if (module.hot) {
+    module.hot.accept();
+}
diff --git a/route-index.js b/route-index.js
@@ -0,0 +1,10 @@
+// this goes into src/http/get-index/index.js
+exports.handler = async function http (req) {
+    console.log(req);
+    // FYI: the body property is modified at build-time
+    return {
+        type: 'text/html; charset=utf8',
+        body: `this will end up being overwritten every time you build the site by pwa_munger.js`
+    };
+};
+
diff --git a/base_route_munger.js b/base_route_munger.js
@@ -0,0 +1,11 @@
+let fs = require('fs');
+
+const INDEX_HTML = 'public/index.html';
+const INDEX_ROUTE = 'src/http/get-index/index.js';
+let html = fs.readFileSync(INDEX_HTML).toString();
+let route = fs.readFileSync(INDEX_ROUTE).toString();
+
+route = route.replace(/`.*`/, '`' + html + '`');
+console.log('\nOverwriting index route to return new index.html...');
+fs.writeFileSync(INDEX_ROUTE, route, 'utf-8');
+console.log('... done.');
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "weirdreactapp",
+  "version": "0.0.1",
+  "author": "Filip Maj <me@filmaj.ca>",
+  "scripts": {
+    "start": "echo 'TODO: kick up arc sandbox? parcel has cli too for pwa hosting but then how to host routes?' && exit 1",
+    "build:pwa": "rm -rf public/* && parcel build pwa/index.html --public-url ./ --out-dir public && node pwa_munger.js && node base_route_munger.js",
+    "ship:pwa": "npm run build:pwa && npx deploy static && echo 'TODO: deploy get-index route'",
+    "ship": "npm run build:pwa && npx deploy"
+  },
+  "dependencies": {
+    "@architect/architect": "^4.3.12",
+    "autoprefixer": "^7.2.1",
+    "babel-preset-react-app": "^3.1.0",
+    "nodemon": "^1.17.3",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "postcss": {
+    "modules": false,
+    "plugins": {
+      "autoprefixer": {
+        "browsers": [
+          ">1%",
+          "last 4 versions",
+          "Firefox ESR",
+          "not ie < 9"
+        ],
+        "flexbox": "no-2009"
+      }
+    }
+  },
+  "devDependencies": {
+    "@architect/parser": "^1.1.6",
+    "parcel-bundler": "1.10.3"
+  }
+}
diff --git a/pwa_munger.js b/pwa_munger.js
@@ -0,0 +1,26 @@
+let parser = require('@architect/parser');
+let fs = require('fs');
+
+const INDEX_HTML = 'public/index.html';
+const env = process.env.ARC_DEPLOY || 'staging';
+const region = process.env.AWS_REGION;
+const isOGS3 = region === 'us-east-1';
+const S3domain = isOGS3 ? `https://s3.amazonaws.com/` : `https://s3-${region}.amazonaws.com/`;
+
+// 0. read bucket info from arc file
+let arc = parser(fs.readFileSync('.arc').toString());
+let bucket = arc.static[(env === 'production' ? 1 : 0)][1];
+// 1. based on env assemble proper js and css url (100% stolen from
+// arc-repos/arc-functions/src/http/helpers/_static.js
+let url = S3domain + bucket;
+// 2. read public/index.html
+let html = fs.readFileSync(INDEX_HTML).toString();
+// 3. interpolate
+// munge css
+html = html.replace(/stylesheet" href="(.*\.css)"/i, 'stylesheet" href="' + url + '/$1"');
+// munge js
+html = html.replace(/script src="(.*\.js)"/i, 'script src="' + url + '/$1"');
+// 4. dump to stdout
+console.log('\nOverwriting URLs in public/index.html...');
+fs.writeFileSync(INDEX_HTML, html, 'utf-8');
+console.log('... done.');
No results found