
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@spryker/suite-frontend-builder
Advanced tools
This tool is needed to build the frontend for Spryker Suite projects.
It's based on webpack
4, sass
and typescript
.
nodejs
>= 8.9npm
>= 5.6Add this as a dev dependency in your package.json
:
npm install --save-dev @spryker/suite-frontend-builder
Create/update the folder ./src/Pyz/Yves/ShopUi/Theme/default
by adding these files:
./app.ts
import bootstrap from 'ShopUi/app/bootstrap';
import config from 'ShopUi/app/config';
bootstrap(config);
./vendor.ts
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
import '@webcomponents/webcomponentsjs/webcomponents-sd-ce';
./styles/basic.scss
@import '~ShopUi/styles/basic';
@include basic-reset;
@include basic-typography;
@include basic-grid;
@include basic-animation;
./styles/shared.scss
@import '~ShopUi/styles/shared';
./styles/util.scss
@import '~ShopUi/styles/util';
@include util-text;
@include util-float;
@include util-visibility;
Create a folder ./frontend
and add these files:
./settings.js
(definition: https://github.com/spryker-shop/suite-frontend-builder/blob/master/src/settings.ts#L16)const path = require('path');
const name = 'yves_default';
const theme = 'default';
const context = process.cwd();
const paths = {
public: './public/Yves/assets',
shop: './vendor/spryker/spryker-shop',
ui: {
shop: `./vendor/spryker/spryker-shop/Bundles/ShopUi/src/SprykerShop/Yves/ShopUi/Theme/${theme}`,
project: `./src/Pyz/Yves/ShopUi/Theme/${theme}`
}
};
module.exports = {
name,
theme,
paths,
dirs: {
context,
public: path.join(context, paths.public),
shop: path.join(context, paths.shop),
ui: {
shop: path.join(context, paths.ui.shop),
project: path.join(context, paths.ui.project)
}
},
find: {
componentEntryPoints: {
dirs: [
path.join(context, paths.shop)
],
patterns: [
`**/Theme/${theme}/components/atoms/*/index.ts`,
`**/Theme/${theme}/components/molecules/*/index.ts`,
`**/Theme/${theme}/components/organisms/*/index.ts`,
`**/Theme/${theme}/templates/*/index.ts`,
`**/Theme/${theme}/views/*/index.ts`,
'!config',
'!data',
'!deploy',
'!node_modules',
'!public',
'!test'
]
},
componentStyles: {
dirs: [
path.join(context, paths.shop)
],
patterns: [
`**/Theme/${theme}/components/atoms/*/*.scss`,
`**/Theme/${theme}/components/molecules/*/*.scss`,
`**/Theme/${theme}/components/organisms/*/*.scss`,
`**/Theme/${theme}/templates/*/*.scss`,
`**/Theme/${theme}/views/*/*.scss`,
`!**/Theme/${theme}/**/style.scss`,
'!config',
'!data',
'!deploy',
'!node_modules',
'!public',
'!test'
]
}
}
}
./build/development.js
const builder = require('@spryker/suite-frontend-builder');
const factory = require('@spryker/suite-frontend-builder/dist/configuration-factory/development');
const settings = require('../settings');
builder.build(settings, factory.DevelopmentConfigurationFactory);
./build/development-watch.js
const builder = require('@spryker/suite-frontend-builder');
const factory = require('@spryker/suite-frontend-builder/dist/configuration-factory/development-watch');
const settings = require('../settings');
builder.build(settings, factory.DevelopmentWatchConfigurationFactory);
./build/production.js
const builder = require('@spryker/suite-frontend-builder');
const factory = require('@spryker/suite-frontend-builder/dist/configuration-factory/production');
const settings = require('../settings');
builder.build(settings, factory.ProductionConfigurationFactory);
These files are extensions to @spryker/suite-frontend-builder
: they provide settings and define tasks for building the ShopUi.
package.json
Update your package.json
script section adding the following:
"scripts": {
"yves": "node ./frontend/build/development",
"yves:watch": "node ./frontend/build/development-watch",
"yves:production": "node ./frontend/build/production"
}
tsconfig.json
Update your tsconfig.json
file as following:
{
"extends": "./node_modules/@spryker/suite-frontend-builder/tsconfig.suite",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*"
],
"ShopUi/*": [
"./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/*"
]
}
},
"files": [
"./src/Pyz/Yves/ShopUi/Theme/default/app.ts",
"./src/Pyz/Yves/ShopUi/Theme/default/vendor.ts"
],
"include": [
"./vendor/spryker-shop/**/*",
"./src/Pyz/Yves/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
tsconfig.json
is now extending the basic configuration provided by @spryker/suite-frontend-builder
and pointing to project src
folder for entry points.
FAQs
Spryker Suite Frontend Builder
The npm package @spryker/suite-frontend-builder receives a total of 1 weekly downloads. As such, @spryker/suite-frontend-builder popularity was classified as not popular.
We found that @spryker/suite-frontend-builder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.