Remix Starter Kit for Fastly Compute

Get started with Remix on Compute@Edge with a starter kit.

For more details about other starter kits for Compute@Edge, see the Fastly developer hub

Development

Prerequisites:

• Node >= 16.13

You will be running two processes during development:

• The Remix development server in watch mode
• The Fastly development server

Both are started with one command:

npm run dev

Open up http://127.0.0.1:7676 and you should be ready to go!

Changes made to files in app/ will cause the Remix application to rebuild and then trigger a live reload. The live refresh occurs automatically 5000ms after the rebuild. If this delay is too short, you can configure this using the devServerBroadcastDelay value in remix.config.js and then restart npm run dev.

If you want to check the production build, you can stop the dev server and run following commands:

npm run build
npm start

Then refresh the same URL in your browser (no live reload for production builds).

Deployment

If you don't already have an account, then create a Fastly Compute account here.

Once that's done, you should be able to deploy your app:

npm run build
npm run deploy

Module bundling

This template does not use module bundling. If you want to replace global modules or use polyfills, you can use a module bundler such as Webpack.

To modify your project to use Webpack, follow these steps:

• Install the following development dependencies:

npm install --save-dev webpack webpack-cli 

• Create a webpack.config.js file with the following content:

import path from 'path';
import url from 'url';
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));

export default {
  entry: "./src/index.js",
  mode: "production",
  target: 'webworker',
  experiments: {
    outputModule: true,
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "bin"),
    chunkFormat: "module",
  },
  externals: [
    ({request,}, callback) => {
      // Allow Webpack to handle fastly:* namespaced module imports by treating
      // them as modules rather than try to process them as URLs
      if (/^fastly:.*$/.test(request)) {
        return callback(null, 'module ' + request);
      }
      callback();
    }
  ],
};

• Modify scripts in your package.json file:

  • At the end of the prebuild:fastly script, add && webpack:

    "prebuild:fastly": "compute-js-static-publish --build-static --suppress-framework-warnings && webpack",
    

  • Modify the build:fastly script's parameter from ./src/index.js to ./bin/index.js:

    "build:fastly": "js-compute-runtime ./bin/index.js ./bin/main.wasm",
    

• Make further changes to webpack.config.js as necessary to replace global variables, add any polyfills, or anything else that you wish to achieve using module bundling.

Security issues

Please see our SECURITY.md for guidance on reporting security-related issues.