How to contribute to the frontend part of the application¶
In this page, we will see how and when to run which command to update the frontend part of the application.
How to get started?¶
Install php dependencies¶
To start to use Akeneo PIM you need to install the php dependencies:
It can be confusing to have to install php dependencies to manage the frontend of an application but for now we still use assetic to copy or symlink assets to the public folder of the application.
After this step you will be able to launch the pim asset install command:
bin/console --env=prod pim:installer:assets --symlink
With this command, Symfony will symlink the assets located in the Resources/public folder of every registered bundles to their respective web/bundles folders. We recommend to always use the symlink option when developing on the PIM.
Compile less files¶
The .less files are compiled into a main CSS file with less.js.
yarn run less
yarn run webpack-dev
With those steps, we just prepared everything to get started to contribute to the frontend part of the application. You are now ready to launch the application and start to experiment with it.
Quick FAQ to understand what is going on¶
This section is here to understand how the Akeneo PIM front commands are working, if you want to be quick and efficient go to the QuickAndEasyWay section.
What to do if I updated a translation?¶
To rebuild the frontend translations you need to run:
rm -rf var/cache/* rm -rf web/js/translation/your_updated_locale.js bin/console --env=prod oro:translation:dump your_updated_locale
What to do if I updated a .less/.css file?¶
yarn run less
What to do if I updated a form_extension**.yml file?¶
rm -rf var/cache bin/console --env=prod pim:installer:dump-extensions yarn webpack-dev
What to do if I updated a requirejs.yml file?¶
rm -rf var/cache bin/console --env=prod pim:installer:dump-require-paths yarn webpack-dev
With those commands you now know what to do exactly when you modify some files on the PIM. But most of the time there are more efficient way to do.
The quick and easy way¶
Most of the time, when you are contributing to the PIM you do a bit of everything at the same time. Sometimes, it can be hard to keep track of which command to run and when. That’s why it can be really handy to define an alias in your terminal to run a compilation of them.
run this command:
rm -rf ./var/cache/*; rm -rf ./web/js/*; rm -rf ./web/css/*; php bin/console pim:installer:assets --env=prod --symlink;
We strongly advise you to create an alias
Instead, you can simply run
What webpack command to run?¶
This command does exactly what the yarn webpack command does but will not exit at the end of the process. Instead, it will wait for modifications and recompile the changed files if needed. It will then reload your browser to see the modifications in the PIM.
Last word about the browser cache¶
We currently don’t manage dynamic assets filenames to automatically force browser cache update. So you will need to clear your browser cache when working on the PIM frontend. What we advise to avoid this problem is to disable the browser cache when your debug console is opened (this option is available on the main browser in the market).
Found a typo or a hole in the documentation and feel like contributing?
Join us on Github!