
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@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 0 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.