hello, is somebody know, how to add javascript in spryker backoffice? What is the best way to do it?

U031MRXNNV7

hello, is somebody know, how to add javascript in spryker backoffice? What is the best way to do it?
I created new module, now I need to add javascript in table view. Of course, I can write it in twig templates, but it seems there are better way.
I found this article - https://docs.spryker.com/docs/scos/dev/front-end-development/zed/overriding-webpack-js-scss-for-zed-on-project-level.html#webpack - as I understand, I need create new file src/Pyz/Zed/OrderApiLogging/assets/Zed/js/index.entry.js
I did it with content “alert(‘test’);” - but it does not work after running npm run zed command

U01K43ADW5N

Have you configured your environment to look up for js files in the project level?

U031MRXNNV7

of course no ) how to do it?

U01K43ADW5N

OOTB the demo shop uses the build config from the oryx-for-zed to build zed.
zed script in package.json:

"zed": "node ./node_modules/@spryker/oryx-for-zed/build",

U01K43ADW5N

we created one for our project, it may look different based on your needs.
it looks roughly like this (removed project specifics):

const oryx = require("@spryker/oryx");
const oryxForZed = require("@spryker/oryx-for-zed");
const path = require('path');
const merge = require('webpack-merge');

const mergeWithStrategy = merge.smartStrategy({
    plugins: 'prepend'
});

const myCustomZedSettings = mergeWithStrategy(oryxForZed.settings, {
    entry: {
        dirs: [path.resolve('./src/Pyz/Zed/')] // Path for entry points on project level
    },
});

const copyAssetsCallback = require('./lib/copy');

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

U01K43ADW5N

after you are done with the build config you have to change your package.json file to use the new build.js file:

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

U031MRXNNV7

did it. Created frontend/zed/build.js file with content above. Changed package,json. Run npm run zed. But still the same issue. I am expecting to see an alert on my page, but nothing changed. It seems I missed something

U01K43ADW5N

First let's check if your javascript code was built.
If you look for mentions of your code in your project, do you see any in the dir /public/Backoffice/assets/js ?

U031MRXNNV7

Thank you! Found it! Thanks a lot!!!!

U01K43ADW5N

Great, if it's there you just need to import it in your twig file