Add symfony/webpack-encore-bundle (#630)

Update CONTRIBUTING_WEBPACK.md

Co-authored-by: Javier Spagnoletti <[email protected]>

Update CONTRIBUTING_WEBPACK.md

Co-authored-by: Javier Spagnoletti <[email protected]>

Update CONTRIBUTING_WEBPACK.md

Co-authored-by: Javier Spagnoletti <[email protected]>

Update CONTRIBUTING_WEBPACK.md

Co-authored-by: Javier Spagnoletti <[email protected]>

Co-authored-by: Javier Spagnoletti <[email protected]>

.github/workflows/lint.yaml

@@ -63,3 +63,21 @@ jobs:
 
             - name: "Linting..."
               run: make lint-xml
+
+    webpack:
+        name: "Webpack build"
+
+        runs-on: ubuntu-latest
+
+        steps:
+            -   name: "Checkout"
+                uses: actions/[email protected]
+
+            -   name: "Using Node"
+                uses: actions/[email protected]
+
+            -   name: "Install dependencies"
+                run: |
+                    yarn
+            -   name: "Build"
+                run: yarn build

.gitignore

@@ -21,5 +21,19 @@
 /behat.yml
 /build
 
+### Composer
+/composer.lock
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+/builds_configs/sonata_admin_adminlte2/node_modules/
+/builds_configs/sonata_admin_adminlte3/node_modules/
+/builds_configs/sonata_page_bootstrap_3/node_modules/
+/builds_configs/sonata_page_bootstrap_4/node_modules/
+###< symfony/webpack-encore-bundle ###
+
 ### Docker
 .certs

CONTRIBUTING_WEBPACK.md

@@ -0,0 +1,28 @@
+Contributing webpack encore
+===========================
+
+### webpack configuration
+
+You can find configuration for each build under `builds_configs/` directory. This structure allows to use different 
+configurations for each layout.
+
+```sh
+cd ./builds_configs/sonata_admin_adminlte2
+yarn install # to install node_modules
+yarn encore dev # to generate files under `public/build/sonata_admin/`
+``` 
+
+### templates and css frameworks
+
+Symfony allows to override templates ([see more][link_symfony_templates]). Use it for testing your changes.
+Before creating a new PR, move this file under the chosen framework directory (for example, `templates/bootstrap3/`). You can also add other CSS frameworks
+and templates for them.
+
+### Links:
+
+- [webpack encore dev-kit issue][link_issue]
+- [symfony webpack guide][link_symfony_webpack]
+
+[link_issue]: https://github.com/sonata-project/dev-kit/issues/779 "webpack encore dev-kit issue"
+[link_symfony_webpack]: https://symfony.com/doc/current/frontend.html#webpack-encore "symfony webpack encore"
+[link_symfony_templates]: https://symfony.com/doc/current/bundles/override.html "symfony override templates"

assets/css/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: lightgray;
+}

assets/js/app.js

@@ -0,0 +1,14 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import '../css/app.css';
+
+// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
+// import $ from 'jquery';
+
+console.log('Hello Webpack Encore! Edit me in assets/js/app.js');