filmaj/base_route_munger.js

## base_route_munger.js
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 + '`'); // 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.');

## package.json
{
  "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"
  }
}

## pwa-index.css
/* 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);
}

## pwa-index.html
<!-- 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>

## pwa-index.js
// 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();
}

## pwa_munger.js
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.');

## route-index.js
// 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`
    };
};
	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 + '`'); // 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.');
	{
	"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"
	}
	}
	/* 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);
	}
	<!-- 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>
	// 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();
	}
	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.');
	// 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`
	};
	};