Calling Developers!
We are reenergizing our code contribution process! Learn More

What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

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

Options
U01AM1YGRC2
U01AM1YGRC2 Posts: 71 🧑🏻‍🚀 - Cadet
edited August 2021 in Help

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.

Comments

  • U01LKKBK97T
    U01LKKBK97T Posts: 287 🧑🏻‍🚀 - Cadet
    Options

    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
    Alberto Reyer Lead Spryker Solution Architect / Technical Director Posts: 690 🪐 - Explorer
    Options

    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
    U01LKKBK97T Posts: 287 🧑🏻‍🚀 - Cadet
    Options
  • U01AM1YGRC2
    U01AM1YGRC2 Posts: 71 🧑🏻‍🚀 - Cadet
    Options

    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
    U01AM1YGRC2 Posts: 71 🧑🏻‍🚀 - Cadet
    Options

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