0.1.1 • Published 4 months ago

react-router-lambda-adapter v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

React Router Lambda Adapter

This is an adapter for React Router v7 to run inside of a lambda. It maps AWS Proxy V2 requests/responses into React Router v7 requests/responses.

It's intended for situations where you have server-side rendering that you want to run within AWS Lambda.

See the template (link to be added) to see a full working example.

Getting started

First, in your vite.config.ts you need to import and use the lambdaAdapterPlugin vite plugin. For example:

import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { lambdaAdapterPlugin } from "react-router-lambda-adapter";

export default defineConfig((config) => {
  console.log("config", config);
  return {
    css: {
      postcss: {
        plugins: [tailwindcss, autoprefixer],
      },
    },
    plugins: [
      reactRouter(),
      tsconfigPaths(),
      lambdaAdapterPlugin("lambda/handler.js"),
    ],
  };
});

Next you'll need to create a file called lambda/handler.js in your own repo as the entrypoint. Here's a barebones example:

import { createRequestHandler } from "react-router-lambda-adapter";
// @ts-ignore
import * as build from "virtual:react-router/server-build";

export const handler = createRequestHandler({
  build,
  getLoadContext: async () => ({}),
});

The request handler is the heart of the functionality provided by this package. The request handler exported from this package maps AWS Proxy v2 requests into React Router Requests and maps React Router responses back to AWS Proxy V2 responses.

Acknowledgements

This stands on so much work done by others, but a few notable tips that helped shape up this repo.

Why not use the architect package? I didn't want to be dependent on the architect infra and so chose to copy some of that functionality into this more generic repo as the basis of the request/response handling.