How to add React support in Sage 11

[Er_Suraj]

Hi,

I have been using sage since long and I had worked with both sage 9 and sage 10. I’m very much interested to explore new features and migrating to sage 11 but here I’m stuck with the react.js setup in sage 11.

I have explicitly added react and react-dom via npm. I’m not sure whether I have to add anything else as a setup because I’m facing runtime errors which seems like JSX support is missing. I tried to create and setup babel also with no luck.

Is there any guiding doc to setup react in sage11?

Thanks

[Log1x]

Try installing vite-plugin-react/packages/plugin-react at main · vitejs/vite-plugin-react · GitHub and renaming app.js to app.jsx as well as updating references to it in app.blade.php.

https://laravel.com/docs/12.x/vite#react

[Er_Suraj]

Hi Log1x

Thankyou for your help!

I’m able to setup react.js now. But I do have another query here is, On running npm run dev its starting the local server with the info mentioned below:
VITE v6.2.5 ready in 604 ms

➜ Local: http://localhost:5173/wp-content/themes/sage/public/build/
➜ Network: use --host to expose
➜ press h + enter to show help

LARAVEL plugin v1.2.0

➜ APP_URL: undefined

However, I have to access the local website at http://sage.local instead localhost:3000 or localhost:5173. That’s fine but when the dev server is running only then I can see the development at http://sage.local on closing the dev server, it’s throwing error:

I tried by making a build by running npm run build, its still remains the same.
There must be something wrong with the react configuration but I’m not able to find it out. Can you please help me to figure this out?

Attaching my vite.config.js file for your reference:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin'
import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';

export default defineConfig({
  base: '/wp-content/themes/sage/public/build/',
  plugins: [
    tailwindcss(),
    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.jsx',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
    }),

    wordpressPlugin(),

    // Generate the theme.json file in the public/build/assets directory
    // based on the Tailwind config and the theme.json file from base theme folder
    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
    }),
  ],
  build: {
    manifest: true,
    outDir: 'dist',
    rollupOptions: {
      input: './resources/js/app.jsx'
    }
  },
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
    extensions: ['.js', '.jsx'],
  },
})

Thanks

[Log1x]

I’d remove all the additional Vite configuration that has been added (build, resolve.extensions, …) and simply just change app.js to app.jsx & add the React plugin. The React plugin shouldn’t require any configuration like include either.

[Er_Suraj]

Hi again,

Thanks for the suggestion. I have summarized the setup in the below mentioned steps. Please look into those and suggest if I missed something.

Step1: Install Sage 11

Navigate to the theme directory of your WordPress Installation and run the command given below to install sage 11

composer create-project roots/sage your-theme-name

Step2: Install npm dependencies

After installing sage navigate to the theme and open the theme on your preferred IDE. Then run the command given below:

npm install
npm run build

Step3: Install react setup

Run the @vitejs/plugin-react plugin and also install react and react-dom. To do the same run the commands given below:

npm i @vitejs/plugin-react

npm i react react-dom

After installing @vitejs/plugin-react inside vite.config.js please add it as given below:

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Step4: Other Configurations

• Renameapp.js to app.jsx as well as updating references to it in app.blade.php.
• Inside app.blade.php
  Update the line below:

@vite(['resources/css/app.css', 'resources/js/app.jsx'])

• Before the above mentioned line, please add:

@viteReactRefresh

• In vite.config.js
  Update the base path here: base: '/app/themes/sage11/public/build/' pointing to your theme

Step5: Start dev server

npm run dev

[Bhanuvardhan]

Hi everyone,

I followed the steps in this guide to add React support to Sage 11. While the setup seems successful, I’m encountering a 404 error when accessing http://localhost:5173/app/themes/sage11-test/public/build/. The error says:

[ben]

With the Vite setup in Sage 11 you should be visiting the normal URL for your local development site (eg. example.test) — not localhost:5173