Creating a theme with React

[joelcosta-mooddie]

I've been looking through the documentation but haven't found any way to create a theme for WinterCMS using React.js.

Can anyone from the community help me?

[LukeTowers]

@joelcosta-mooddie give this PR a try: #1304

After you have it locally you'll want to do the following:

• Run artisan create:theme mytheme tailwind to generate a theme that makes use of Tailwind
• Run artisan vite:create theme-mytheme --tailwind --react --force to generate the required files for React
• Run artisan vite:install and answer yes to the prompt asking to include mytheme in your package workspace if it asks.
• Add {{ viteReactRefresh('theme-mytheme') }} immediately above the {{ vite() }} tag in themes/mytheme/partials/site/footer.htm
• Add <div id="root"></div> wherever you want your React app to be injected into the DOM (either in themes/mytheme/layouts/default.htm or themes/mytheme/pages/home.htm).

At some point we'll probably refactor the theme scaffolding system to make it easier to add in various asset bundles like Vue or React, but for now this should be a balance between getting something that works and investing a ton of time into refactors.

Let me know if you run into any issues or have any questions!

[joelcosta-mooddie]

Thanks @LukeTowers for the help and guidance.

I will execute the steps and if i have any question, i will ask.

Thanks again.