Vite

React

Lumbermill supports React. Follow these steps to add it to a project.

1. Install React dependencies

   ddev npm i --save-dev @vitejs/plugin-react @types/react @types/react-dom
   ddev npm i react react-dom

2. Create tsconfig.json in the theme root

   web/app/themes/lumbermill/tsconfig.json

   {
       "compilerOptions": {
           "target": "ES2020",
           "useDefineForClassFields": true,
           "lib": ["ES2020", "DOM", "DOM.Iterable"],
           "module": "ESNext",
           "skipLibCheck": true,
   
           /* Bundler mode */
           "moduleResolution": "bundler",
           "allowImportingTsExtensions": true,
           "resolveJsonModule": true,
           "isolatedModules": true,
           "noEmit": true,
           "jsx": "react-jsx",
   
           /* Linting */
           "strict": true,
           "noUnusedLocals": true,
           "noUnusedParameters": true,
           "noFallthroughCasesInSwitch": true,
           "paths": {
               "@my-app/*": ["./assets/src/js/my-app/src/*"],
           }
       },
       "include": [
           "./assets/src/js/my-app/src/**/*"
       ]
   }

   Replace my-app with a logical name for the app.

3. Add the entrypoint to config/entrypoints.json

   config/entrypoints.json

   {
       "lumbermill": "assets/src/js/site.js",
       "lumbermill-admin": "assets/src/js/admin/main.js",
       "my-app": "assets/src/js/my-app/src/main.tsx"
   }

4. Update config/assets.php to enable the React helper

   config/assets.php

   <?php
   
   return [
       'vite' => [
           'entrypoints' => [],
           'helpers' => [
               'react'
           ],
       ],
   ];

5. Add the React plugin and alias to vite.config.ts

   vite.config.ts

   import react from '@vitejs/plugin-react';
   
   // inside plugins array:
   react(),
   
   // inside resolve.alias:
       '@my-app': __dirname + '/assets/src/js/my-app/src'

6. Create the entrypoint file

   web/app/themes/lumbermill/assets/src/js/my-app/main.tsx

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   
   const appEl = document.getElementById('my-app') as HTMLElement;
   
   ReactDOM.createRoot(appEl).render(
       <React.StrictMode>
           <h1>Hello world</h1>
       </React.StrictMode>
   );

7. Add a mount point to a Twig template

   {# web/app/themes/lumbermill/views/templates/front-page.twig #}
   
   <div id="my-app"></div>