Hi all, has anyone an idea how I can generate the assets from e.g. `CompanyUserGui/assets/…` in thi

U01AM1YGRC2

Hi all, has anyone an idea how I can generate the assets from e.g. CompanyUserGui/assets/…

in this path I have js folder js/modules/my-function.js and js/vendor-zed-company-user-gui-main.entry.js with requires the modules js.

'use strict';

require('./modules/my-function');
require('../sass/main.scss');

I tried with to build with the watch for frontend and docker/sdk console frontend:zed:build

has anyone an idea if I miss something or I’m just do anything the wrong way?
Thanks for help.

U01LKKBK97T

Can it be a browser caching issue only? As far as I remember, frontend assets aren't versioned, so might need to hard-reload. At least for the local Docker env I can tell. Maybe that is the case for backend assets, too.
Have you checked the generated files on your file system? Maybe they're containing your changes already, but you just don't see them in the browser due to caching.
What happens if you're breaking one of the js files on purpose and then run docker/sdk console frontend:zed:build? Will it fail?

Alberto Reyer

Most likely you haven’t configured the build process to look for project assets.
In package.json make sure the following lines exists:

  "scripts": {
    "yves": "node ./frontend/build development",
    "yves:watch": "node ./frontend/build development-watch",
    "yves:production": "node ./frontend/build production",
    "zed": "node ./frontend/zed-build",
    "zed:watch": "node ./frontend/zed-build --dev",
    "zed:production": "node ./frontend/zed-build --prod"
  },

Also make sure a file frontend/zed-build.js with the following content exists:

const oryx = require('@spryker/oryx');
const api = require('@spryker/oryx-for-zed/lib');
const path = require('path');

const settings = Object.assign({}, api.settings, {
    entry: {
        dirs: [
            path.resolve('./vendor/spryker'),
            path.resolve('./vendor/spryker-eco'),
            path.resolve('./src/Pyz')
        ],
        patterns: ['**/Zed/**/*.entry.js'],
        description: 'looking for entry points...',
        defineName: p => path.basename(p, '.entry.js')
    },
});

api.getConfiguration(settings)
    .then(configuration => oryx.build(configuration))
    .catch(error => console.error('An error occurred while creating configuration', error));

This will allow you to place an assets/<your filename>.entry.js file which is compiled on frontend:zed:build and can be loaded via

<script src="{{ assetsPath('js/<your filename>.js') }}"></script>

U01LKKBK97T

Yes, that might be it.
Finally found the docs: https://documentation.spryker.com/docs/overriding-webpack-js-scss-for-zed-on-project-level

U01AM1YGRC2

Hi, I just forgot the <script src="{{ assetsPath('js/<your filename>.js') }}"></script> but it seems like a ney solution ^^would be great to see a same behavior like we see in yves. But it does the trick, so thanks, I found the same. For the scss generation and later to use it on Zed you need also to add this <link rel="stylesheet" href="{{ assetsPath('css/vendor_name-zed-company-user-gui-main.css') }}">

U01AM1YGRC2

didn’t find that documentation until you mentioned 😄 but thanks, good to now that there is a doc 😉