Oryx for Zed
Edit on GitHubIntroduction
oryx-for-zed
is an extension of Oryx that performs a full build for Spryker Zed UI applications. It also provides access to Zed settings and Zed Webpack configuration, so you can extend/change the whole building process.
Requirements
nodejs
version >=12.0.0npm
version >=6.9.0
Setup
You need to add oryx-for-zed
to your package.json
. Open the terminal, go to your project root folder and type:
npm install @spryker/oryx-for-zed --save-dev
# or
yarn add @spryker/oryx-for-zed --dev
oryx-for-zed comes with a peer dependency: oryx
version >= 1.x.
Usage
Once installed, you can:
- call the builder directly from your scripts (simple builder)
- extend/change the settings/webpack configuration for your custom Zed build
Simple builder
The following section describes how to run oryx-for-zed
.
Add the following script to your package.json
:
{
"scripts": {
"zed": "node ./node_modules/@spryker/oryx-for-zed/build"
}
}
Open the terminal and type:
npm run build-zed
# or
yarn run build-zed
Extend or change the settings
Settings are extended and changed by using the oryx-for-zed
API.
The example below shows how to create a custom build:
Step 1: build.js
Create a build.js
file in your project containing your custom settings and the logic needed to get the webpack configuration and run the builder:
const oryx = require('@spryker/oryx');
const oryxForZed = require('@spryker/oryx-for-zed');
const myCustomZedSettings = Object.assign({}, oryxForZed.settings, {
// your own settings
});
oryxForZed.getConfiguration(myCustomZedSettings).then(configuration => oryx.build(configuration));
Step 2: package.json
Add a script into your package.json
pointing to build.js
:
{
"scripts": {
"build-zed": "node ./path/to/build"
}
}
You will now be able to…
Extend/change webpack configuration
webpack
is customized by using the oryx-for-zed
API.
The example below shows how to create a custom build:
Step 1: webpack.config.js
Create a webpack.config.js
file in your project containing your Webpack custom configuration:
const oryxForZed = require('@spryker/oryx-for-zed');
async function myCustomZedConfiguration() {
const oryxConfiguration = await oryxForZed.getConfiguration(oryxForZed.settings);
return Object.assign({}, oryxConfiguration, {
// your own configuration
});
}
Step 2: build.js
Create a build.js
file in your project containing your Webpack configuration and the logic needed to run the builder:
const oryx = require('@spryker/oryx');
const myCustomZedConfiguration = require('./webpack.config.js');
myCustomZedConfiguration().then(configuration => oryx.build(configuration));
Step 3: package.json
Add a script into your package.json
pointing to build.js
:
{
"scripts": {
"build-zed": "node ./path/to/build"
}
}
API
Settings
oryxForZed.settings
Contains all the basic settings used in the Webpack configuration. Go to the code for more details.
getConfiguration()
oryxForZed.getConfiguration(settings)
Returns a promise with the default Zed Webpack configuration, based on provided settings. Go to the code for more details.
CLI args
oryx-for-zed
uses arguments to customize the build process.
You can pass them using the terminal:
npm run zed -- --arg
# or
yarn run zed -- --arg
Or embed them into the script section in package.json
:
{
"scripts": {
"build-zed": "node ./node_modules/@spryker/oryx-for-zed/build --arg"
}
}
Args list
--dev
: development mode; enablewebpack
watchers on the code--prod
: production mode; enable assets optimization/compression--boost
: boost mode (experimental); build assets using eval source maps
If no arg is passed, development is activated but without watchers.
Thank you!
For submitting the form