Sulu: WebpackEncoreBundle conflict with public/build/admin assets

[davidromani]

| Q | A
| --- | ---
| Sulu Version | 2.0.6
| Browser Version | any

Actual Behavior

After install symfony/webpack-encore-bundle to manage my frontend assets, every time that I run $ yarn encore dev command my backend (admin) assets are broken.

Expected Behavior

I need to keep both (/public/build/admin and /public/build) compiled assets folders to ensure that admin area is working well.

Steps to Reproduce

• install sulu/skeleton
• composer require symfony/webpack-encore-bundle
• yarn install
• check that webpack.config.js file is installed in project root dir
• yarn encore dev

[alexander-schranz]

@davidromani Thank you for creating an issue. That sadly an issue with the webpack encore recipe, you need to change the output_path in the webpack encore configuration for your website:

# config/packages/webpack_encore.yaml
webpack_encore:
    output_path: '%kernel.project_dir%/public/build/website'

# webpack.config.js
     .setOutputPath('public/build/website/')

If your current configuration did accidentally remove the admin build you can get it back by using: bin/console sulu-admin:download-build if you did not have any admin related changes.

[davidromani]

Thanks @alexander-schranz it works!

Finally I found another place where you must configurate the new manifest.json location.

# config/packages/assets.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/website/manifest.json'

[alexander-schranz]

I created a git.patch file which can easily applied after encore was installed:

wget https://gist.githubusercontent.com/alexander-schranz/0c4688b0942d5bc1dbc8d50660ec1236/raw/webpack-encore-sulu.diff && git apply webpack-encore-sulu.diff && rm webpack-encore-sulu.diff 

The download file can also be found here: https://gist.github.com/alexander-schranz/0c4688b0942d5bc1dbc8d50660ec1236

And will apply the following changes:

Git Patch file:

diff --git a/assets/css/app.css b/assets/website/css/app.css
similarity index 100%
rename from assets/css/app.css
rename to assets/website/css/app.css
diff --git a/assets/js/app.js b/assets/website/js/app.js
similarity index 100%
rename from assets/js/app.js
rename to assets/website/js/app.js
diff --git a/config/packages/assets.yaml b/config/packages/assets.yaml
index 051d36d..b73b0aa 100644
--- a/config/packages/assets.yaml
+++ b/config/packages/assets.yaml
@@ -1,3 +1,3 @@
 framework:
     assets:
-        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+        json_manifest_path: '%kernel.project_dir%/public/build/website/manifest.json'
diff --git a/config/packages/webpack_encore.yaml b/config/packages/webpack_encore.yaml
index 9191f4f..47ae4cc 100644
--- a/config/packages/webpack_encore.yaml
+++ b/config/packages/webpack_encore.yaml
@@ -1,6 +1,6 @@
 webpack_encore:
     # The path where Encore is building the assets - i.e. Encore.setOutputPath()
-    output_path: '%kernel.project_dir%/public/build'
+    output_path: '%kernel.project_dir%/public/build/website'
     # If multiple builds are defined (as shown below), you can disable the default build:
     # output_path: false

diff --git a/webpack.config.js b/webpack.config.js
index e8b4283..d95de23 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,11 +8,11 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {

 Encore
     // directory where compiled assets will be stored
-    .setOutputPath('public/build/')
+    .setOutputPath('public/build/website/')
     // public path used by the web server to access the output path
-    .setPublicPath('/build')
+    .setPublicPath('/build/website')
     // only needed for CDN's or sub-directory deploy
-    //.setManifestKeyPrefix('build/')
+    //.setManifestKeyPrefix('build/website/')

     /*
      * ENTRY CONFIG
@@ -23,9 +23,9 @@ Encore
      * Each entry will result in one JavaScript file (e.g. app.js)
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('app', './assets/js/app.js')
-    //.addEntry('page1', './assets/js/page1.js')
-    //.addEntry('page2', './assets/js/page2.js')
+    .addEntry('app', './assets/website/js/app.js')
+    //.addEntry('page1', './assets/website/js/page1.js')
+    //.addEntry('page2', './assets/website/js/page2.js')

     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()