Hey, I have got the new Sage s3 storage working via budjs thanks to the recently added instructions.
However these only work if I comment out the 'WP_ENV !== ‘development’ check and run ‘yarn build’ locally. When I run trellis, for staging or production, these steps are apparently completely missed, though I am able to us this S3 plugin on the server with the same environment variables so I know they are present.
Here is my bud.config.js file:
/**
* Compiler configuration
*
* @see {@link https://roots.io/sage/docs sage documentation}
* @see {@link https://bud.js.org/learn/config bud.js configuration guide}
*
* @type {BrowserSyncPlugin|{}}
*/
export default async (app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/reference/bud.entry}
* @see {@link https://bud.js.org/reference/bud.assets}
*/
app
.entry('app', ['@scripts/app', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.assets(['images', 'fonts']);
const assetUrl = () => {
let bucketUrl = app.env.get('S3_UPLOADS_ENDPOINT');
const environment = app.env.get('WP_ENV');
return bucketUrl + '/' + environment + '/' + 'assets/';
}
/**
* Conditions to be met before uploading to S3
*/
const uploadConditionsMet = ({env}) => {
return (
// env.get('WP_ENV') !== 'development' &&
env.isString('S3_UPLOADS_KEY') &&
env.isString('S3_UPLOADS_SECRET')
);
}
/**
* Handle configuring S3 and uploading assets
*/
const handleAWSUpload = async ({env, fs, path}) => {
fs.s3.config.set('credentials', {
accessKeyId: env.get('S3_UPLOADS_KEY'),
secretAccessKey: env.get('S3_UPLOADS_SECRET'),
});
fs.s3.config.set('endpoint', env.get('S3_UPLOADS_ENDPOINT'));
fs.s3.config.set('bucket', env.get('WP_ENV'));
fs.upload({
source: path('public'),
destination: 'assets',
keep: 5
});
};
app.when(
uploadConditionsMet,
() => app.setPublicPath(assetUrl()),
() => app.setPublicPath('/app/themes/sage/public/')
);
app.when(
uploadConditionsMet, // ...if function returns true
handleAWSUpload, // do the upload
() => console.info('skipping S3 upload') // else log that we're skipping
);
/**
* Development server settings
*
* @see {@link https://bud.js.org/reference/bud.setUrl}
* @see {@link https://bud.js.org/reference/bud.setProxyUrl}
* @see {@link https://bud.js.org/reference/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('https://goghini.test')
.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({
background: {
backgroundImage: true,
},
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('extend')
.useTailwindFontFamily('extend')
.useTailwindFontSize();
console.log(uploadConditionsMet);
};
and in case it helps, my trellis file for the relevant steps (build before):
# Placeholder `deploy_build_before` hook for building theme assets on the
# host machine and then copying the files to the remote server
#
- name: Install Sage npm dependencies
command: yarn
delegate_to: localhost
args:
chdir: "{{ project_local_path }}/web/app/themes/sage"
ignore_errors: yes
- name: Install Sage Composer dependencies
command: composer install --no-ansi --no-dev --no-interaction --no-progress --optimize-autoloader --no-scripts --classmap-authoritative
args:
chdir: "{{ deploy_helper.new_release_path }}/web/app/themes/sage"
ignore_errors: yes
- name: Compile Sage assets for production
command: yarn build
delegate_to: localhost
args:
chdir: "{{ project_local_path }}/web/app/themes/sage"
ignore_errors: yes
- name: Copy Sage production assets
synchronize:
src: "{{ project_local_path }}/web/app/themes/sage/public"
dest: "{{ deploy_helper.new_release_path }}/web/app/themes/sage"
group: no
owner: no
rsync_opts: --chmod=Du=rwx,--chmod=Dg=rx,--chmod=Do=rx,--chmod=Fu=rw,--chmod=Fg=r,--chmod=Fo=r
ignore_errors: yes
Could this be to do with Sage as a dev dependency? I tried moving a few things around but couldn’t figure out anything that worked.
"devDependencies": {
"@roots/bud": "6.20.0",
"@roots/bud-eslint": "^6.23.3",
"@roots/bud-prettier": "^6.23.3",
"@roots/bud-react": "^6.23.3",
"@roots/bud-sass": "^6.23.3",
"@roots/bud-stylelint": "^6.23.3",
"@roots/bud-tailwindcss": "6.20.0",
"@roots/eslint-config": "^6.23.3",
"@roots/sage": "6.20.0"
},
"dependencies": {}