Adding React Router to an existing AdonisJS 6 project

Requirements:

• AdonisJS 6
• The @adonisjs/vite plugin

Install and configure @adonisjs/vite using the official documentation

Install react-adonisjs:

npm install @matstack/react-adonisjs
node ace configure @matstack/react-adonisjs

INFO

Make sure that the vite_provider is placed above the react_router_provider in adonisrc.ts

Add this to your adonisrc.ts file:

  assetsBundler: false,
  hooks: {
    onBuildStarting: [() => import('@matstack/react-adonisjs/build_hook')],
  },

Update your tsconfig.json compiler options to include these lines:

  "compilerOptions": {
    "outDir": "./build/",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "lib": ["ES2019", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    [...]
  }

Add a route handler to start/routes.ts that invokes the React Router request handler for all HTTP verbs:

router.any("*", async ({ reactRouterHandler }) => {
  return reactRouterHandler()
})

You should now have a working react-adonisjs application!