EZP-30035: Install Webpack Encore (ezsystems#345)

* Webpack Encore

* change path web/js to web/assets/build

* update to new approach with preloading configs from bundle

* changed root_dir to project_dir

* added json_manifest

* changed externals

* added ez entrypoint

* fixed multiple configuration

* renamed ez to ezplatform

* keep build folders, ignore compiled files

* fix extra line in gitignore

* added node_modules and yarn.lock to .gitignore

* EZP-30035: Install eZ Platform encore bundle from ezplatform-core

* Add Node to Docker images. Cache Yarn

* Use node in app-dev container

* [Docker] Simply set PHP_IMAGE to Node

* [Docker] Specify Node flavour where needed

* moved translations to assets/translation

.gitignore

@@ -34,6 +34,12 @@
 !var/SymfonyRequirements.php
 /vendor/
 /web/bundles/
+/web/assets/translations/*
+/web/assets/build/*
+!web/assets/build/.gitkeep
+/web/assets/ezplatform/build/*
+!/web/assets/ezplatform/build/.gitkeep
+/node_modules/
 
 .php~
 
@@ -57,6 +63,7 @@ web/fonts/
 
 composer.phar
 composer.lock
+yarn.lock
 .buildpath
 .project
 .settings/

.travis.yml

@@ -6,6 +6,7 @@ services:
   - docker
 
 cache:
+  yarn: true
   directories:
     - $HOME/.composer/cache/files
 

app/AppKernel.php

@@ -15,6 +15,7 @@ public function registerBundles()
             new Symfony\Bundle\MonologBundle\MonologBundle(),
             new Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle(),
             new Symfony\Bundle\AsseticBundle\AsseticBundle(),
+            new Symfony\WebpackEncoreBundle\WebpackEncoreBundle(),
             new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
             new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
             // Dependencies
@@ -45,6 +46,7 @@ public function registerBundles()
             new EzSystems\EzPlatformAdminUiModulesBundle\EzPlatformAdminUiModulesBundle(),
             new EzSystems\EzPlatformAdminUiAssetsBundle\EzPlatformAdminUiAssetsBundle(),
             new EzSystems\EzPlatformCronBundle\EzPlatformCronBundle(),
+            new EzSystems\EzPlatformEncoreBundle\EzSystemsEzPlatformEncoreBundle(),
             // Application
             new AppBundle\AppBundle(),
         ];

app/config/config.yml

@@ -72,7 +72,10 @@ framework:
         #       Further reading on sessions: http://doc.ezplatform.com/en/latest/guide/sessions/
     fragments: ~
     http_method_override: true
-    assets: true
+    assets:
+        packages:
+            ezplatform:
+                json_manifest_path: '%kernel.project_dir%/web/assets/ezplatform/build/manifest.json'
     php_errors:
         log: true
 
@@ -93,6 +96,12 @@ assetic:
             formatter: 'Leafo\ScssPhp\Formatter\Crunched'
             import_paths: ['%kernel.project_dir%/web/']
 
+# Webpack Encore Configuration
+webpack_encore:
+    output_path: "%kernel.project_dir%/web/assets/build"
+    builds:
+        ezplatform: "%kernel.project_dir%/web/assets/ezplatform/build"
+
 # Swiftmailer Configuration
 swiftmailer:
     transport: '%mailer_transport%'

composer.json

@@ -31,6 +31,7 @@
         "ezsystems/ezplatform-admin-ui": "^1.5@dev",
         "ezsystems/ezplatform-admin-ui-assets": "^3.1@dev",
         "ezsystems/ezplatform-admin-ui-modules": "^1.5@dev",
+        "ezsystems/ezplatform-core": "^1.0@dev",
         "ezsystems/ezplatform-cron": "^2.0@dev",
         "ezsystems/ezplatform-design-engine": "^2.0@dev",
         "ezsystems/ezplatform-http-cache": "~0.8@dev",
@@ -50,6 +51,7 @@
         "symfony/swiftmailer-bundle": "^3.2.4",
         "symfony/symfony": "^3.4.18",
         "symfony/thanks": "^1.1.0",
+        "symfony/webpack-encore-bundle": "^1.0.0",
         "twig/extensions": "^1.5.3",
         "twig/twig": "^2.5",
         "white-october/pagerfanta-bundle": "^1.2.2",
@@ -79,9 +81,11 @@
             "eZ\\Bundle\\EzPublishCoreBundle\\Composer\\ScriptHandler::clearCache",
             "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
             "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile",
-            "@php bin/console bazinga:js-translation:dump --merge-domains",
+            "@php bin/console bazinga:js-translation:dump 'web/assets' --merge-domains",
             "@php bin/console assetic:dump",
-            "@php bin/security-checker security:check"
+            "@php bin/security-checker security:check",
+            "yarn install",
+            "yarn encore dev"
         ],
         "post-install-cmd": [
             "@symfony-scripts"

doc/docker/Dockerfile-app

@@ -1,5 +1,5 @@
 ARG PHP_IMAGE=ezsystems/php:7.2-v1
-FROM ${PHP_IMAGE} as builder
+FROM ${PHP_IMAGE}-node as builder
 
 # This is prod image (for dev use just mount your application as host volume into php image we extend here)
 ENV SYMFONY_ENV=prod

doc/docker/Dockerfile-nginx

@@ -1,5 +1,5 @@
 ARG PHP_IMAGE=ezsystems/php:7.2-v1
-FROM ${PHP_IMAGE} as web-build
+FROM ${PHP_IMAGE}-node as web-build
 
 ENV SYMFONY_ENV=prod
 

doc/docker/base-dev.yml

@@ -3,7 +3,7 @@ version: '3.3'
 
 services:
   app:
-    image: ${PHP_IMAGE}
+    image: ${PHP_IMAGE}-node
     volumes:
      - ${COMPOSE_DIR}/../../:/var/www:cached
      - ${COMPOSER_HOME}:/root/.composer:cached

ez.webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const bundles = require('./var/encore/ez.config.js');
+
+module.exports = (Encore) => {
+    Encore.setOutputPath('web/assets/ezplatform/build')
+        .setPublicPath('/assets/ezplatform/build')
+        .addExternals({
+            react: 'React',
+            'react-dom': 'ReactDOM',
+            jquery: 'jQuery',
+            moment: 'moment',
+            'popper.js': 'Popper',
+            alloyeditor: 'AlloyEditor',
+            'prop-types': 'PropTypes',
+        })
+        .enableSassLoader()
+        .enableReactPreset()
+        .enableSingleRuntimeChunk();
+
+    bundles.forEach((configPath) => {
+        const addEntries = require(configPath);
+
+        addEntries(Encore);
+    });
+
+    const eZConfig = Encore.getWebpackConfig();
+
+    eZConfig.name = 'ezplatform';
+
+    return eZConfig;
+};

ez.webpack.config.manager.js

@@ -0,0 +1,35 @@
+const findItems = (eZConfig, entryName) => {
+    const items = eZConfig.entry[entryName];
+
+    if (!items) {
+        throw new Error(`Couldn't find entry with name: "${entryName}". Please check if there is a typo in the name.`);
+    }
+
+    return items;
+};
+const replace = ({ eZConfig, entryName, itemToReplace, newItem }) => {
+    const items = findItems(eZConfig, entryName);
+    const indexToReplace = items.indexOf(itemToReplace);
+
+    if (indexToReplace < 0) {
+        throw new Error(`Couldn't find item "${itemToReplace}" in entry "${entryName}". Please check if there is a typo in the name.`);
+    }
+
+    items[indexToReplace] = newItem;
+};
+const remove = ({ eZConfig, entryName, itemsToRemove }) => {
+    const items = findItems(eZConfig, entryName);
+
+    eZConfig.entry[entryName] = items.filter((item) => !itemsToRemove.includes(item));
+};
+const add = ({ eZConfig, entryName, newItems }) => {
+    const items = findItems(eZConfig, entryName);
+
+    eZConfig.entry[entryName] = [...items, ...newItems];
+};
+
+module.exports = {
+    replace,
+    remove,
+    add
+};

package.json

@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "@babel/preset-react": "^7.0.0",
+    "@symfony/webpack-encore": "^0.22.4",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.0.1"
+  }
+}

webpack.config.js

@@ -0,0 +1,21 @@
+const Encore = require('@symfony/webpack-encore');
+const path = require('path');
+const getEzConfig = require('./ez.webpack.config.js');
+const eZConfigManager = require('./ez.webpack.config.manager.js');
+const eZConfig = getEzConfig(Encore);
+
+Encore.reset();
+Encore.setOutputPath('web/assets/build')
+    .setPublicPath('/assets/build')
+    .enableSassLoader()
+    .enableReactPreset()
+    .enableSingleRuntimeChunk();
+
+// Put your config here.
+
+// uncomment the two lines below, if you have your own Encore configuration for your project
+// const projectConfig = Encore.getWebpackConfig();
+// module.exports = [ eZConfig, projectConfig ];
+
+// comment-out this line if you've uncommented the above lines
+module.exports = eZConfig;