vite-plugin-react-router-amplify-hosting

0.7.0 verified Mon Apr 27 auth: no javascript

Vite plugin for deploying React Router SSR applications to AWS Amplify Hosting. Current version 0.7.0 (supports Vite 5/6/7/8, React Router v7, Node >=20). Generates deploy-manifest.json, bundles a server.mjs entry point, and produces the correct folder structure for Amplify deployment. Requires manual installation of express, compression, morgan, isbot, and @react-router/express. Alternative to Amplify's built-in SSR support with tighter React Router integration.

Common errors

error Cannot find module 'express' or '@react-router/express' ↓

cause Missing required runtime dependencies for the server bundle.

fix

npm install express compression morgan @react-router/express

error Error: Node version (18.x) is not supported. Expected Node.js >=20.0.0 ↓

cause Plugin requires Node.js v20 or later due to engine constraints.

fix

Use nvm install 20 && nvm use 20 in preBuild phase of amplify.yml

error The 'baseDirectory' should be '.amplify-hosting' but is '.next' or other ↓

cause Amplify build settings must point to the output directory generated by this plugin.

fix

Set artifacts.baseDirectory: .amplify-hosting in amplify.yml

Warnings

breaking Requires Node.js v20 or later. Older Node versions cause build failures. ↓

fix Upgrade Node to v20 or use nvm in CI: nvm install 20 && nvm use 20

breaking Plugin generates non-standard deploy structure; artifacts.baseDirectory must be .amplify-hosting. ↓

fix Set artifacts.baseDirectory: .amplify-hosting in amplify.yml

deprecated The unstable_viteEnvironmentApi flag has been experimental in some versions; prefer stable API. ↓

fix Remove unstable_viteEnvironmentApi flag; use stable configuration.

gotcha Missing server dependencies (express, compression, morgan, isbot, @react-router/express) cause SSR build failures. ↓

fix npm add -D compression express isbot morgan @react-router/express

gotcha Vite 8 support added in 0.7.0; older versions break with Vite 8. ↓

fix Upgrade to vite-plugin-react-router-amplify-hosting@0.7.0

Install

npm install vite-plugin-react-router-amplify-hosting

yarn add vite-plugin-react-router-amplify-hosting

pnpm add vite-plugin-react-router-amplify-hosting

Imports

amplifyHosting

wrong

import amplifyHosting from 'vite-plugin-react-router-amplify-hosting'

correct

import { amplifyHosting } from 'vite-plugin-react-router-amplify-hosting'

Named export only. Default import will not work.

AmplifyHostingOptions

wrong

import { AmplifyHostingOptions } from 'vite-plugin-react-router-amplify-hosting'

correct

import type { AmplifyHostingOptions } from 'vite-plugin-react-router-amplify-hosting'

TypeScript type export, cannot be used as runtime value.

AmplifyHostingConfig

wrong

import { AmplifyHostingConfig } from 'vite-plugin-react-router-amplify-hosting'

correct

import type { AmplifyHostingConfig } from 'vite-plugin-react-router-amplify-hosting'

TypeScript type export, cannot be used as runtime value.

Quickstart

Minimal Vite config adding the amplify plugin for React Router SSR on Amplify Hosting.

// vite.config.ts
import { defineConfig } from 'vite';
import { reactRouter } from '@react-router/dev/vite';
import { amplifyHosting } from 'vite-plugin-react-router-amplify-hosting';

export default defineConfig({
  plugins: [
    reactRouter(),
    amplifyHosting({
      computeResources: 'serverless',
    }),
  ],
});