Initial commit of code

Author: harmony7

.gitignore

@@ -0,0 +1,2 @@
+/build/
+/node_modules/

README.md

@@ -1,2 +1,70 @@
 # compute-js-static-publish
 Static Publisher for Compute@Edge JavaScript
+
+Easily run your React application generated with [`create-react-app`](https://create-react-app.dev/) on
+a [Compute@Edge service](https://developer.fastly.com/learning/compute/javascript/).
+
+`create-react-app` provides a simple-to-use platform for getting started developing React
+applications. When you need to deploy your app to the internet, why not deploy it to Fastly's
+blazing-fast Edge Computing Platform?
+
+## How it works
+
+1. Use Create React App to create your application.
+
+```shell
+npx create-react-app my-app
+```
+
+2. Work on your app as normal.
+
+```shell
+cd my-app
+npm start
+```
+
+3. When you're ready to deploy to Fastly, build your production bundle, then run `compute-js-static-publish`.
+
+```shell
+npm run build # create-react-app's build command
+npx @fastly/compute-js-static-publish
+```
+
+This will make a `compute-js` subfolder and initialize it as a Compute@Edge JavaScript application.
+It will add a default `./src/index.js` file that serves the static files from your production bundle.
+
+4. Run your application using [Fastly's local development server](https://developer.fastly.com/learning/compute/testing/#running-a-local-testing-server).
+
+```shell
+cd ./compute-js
+npm install
+fastly compute serve
+```
+
+5. When you're ready to go live, [deploy it to your Compute@Edge service](https://developer.fastly.com/reference/cli/compute/publish/).
+
+```shell
+fastly compute publish
+```
+
+6. Each time you build your Compute@Edge project, `compute-js-static-publish` will run a process that scans your `./build`
+    directory for changes and generates a new `./src/statics.js` file.
+
+You're free to modify the `./src/index.js` handler to suit your needs, such as to add your own API endpoints.
+This framework will not touch that file after creation.
+
+## Options
+
+```shell
+npx @fastly/compute-js-static-publish --public-path=./build --static-path=./build/static --output=./compute-js --spa
+```
+
+| Option          | Default          | Description                                                                                                                                                                                                                                                                                  |
+|-----------------|------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `--public-path` | `./build`        | The directory that contains the application's public files. All files in this directory and subdirectories will be served by your Compute@Edge handler.                                                                                                                                      |
+| `--static-path` | `./build/static` | A subdirectory of `--public-path` that contains the application's static files. The files in this directory and subdirectories will be served with a 1 year cache.                                                                                                                           |
+| `--output`      | `./compute-js`   | The directory in which to create the Compute@Edge application.                                                                                                                                                                                                                               |
+| `--spa`         | `false`          | If true, then the Compute@Edge handler will serve `<public-path>/index.html` when the requested file does not match any of the files in `<public-path>`. Useful for apps that use [client-side routing](https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing). |
+
+The path and spa flag will be written to a `static-publish.json` file, and is referenced by the `compute-js-build-static-loader`
+command that is run on each `build` of the Compute@Edge project (this runs as a part of the `prebuild` script in `package.json`).

package-lock.json

@@ -0,0 +1,38 @@
+{
+  "name": "@fastly/compute-js-static-publish",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Static Publisher for Compute@Edge JavaScript",
+  "main": "./build/index.js",
+  "scripts": {
+    "prepack": "npm run build",
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "bin": {
+    "compute-js-static-publish": "./build/index.js",
+    "compute-js-build-static-loader": "./build/build-static.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fastly/compute-js-static-publish.git"
+  },
+  "keywords": [
+    "compute-js",
+    "javascript",
+    "static",
+    "serve"
+  ],
+  "author": "Katsuyuki Omuro <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/fastly/compute-js-static-publish/issues"
+  },
+  "homepage": "https://github.com/fastly/compute-js-static-publish#readme",
+  "dependencies": {
+    "typescript": "^4.7.4"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0"
+  }
+}

package.json

@@ -0,0 +1,3 @@
+## Resources
+
+The files in this directory are copied into the output folder.

resources/README.md

@@ -0,0 +1,59 @@
+/// <reference types="@fastly/js-compute" />
+
+import { Router } from '@fastly/expressly';
+import { assets, isSpa } from './statics';
+
+const router = new Router();
+
+router.get("*", (req, res) => {
+  const path = req.urlObj.pathname !== '/' ? req.urlObj.pathname : '/index.html';
+  const staticFile = assets[path];
+  if(staticFile == null) {
+    return;
+  }
+
+  // Aggressive caching for static files, and no caching for everything else.
+  // https://create-react-app.dev/docs/production-build/#static-file-caching
+  const headers = {
+    'Cache-Control': staticFile.isStatic ? 'max-age=31536000' : 'no-cache',
+  };
+  if(staticFile.contentType != null) {
+    headers['Content-Type'] = staticFile.contentType;
+  }
+  res.send(new Response(staticFile.content, {
+    status: 200,
+    headers,
+  }));
+});
+
+// TODO: If you need to handle any API routes, add them here.
+// router.get("/api/endpoint", (req, res) => {
+//   res.send("foo");
+// });
+
+// If this is a SPA, then return index.html for HTML requests
+router.get("*", (req, res) => {
+  if(!isSpa || !(req.headers.get('Accept') ?? '').split(',').includes('text/html')) {
+    return;
+  }
+
+  const staticFile = assets['/index.html'];
+  res.send(new Response(staticFile.content, {
+    status: 200,
+    headers: {
+      'Cache-Control': 'no-cache',
+      'Content-Type': 'text/html',
+    }
+  }));
+});
+
+router.all("*", (req, res) => {
+  res.send(new Response("404 Not Found", {
+    status: 404,
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  }));
+});
+
+router.listen();

resources/index.js

@@ -0,0 +1,76 @@
+const path = require("path");
+const webpack = require("webpack");
+const { ProvidePlugin } = webpack;
+
+let config;
+try {
+  config = require("./static-publish.json");
+} catch {
+  console.error('Error loading static-publish.json');
+  process.exit(1);
+}
+
+const buildDir = path.resolve(config.buildDir);
+
+module.exports = {
+  entry: "./src/index.js",
+  optimization: {
+    minimize: false
+  },
+  target: "webworker",
+  output: {
+    filename: "index.js",
+    path: path.resolve(__dirname, "bin"),
+    libraryTarget: "this",
+  },
+  module: {
+    // Asset modules are modules that allow the use asset files (fonts, icons, etc)
+    // without additional configuration or dependencies.
+    rules: [
+      // asset/source exports the source code of the asset.
+      // Usage: e.g., import notFoundPage from "./page_404.html"
+      {
+        test: (file) => {
+          if(!file.startsWith(buildDir + '/')) {
+            return false;
+          }
+          return /\.(txt|htm(l)?|xml|json|map|js|css|svg)/.test(file);
+        },
+        type: "asset/source",
+      },
+      // asset/inline exports the raw bytes of the asset.
+      // We base64 encode them here
+      {
+        test: (file) => {
+          if(!file.startsWith(buildDir + '/')) {
+            return false;
+          }
+          return /\.(bmp|png|gif|jp(e)?g|ico|tif(f)?|aac|mp3|mp4|mpeg|webm|pdf|tar|zip|eot|otf|ttf)/.test(file);
+        },
+        type: "asset/inline",
+        generator: {
+          /**
+           * @param {Buffer} content
+           * @returns {string}
+           */
+          dataUrl: content => {
+            return content.toString('base64');
+          },
+        }
+      },
+    ],
+  },
+  plugins: [
+    // Polyfills go here.
+    // Used for, e.g., any cross-platform WHATWG,
+    // or core nodejs modules needed for your application.
+    new ProvidePlugin({
+      Buffer: [ "buffer", "Buffer" ],
+    }),
+  ],
+  resolve: {
+    fallback: {
+      "buffer": require.resolve("buffer/"),
+    },
+  },
+};