Hi,
I have created a fresh sage theme in Ubuntu OS. I used the following command to create/setup sage project:
composer create-project roots/sage sage10
Then I added Acorn by running the following command inside themes root directory
composer require roots/acorn
After enabling the acorn I ran the following commands:
yarn install
yarn bud upgrade
yarn build
Here, how I configured my bud.config.js file
/**
* Compiler configuration
*
* @see {@link https://roots.io/docs/sage sage documentation}
* @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
*
* @type {import('@roots/bud').Config}
*/
export default async (app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/docs/bud.entry}
* @see {@link https://bud.js.org/docs/bud.assets}
*/
app
.entry('app', ['@scripts/app', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.assets(['images']);
/**
* Set public path
*
* @see {@link https://bud.js.org/docs/bud.setPublicPath}
*/
app.setPublicPath('/wp-content/themes/sage10/public/');
/**
* Development server settings
*
* @see {@link https://bud.js.org/docs/bud.setUrl}
* @see {@link https://bud.js.org/docs/bud.setProxyUrl}
* @see {@link https://bud.js.org/docs/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('http://localhost:10003')
.setPublicUrl('http://localhost:10003')
.watch(['resources/views', 'app']);
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
*/
app.wpjson
.setSettings({
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize();
};
I’m using local by Flywheel for local WordPress environment. Attaching below the settings of local
It’s all about setup. Now let’s come to the issue, When I start the development server by running the command yarn dev my app.js file is not getting compiled i.e. none of the code written in app.js is working. Also, can’t see any error log either in the dev build or even in the browsers console.
Here is the dev build status:
sage [ac0e99637c4e7bed] ./public
│
│ app
│ ◉ js/runtime.js 49.14 kB
│ ◉ js/app.js 136.5 kB
│
│ editor
│ ◉ js/runtime.js 49.14 kB
│ ◯ js/editor.js 127.32 kB
│
╰ 134ms 114 modules [97/114 modules cached]
Network
› Proxy ┄ http://localhost:10003/
› Dev ┄ http://localhost:3000/
┄ http://192.168.0.102:3000/
But when I run yarn build app.js file is working. Now after the build if I make any changes in the app.js file again stops working.
I tried to debug this by adding log statements in app.js file, In dev environment nothing is getting logged to the browsers console. It works only when I make a build.
So, In a summary app.js file or any other js file is not working in dev environment. It only works when I make the final build using yarn build.
I can’t able to figure this out. Don’t know where the issue is exactly. Can anyone please help me into this? Any help is much appreciated!
Thanks!
. But anyways, If anything else is needed to add a support for react please let me know. I already tried with adding