Use Webpack Encore #6823

yguedidi · 2023-08-10T00:34:47Z

This PR is doing multiple things that could be extracted in separated PR later if you want.
I'm opening it as draft so that you can have a look at it, and so that we can start taking decisions and drafting solutions to the issues I faced.

What this PR is about more precisely:

some assets clean up
merge of global and material as no more theming
follow standard convetions (root assets/ folder, build/ instead of wallassets)
simplify Webpack config by using Webpack Encore
better builds following Webpack Encore sane defaults (but some tweaks to fit with Wallabag needs)

edit: found a solution, see #6823 (comment)

It's really almost done and it actually works!
But there is one thing that is a blocker: the fact that production generated assets are tracked in the repository.
Why is that an issue: Webpack Encore relies mainly on 2 files, manifest.json and entrypoints.json
It's possible to have different manifests for prod and dev (what I did already), but for entrypoints.json it's not possible.
And this leads to the fact that the file is changed when running dev build or watch. Not a super DX, see commit [WIP] issue after dev build for what happen after to the tracked entrypoints.json

So what would be the right direction in your option?
To me, production generated assets shouldn't be tracked in the dev repository.
But I guess the docker image and ZIP packages rely on that so not that simple to manage the production assets building step outside the repository. Am I right here?

Feel free to tell me what you accept that I extract in a separated PR, because the folder structure changes are not impacted by the issue mentionned above, just the use of Webpack Encore

yguedidi · 2023-08-12T00:48:32Z

Managed to find a solution! 🎉
It may look a bit "hacky" (and I personally think it is), but it works the way Wallabag works today, by having generated production assets be part of the source code.
I used the possibility to have multiple webpack builds to solve the issue, one build for prod in a public folder that is tracked by git, and another build for dev generated in another folder that is not tracked by git.
Not sure this feature was made for that usage but it's OK for now I would say!
The cleaner solution not having production assets in the source code is another topic to be solved later.

yguedidi · 2023-08-12T00:51:22Z

.babelrc

+        "useBuiltIns": "usage",
+        "corejs": "3.23"


to match the Webpack Encore Bundle recipe, see https://github.com/symfony/recipes/blob/main/symfony/webpack-encore-bundle/1.10/webpack.config.js#L55-L56

yguedidi · 2023-08-12T00:52:04Z

.gitignore

@@ -59,3 +59,5 @@ specialexport.json

 # Custom CSS file
 web/custom.css
+
+yarn-error.log


to match the Webpack Encore Bundle recipe, see https://github.com/symfony/recipes/blob/main/symfony/webpack-encore-bundle/1.10/manifest.json#L16

yguedidi · 2023-08-12T00:53:38Z

package.json

@@ -58,6 +60,7 @@
    "postcss": "^8.4.27",
    "postcss-loader": "^7.3.3",
    "postcss-scss": "^4.0.6",
+    "regenerator-runtime": "^0.14.0",


to match the Webpack Encore Bundle recipe, see https://github.com/symfony/recipes/blob/main/symfony/webpack-encore-bundle/1.10/package.json#L9

yguedidi · 2023-08-12T00:53:55Z

package.json

    "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^5.9.0"
+    "webpack-merge": "^5.9.0",
+    "webpack-notifier": "^1.15.0"


to match the Webpack Encore Bundle recipe, see https://github.com/symfony/recipes/blob/main/symfony/webpack-encore-bundle/1.10/package.json#L12

yguedidi · 2023-08-12T00:54:19Z

package.json

    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.3",
+    "core-js": "^3.32.0",


to match the Webpack Encore Bundle recipe, see https://github.com/symfony/recipes/blob/main/symfony/webpack-encore-bundle/1.10/package.json#L8

yguedidi · 2023-08-12T00:54:49Z

package.json

@@ -70,9 +73,9 @@
    "url-loader": "^4.1.1",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",


will still be installed as a transitive dependency

yguedidi · 2023-08-12T00:55:58Z

postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};


from the doc: https://symfony.com/doc/4.4/frontend/encore/postcss.html

yguedidi · 2023-08-12T00:58:12Z

src/Wallabag/CoreBundle/Resources/views/Entry/share.html.twig


+        {{ encore_entry_link_tags('public', null, app.environment == 'dev' ? 'dev' : 'prod') }}


now test environment is using prod assets that are generated.
did this change because on CI dev assets are not generated, and it can happen that on dev we don't have them neither, so using prod assets ensure we don't have assets missing errors when running tests

yguedidi · 2023-08-12T00:59:15Z

webpack.config.js

+    .splitEntryChunks()
+    .enableSingleRuntimeChunk()


to match the Webpack Encore Bundle recipe, see https://github.com/symfony/recipes/blob/main/symfony/webpack-encore-bundle/1.10/webpack.config.js#L28-L33

yguedidi · 2023-08-12T01:00:28Z

webpack.config.js

+  .configureImageRule({
+    type: 'asset',
+    maxSize: 500 * 1024, // see https://github.com/symfony/webpack-encore/issues/1132
+  })
+  .configureFontRule({
+    type: 'asset',
+    maxSize: 500 * 1024, // see https://github.com/symfony/webpack-encore/issues/1132
+  });


asset/inline is not working, so here a trick to force inlining images and fonts

j0k3r

We are tracking prod asset into Git because we don't want end user to install node, yarn, etc.. to build asset on their side.
If assets are ready from the repo, it's way much easier for us. We do already have a lot of request because of server installation problem and we don't want to add more with the installation of node, etc 😬

j0k3r · 2023-08-24T12:26:23Z

assets/js/shortcuts/main.js

+
+/* Shortcuts */
+
+/* Go to */


Is that coming from a deleted file?

j0k3r · 2023-08-24T12:26:59Z

web/build/118.809c3054.css

Won't the name change each time the file is built?

yes, but as the goal is to remove prod built assets from the repo the build folder will be ignored :)

yguedidi · 2023-08-24T12:41:46Z

We are tracking prod asset into Git because we don't want end user to install node, yarn, etc.. to build asset on their side.

@j0k3r I completely understand! but having them in the development repository and having them in the en user release ready to be used it's not the name :)
see for example wallabag/docker#362 where the assets are built in the Docker image directly.
a similar thing can be done when creating an archive release.

j0k3r · 2023-08-24T12:45:54Z

a similar thing can be done when creating an archive release.

You are totaly right, this can be done when we create the archive ready to be installed and attached to each release.
But then, we'll need to improve the documentation about installing tools (node, yarn, etc.) to build assets locally when people only clone the repository.

yguedidi · 2023-09-25T20:52:55Z

@j0k3r for reference there are wallabag/docker#362 for Docker and #6982 for ZIP releases that build assets on the fly for those artifacts.
once accepted we will be able to remove built assets from the git repository!

yguedidi added 12 commits August 11, 2023 23:58

Extract share entrypoint

a5a0626

Rename share.js to public.js

2a2f5b8

Remove unused assets

e922419

Extract images

8a6afa6

Prefix partial scss files by _

53cc76c

Rename global.scss to _material_icons.scss

44c89b9

Extract _material_icons.scss

1f23993

Extract global JS

6ffa423

Extract material SCSS

567d6d6

Extract material entrypoint

ad7a186

Extract material JS

542313b

Move assets to assets root folder

f2840b2

yguedidi force-pushed the use-webpack-encore branch from 72086c1 to 408e0fb Compare August 12, 2023 00:04

yguedidi marked this pull request as ready for review August 12, 2023 00:06

yguedidi force-pushed the use-webpack-encore branch from 408e0fb to 60229db Compare August 12, 2023 00:28

yguedidi added 2 commits August 12, 2023 01:35

Use Webpack Encore

49782e8

Rename wallassets to the more standard build

a9ba80e

yguedidi force-pushed the use-webpack-encore branch from 60229db to a9ba80e Compare August 12, 2023 00:38

yguedidi commented Aug 12, 2023

View reviewed changes

yguedidi mentioned this pull request Aug 15, 2023

Use the release archive instead of the git archive wallabag/docker#362

Merged

j0k3r reviewed Aug 24, 2023

View reviewed changes

yguedidi marked this pull request as draft August 26, 2023 08:55

yguedidi added this to the 2.8.0 milestone Dec 28, 2023

yguedidi mentioned this pull request Feb 24, 2024

Move assets to assets/ root folder "as is" #7294

Merged

yguedidi added the Work in progress label Mar 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Webpack Encore #6823

Use Webpack Encore #6823

yguedidi commented Aug 10, 2023 •

edited

yguedidi commented Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

yguedidi Aug 12, 2023

j0k3r left a comment

j0k3r Aug 24, 2023

j0k3r Aug 24, 2023

yguedidi Sep 25, 2023

yguedidi commented Aug 24, 2023

j0k3r commented Aug 24, 2023

yguedidi commented Sep 25, 2023


		{{ encore_entry_link_tags('public', null, app.environment == 'dev' ? 'dev' : 'prod') }}

Use Webpack Encore #6823

Are you sure you want to change the base?

Use Webpack Encore #6823

Conversation

yguedidi commented Aug 10, 2023 • edited

yguedidi commented Aug 12, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

j0k3r left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yguedidi commented Aug 24, 2023

j0k3r commented Aug 24, 2023

yguedidi commented Sep 25, 2023

yguedidi commented Aug 10, 2023 •

edited