Create your first Akeneo 7.0 front controller that that leverages the power of React! 🚀

Akeneo Bundle React Components

As there was no recent documentation on the topic, I invested some hours in reverse engineering Akeneo 7 Bundles and successfully discovered the step-by-step process to create a bundle that harnesses Akeneo’s cutting-edge UI technology using React Components.

I’m excited to share my findings with you and help you unlock the potential of this powerful combination! Let’s dive in and start building together. #Akeneo #React #Bundle

Let’s kick things off by setting up the folder structure for your bundle. For my own project, I’ve chosen to create the folder at:

src/Passionaute/HelloZiggyBundle

Next, let’s add the bundle class:

src/Passionaute/HelloZiggyBundle/HelloZiggyBundle.php

<?php

namespace Passionaute\HelloZiggyBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class HelloZiggyBundle extends Bundle
{

}

don’t forget to declare your bundle here:

config/bundles.php

<?php

return [
    // Add your bundles here with the associated env.
    // Ex:
    // Acme\Bundle\AppBundle\AcmeAppBundle::class => ['dev' => true, 'test' => true, 'prod' => true]
    Passionaute\HelloZiggyBundle\HelloZiggyBundle::class => ['all' => true],
];

Add routing.yml and declare the route:

src/Passionaute/HelloZiggyBundle/Resources/config/routing.yml

passionaute_helloziggy_index:
    path: '/helloziggy'

Other declarations in requirejs.yml to register the controller:

src/Passionaute/HelloZiggyBundle/Resources/config/requirejs.yml

config:
    config:
        pim/controller-registry:
            controllers:
                passionaute_helloziggy_index:
                    module: helloziggy/controller/hi
    paths:
        helloziggy/controller/hi: helloziggy/js/controller/hi.tsx

src/Passionaute/HelloZiggyBundle/Resources/public/js/controller/hi.tsx

import React from 'react';
import {ReactController} from '@akeneo-pim-community/legacy-bridge/src/bridge/react';
import {DependenciesProvider} from '@akeneo-pim-community/legacy-bridge';
import {ThemeProvider} from 'styled-components';
import {pimTheme} from 'akeneo-design-system';

class HiController extends ReactController {
  reactElementToMount() {
    return (
      <DependenciesProvider>
        <ThemeProvider theme={pimTheme}>
          <h1>Hello Ziggy!</h1>
        </ThemeProvider>
      </DependenciesProvider>
    );
  }

  routeGuardToUnmount() {
    return /passionaute_helloziggy_index/;
  }

  renderRoute() {
    return super.renderRoute();
  }
}

export = HiController;

You can include other components within the ThemeProvider. Just make sure to import them beforehand. Currently, it will only display the message “Hello Ziggy!”.

Lastly, we have the “global routes” declaration to add. This one was a bit challenging to find :)

config/routes/routes.yml

helloziggy:
    resource: "@HelloZiggyBundle/Resources/config/routing.yml"

Delete the cache (var/cache) and run the following commands:

docker-compose run -u www-data --rm php bin/console pim:installer:dump-require-paths
docker-compose run -u www-data --rm php bin/console pim:install:assets
docker-compose run -u www-data --rm php bin/console assets:install --symlink
docker-compose run -u node --rm node yarn run webpack

Enjoy!

http://localhost:8080/#/helloziggy