• v5.0
    • Versions
    • master

 

  • Install Akeneo PIM
    • Install Akeneo PIM for development with Docker
    • Install Akeneo PIM manually
      • System Requirements
      • System installation on Debian 10 (Buster)
      • System installation on Ubuntu 18.04 (Bionic Beaver)
      • System installation on Ubuntu 20.04 (Focal Fossa)
      • Installing Akeneo PIM Community Edition (CE)
      • Installing Akeneo PIM Enterprise Edition (EE) with the Archive
      • Setting up the job queue daemon
      • Setting up the Events API
    • How to customize the Dataset
    • How to Add Translation Packs
  • Upgrade Akeneo PIM projects
    • How to apply a patch?
      • How to apply a patch - Community Edition
      • How to apply a patch - Enterprise Edition - Flexibility Cloud offer
      • How to apply a patch - Enterprise Edition - On Premise offer
    • Where is the Changelog?
    • How to upgrade to a minor version?
    • How to upgrade to a major version?
      • Upgrade from 3.2 to 4.0
      • Upgrade from 4.0 to 5.0
  • Import and Export data
    • How import works
    • Understanding the Product Import
    • Understanding the Product Export
    • Formats
      • Localized labels
      • Scopable labels
      • Association types data structure
      • Attribute data structure
      • Category data structure
      • Family data structure
      • Family variant data structure
      • Group data structure
      • Options data structure
      • Product data structure
      • Product model data structure
    • Akeneo Connectors
    • How to Customize Import / Export
      • How to create a new Connector
      • How to import Products from a XML file
      • How to clean a CSV file during a Product import
      • How to automate imports/exports
  • Manipulate the Akeneo PIM data
    • How to Customize Mass Edit Operations
      • How to register a new bulk action
      • How to Register a New Mass Edit Action on Products
    • How to Manipulate Products
      • How to Query Products
      • How to Create Products
      • How to Update Products
      • How to Validate Products
      • How to Save Products
      • How to Remove Products
    • How to Manipulate Non-Product Objects
      • How to Query Non-Product Objects
      • How to Create Non-Product Objects
      • How to Update Non-Product Objects
      • How to Validate Non-Product Objects
      • How to Save Non-Product Objects
      • How to Remove Non-Product Objects
    • How to add a custom action rule
      • General information about rule format
      • How to add a custom action in the rule engine
    • How to Define Access Control List
    • How to Customize the Catalog Structure
      • How to Create a Reference Data
    • How To Customize Teamwork Assistant (Enterprise Edition)
      • Customize notifications
      • Add a calculation step
      • How to log calculation step
      • Remove projects impacted by a custom catalog update
    • How to store assets externally
    • How to Configure Measurement Limits
  • Maintain Akeneo PIM projects
    • First aid kit
    • Bug qualification
    • Common issues
    • Scalability Guide
      • Audit with 3 Representative Catalogs
      • More than 10k attributes?
      • More than 10k families?
      • More than 10k categories?
      • More than 500 attributes usable in the product grids?
      • More than 100k products to export?
      • More than 1GB of product media to export?
    • How to purge history
      • How to Purge jobs executions
      • How to adapt the version purger to your needs
  • Contribute to Akeneo PIM
    • How to report an issue?
    • How to translate the user interface?
    • How to enhance the documentation?
    • How to contribute to a Connector?
    • How to submit a patch to the PIM?
    • How to contribute to the frontend part of the application
    • How behavior tests are architectured in the PIM?
      • Establishing Decorator Pattern
      • Using Spin In Behat
  • Use SSO authentication locally
  • Reference Entities
    • Configure Entity Limits
    • Create a new Reference Entity Attribute type
    • Enrich Records with a new Reference Entity Attribute type
    • Add a Custom Property to Your Custom Attribute Type
    • Refresh records completeness
  • Troubleshooting guide
  • Technical overview
    • Product Information
    • Teamwork Assistant (Enterprise Edition)
      • Project creation
      • Project completeness
      • Project Completeness widget
      • Catalog update impact
      • Scalability guide
      • Users permission summary for Behat tests
    • Collaborative workflow
      • Simple workflow
      • Partial workflow
  • Technical architecture
    • Best Practices
      • Create a project
      • Create a reusable bundle
      • Code Conventions
      • Coding Standards
    • How to implement your business logic using the event system
    • Events
      • Storage events
      • Workflow events (Enterprise Edition only)
    • How to Localize your data
      • How to change the PIM locale
      • How to Use Localizers
      • How to use Presenters
    • How to Add a Notification
    • Performances Guide
      • Memory usage of rules execution (Enterprise Edition)
      • Memory leak fix in Rules Engine (ORM)
      • More than 100 WYSIWYG editors in a page
      • PHP7 and HHVM Compatibility?
      • Job product batch size
    • How to Use the Web REST API
    • Standard format
      • Products
      • Other entities
      • Usage
    • Application Technical Information
      • Application Technical Dependencies
      • Server side set up for hosting
      • System Requirements
      • Recommended configuration
      • Client side configuration and compatibilities
      • Operation processes
      • Flow Matrix
  • Akeneo Cloud Edition
    • Flexibility
      • Environment accesses
      • System Administration & Services Management
      • Periodic tasks & Crontab configuration
      • Composer settings
      • Queue Management & Workers
      • Disk Usage Management
    • Serenity
  • Akeneo Onboarder
    • Prerequisites
    • How to install the Onboarder bundle
    • Synchronization
    • How to update a minor version or to apply a patch
      • How to update the Onboarder bundle - Enterprise Edition - Flexibility Cloud offer
      • How to update the Onboarder bundle - Enterprise Edition - On Premise offer
    • How to upgrade to a major version
    • Troubleshooting
    • How to uninstall the Onboarder bundle
    • Environment variables
      • Using the DotEnv file
      • Using environment variables

How to contribute to the frontend part of the application¶

Currently, Akeneo PIM is using both assetic and webpack to build the frontend assets: style, javascript, images, translation files and configuration files. Sometimes it can be confusing to know which command to run to get started or to update a file.

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:

composer install

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.

Dump assets¶

After this step you will be able to launch the pim asset install command:

bin/console 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 public/bundles folders. We recommend to always use the symlink option when developing on the PIM.

This command also compiles the old requirejs configuration and translation files into javascript code later injected in the frontend modules.

Compile less files¶

The .less files are compiled into a main CSS file with less.js.

yarn run less

Run webpack¶

The last step is now to run the webpack compilation step to generate the final javascript artefacts.

yarn run webpack-dev

Sum up¶

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¶

Note

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 public/js/translation/your_updated_locale.js
bin/console 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

Conclusion¶

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.

If you touch a configuration file, a .less file or a translation file (anything but a javascript file)¶

run this command:

rm -rf ./var/cache/*; rm -rf ./public/js/*; rm -rf ./public/css/*; php bin/console pim:installer:assets --env=prod --symlink;

We strongly advise you to create an alias

If you only modify a javascript file¶

Warning

If you are only working on javascript files, you don’t need to run the previous command.

Instead, you can simply run

yarn webpack-watch

This will run the initial build of webpack and then recompile each time you modify a javascript file (and reload your browser).

What webpack command to run?¶

Akeneo PIM provides three webpack commands to build the javascript artefacts

yarn webpack¶

This first command will build the javascript file for production. The javascript will be minified and this process can take a lot of time. It’s not advised to use this command in development phase.

yarn webpack-dev¶

This command will build the javascript artefacts in development mode. The size of the generated bundle will be higher and quicker to generate. It’s the prefered way to rebuild the frontend after checking out another branch when you are not actively working on the frontend.

yarn webpack-watch¶

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!