Integrating Atomic Frontend Into the Legacy Demoshop

The following guide will help migrating an existing Demoshop project to Atomic Frontend.

  1. Update assets/Yves/default/app/index.js

    Append the following lines to the end of the file:

    var app = require('ShopUi/app');
    app.bootstrap();
  2. Update assets/Yves/default/vendor.entry.js

    Lines to remove:

    // es6 promise fix (webpack 2)
    require('es6-promise/auto');

    Line to add:

    require('@webcomponents/webcomponentsjs/webcomponents-bundle');
  3. Update package.json by replacing the following sections with the lines specified below:
  4. Update src/Pyz/Yves/Application/Theme/default/layout/layout.twig

    Add <script src="/assets/default/js/runtime.js"></script> to <head>:

    <!-- add here -->
    <link rel="stylesheet" href="/assets/default/css/vendor.css" />
    <link rel="stylesheet" href="/assets/default/css/app.css" />

    Add <script src="/assets/default/js/es6-polyfill.js"></script> at the very bottom of the page skeleton, before app.js and vendor.js:

    <!-- add here -->
    <script src="/assets/default/js/vendor.js"></script>
    <script src="/assets/default/js/app.js"></script>
  5. Delete folder assets/Yves/default/build/.
  6. Download the Migration Package, unpack it and copy to your project following the folder structure of the package.

 

See also: