How to add React support in Sage 11

sage
5

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

1 Like