AFUP Lorraine - Symfony Webpack Encore
0 likes362 views
The document details the use of Symfony's Webpack Encore for asset management and bundling in web development, targeting PHP developers. It includes installation instructions, configuration examples, and code snippets for integrating JavaScript, CSS, and Bootstrap into a Symfony project. Additionally, it discusses features like cache-busting and support for modern JavaScript frameworks like TypeScript.
![public/build/entrypoints.json
{
"entrypoints": {
"app": {
"js": [
"/build/runtime.js",
"/build/app.js"
],
"css": [
"/build/app.css"
]
}
}
}
36](https://image.slidesharecdn.com/afup-lorraine-webpack-encore-190207085851/85/AFUP-Lorraine-Symfony-Webpack-Encore-36-320.jpg)
![public/build/entrypoints.json
{
"entrypoints": {
"app": {
"js": [
"/build/runtime.fa8f03f5.js",
"/build/app.27210d01.js"
],
"css": [
"/build/app.c12d85ce.css"
]
}
}
}
41](https://image.slidesharecdn.com/afup-lorraine-webpack-encore-190207085851/85/AFUP-Lorraine-Symfony-Webpack-Encore-41-320.jpg)
AFUP Lorraine - Symfony Webpack Encore
- 1. Symfony - Webpack Encore
- 2. Who am I? Backend developer PHP enthusiast CTO at Darkmira Freelance web architect Occasional lecturer Javascript hater! 2
- 3. Community involvement ScotlandPHP (conference, November 8th and 9th) DarkmiraTour Brasil (conference, June 7th to 9th) DijonTech (meetup, sometimes in March) AFUP Lorraine ("super apéro", March 14th, in a bar in Metz) 3
- 4. by SpaceFox article Sans déconner : après huit mois d'observation, ma conclusion la plus logique est que 95 % de la communauté Javascript est composée de macaques sous cocaïne. Je ne vois pas d'autres explication logique à l'état général de l'environnement. “ “ 4
- 5. 5
- 6. Javascript alternative? What a success! Q. Is Dart supported by my browser? Although no production browsers can execute Dart code directly, all modern browsers can execute Dart code that as been compiled to JavaScript. “ “ 6
- 7. by Krishna Chaitanya Acondy article Can Monkeys Write JavaScript? An Impartial Analysis “ “ 7
- 8. What's your task runner? Gulp Grunt Brunch Package manager? Bower NPM Yarn 8
- 10. ♥ Webpack ♥
- 11. 11
- 12. ♥ Webpack + Symfony ♥ Symfony Webpack Encore = Webpack made easy! Symfony ships with a pure-JavaScript library - called Webpack Encore - that makes working with CSS and JavaScript a joy. You can use it, use something else, or just create static CSS and JS les in your public/ directory and include them in your templates. “ “ 12
- 13. Basic usage: in a Symfony project 13
- 14. composer require symfony/skeleton myproject cd myproject composer require twig Add a route index: path: / controller: AppControllerHomepage::handle And create the controller and template. 14
- 15. final class Homepage { private $renderer; public function __construct(Environment $renderer) { $this->renderer = $renderer; } public function handle(): Response { return new Response($this->renderer->render( 'homepage.html.twig' )); } } 15
- 16. {% extends 'base.html.twig' %} {% block body %} <h1>Hello World!</h1> {% endblock %} {% block title %}Hello World!{% endblock %} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}Welcome!{% endblock %}</title {% block stylesheets %}{% endblock %} </head> <body> {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body> </html> 16
- 17. 17
- 18. Adding Bootstrap CDN? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/c <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/ 18
- 19. Adding Bootstrap Downloading les manually? <script src="{{ asset('js/bootstrap.min.js') }}"></script> <link href="{{ asset('css/bootstrap.min.css') }}" rel="styleshee 19
- 20. Adding Bootstrap composer require encore Adds package.json webpack.config.js config/packages/webpack_encore.yaml assets css => app.css js => app.js 20
- 21. Install yarn dependencies yarn install Adds node_modules 21
- 22. config/packages/webpack_encore.yaml webpack_encore: # The path where Encore is building the assets. # This should match Encore.setOutputPath() in webpack.config output_path: '%kernel.project_dir%/public/build' 22
- 23. package.json { "devDependencies": { "@symfony/webpack-encore": "^0.22.0", "webpack-notifier": "^1.6.0" }, "license": "UNLICENSED", "private": true, "scripts": { "dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev --watch", "build": "encore production --progress" } } 23
- 24. webpack.config.js var Encore = require('@symfony/webpack-encore'); Encore .setOutputPath('public/build/') .setPublicPath('/build') .addEntry('app', './assets/js/app.js') .enableSingleRuntimeChunk() .cleanupOutputBeforeBuild() .enableBuildNotifications() .enableSourceMaps(!Encore.isProduction()) // enables hashed filenames (e.g. app.abc123.css) .enableVersioning(Encore.isProduction()) ; module.exports = Encore.getWebpackConfig(); 24
- 25. assets/js/app.js assets/css/app.css body { background-color: lightgray; } require('../css/app.css'); console.log('Hello Webpack Encore! Edit me in assets/js/app.js' 25
- 26. Add assets to the template {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} 26
- 28. 28
- 29. Still no Bootstrap... yarn add bootstrap jquery popper.js assets/js/app.js yarn encore dev --watch require('../css/app.css'); require('../../node_modules/bootstrap/dist/css/bootstrap.css' require('bootstrap'); 29
- 30. 30
- 31. Wahoo! It really saved me some time! - Said no one, ever “ “ 31
- 32. Enable extra features Override bootstrap the right way: yarn add sass-loader node-sass --dev assets/js/app/js // import '../css/app.css'; import '../scss/app.scss'; webpack.config.js Encore .enableSassLoader() ; 32
- 33. assets/js/app.js require('../scss/app.scss'); assets/scss/app.scss $red: purple !default; @import "~bootstrap/scss/bootstrap"; Ref: node_modules/bootstrap/scss/_variables.scss 33
- 34. 34
- 36. public/build/entrypoints.json { "entrypoints": { "app": { "js": [ "/build/runtime.js", "/build/app.js" ], "css": [ "/build/app.css" ] } } } 36
- 37. public/build/manifest.json { "build/app.css": "/build/app.css", "build/app.js": "/build/app.js", "build/runtime.js": "/build/runtime.js" } 37
- 38. Let's generate for prod yarn encore prod webpack.config.js : .enableVersioning(Encore.isProduction()) 38
- 40. public/build/manifest.json { "build/app.css": "/build/app.c12d85ce.css", "build/app.js": "/build/app.27210d01.js", "build/runtime.js": "/build/runtime.fa8f03f5.js" } 40
- 41. public/build/entrypoints.json { "entrypoints": { "app": { "js": [ "/build/runtime.fa8f03f5.js", "/build/app.27210d01.js" ], "css": [ "/build/app.c12d85ce.css" ] } } } 41
- 42. Add an image to the template Add the image assets/image/webpack.svg Edit assets/js/app.js , add require('../image/webpack.svg'); Edit templates/homepage.html.twig , add the image tag: The image bene ts of the cache busting/asset versioning policy. <img src="{{ asset('build/images/webpack.svg') }}" alt="Demo ima 42
- 43. You might not need everything everywhere! 43
- 44. Use entries webpack.config.js : Encore .addEntry('app', './assets/js/app.js') .addEntry('home', './assets/js/home.js') ; assets/js/app.js : require('../scss/app.scss'); assets/js/home.js : require('../image/webpack.svg'); 44
- 45. Update the template templates/homepage.html.twig : {% block stylesheets %} {{ encore_entry_link_tags('app') }} {{ encore_entry_link_tags('home') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {{ encore_entry_script_tags('home') }} {% endblock %} 45
- 47. No! Typescript FTW yarn add ts-loader typescript --dev tsconfig.json : {} webpack.config.js : Encore .enableTypeScriptLoader() ; 47
- 48. assets/ts/Person.ts : export interface Person { firstName: string; lastName: string; } assets/ts/LambdaPerson.ts : import {Person} from "./Person"; export class LabdaPerson implements Person { public constructor(public firstName: string, public lastName } } 48
- 49. assets/ts/Greeter.ts : assets/js/app.js : import {Person} from "./Person"; export function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } import {greeter} from "../ts/Greeter"; import {LabdaPerson} from "../ts/LambdaPerson"; require('../scss/app.scss'); require('../image/webpack.svg'); let user = new LabdaPerson('Jane', 'Doe'); document.getElementById('hello').innerHTML = greeter(user);49
- 50. 50
- 51. Standalone Webpack encore only, no composer required: yarn add @symfony/webpack-encore --dev Create your own webpack.config.js . Read from public/build/entrypoints.json and public/build/manifest.json 51
- 52. Javascript with almost no Javascript?