Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

Webpack Encore: La Grandeza de Javascript

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Tip

Ahora la receta agrega estos dos archivos en un lugar ligeramente diferente:

  • assets/app.js
  • assets/styles/app.css

Pero el propósito de cada uno es exactamente el mismo.

Muy bien: Así es como funciona todo esto. La receta agregó una nuevo directorio assets/ con un par de archivos CSS y JS como ejemplo. El archivo app.js básicamente hace un console.log() de algo:

15 lines assets/js/app.js
/*
* 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');

El app.css cambia el color del fondo a gris ligero:

body {
background-color: lightgray;
}

Webpack Encore está completamente configurado por un solo archivo: webpack.config.js.

var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* 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')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();

No hablaremos mucho sobre este archivo - lo vamos a guardar para el tutorial sobre Encore - pero ya está configurado para apuntar a los archivos app.js y app.css: Encore sabe que necesita procesarlos.

Corriendo Encore

Para ejecutar Encore, ve a tu terminal y corre:

yarn watch

Este es un atajo para correr yarn run encore dev --watch. ¿Qué hace esto? Lee esos dos archivos en assets/, hace algo de procesamiento, y emite una versión construida de cada uno dentro del nuevo directorio public/build/. Aquí está el archivo app.css ya construido... y el archivo app.js. Si corriéramos Encore en modo de producción - el cual es solamente otro comando - minificaría el contenido de cada archivo.

Incluyendo los Archivos CSS y JS Construidos

Ocurren muchas otras cosas interesantes, pero esta es la idea básica: ponemos el código en el directorio assets/, pero apuntamos a los archivos construidos en nuestros templates.

Por ejemplo, en base.html.twig, en vez de apuntar al viejo archivo app.css, queremos apuntar al que está en el directorio build/. Eso es muy simple, pero WebpackEncoreBundle tiene un atajo para hacerlo incluso más fácil: {{ encore_entry_link_tags() }} y pasa este app, porque ese es el nombre del archivo fuente - se le llama "entry" en el mundo de Webpack.

... line 1
<html>
<head>
... lines 4 - 5
{% block stylesheets %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
... lines 13 - 33
</html>

Abajo, agrega la etiqueta script con {{ encore_entry_script_tags('app') }}.

... line 1
<html>
... lines 3 - 12
<body>
... lines 14 - 25
{% block javascripts %}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>

¡Vamos a probarlo! Ve al navegador y refresca. ¿Funcionó? ¡Lo hizo! El color de fondo es gris... y si abro la consola, ahí está el log:

Hello Webpack Encore!

Si miras la fuente HTML, ahí no está ocurriendo nada especial: tenemos una simple etiqueta link apuntando a /build/app.css.

Moviendo nuestro Código a Encore

Ahora que esto está funcionando, vamos a mover nuestro CSS hacia el nuevo sistema. Abre public/css/app.css, copia todo esto, luego haz click derecho y borrar el archivo. Ahora abre el nuevo app.css dentro de assets/ y pega.

127 lines assets/css/app.css
body {
font-family: spartan;
color: #444;
}
.jumbotron-img {
background: rgb(237,116,88);
background: linear-gradient(302deg, rgba(237,116,88,1) 16%, rgba(51,61,81,1) 97%);
color: #fff;
}
.q-container {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
background-color: #efefee;
}
.q-container-show {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
background-color: #ED7458 ;
}
.q-container img, .q-container-show img {
border: 2px solid #fff;
border-radius: 50%;
}
.q-display {
background: #fff;
border-radius: .25rem;
}
.q-title-show {
text-transform: uppercase;
font-size: 1.3rem;
color: #fff;
}
.q-title {
text-transform: uppercase;
color: #444;
}
.q-title:hover {
color: #2B2B2B;
}
.q-title h2 {
font-size: 1.3rem;
}
.q-display-response {
background: #333D51;
color: #fff;
}
.answer-link:hover .magic-wand {
transform: rotate(20deg);
}
.vote-arrows {
font-size: 1.5rem;
}
.vote-arrows span {
font-size: 1rem;
}
.vote-arrows a {
color: #444;
}
.vote-up:hover {
color: #3D9970;
}
.vote-down:hover {
color: #FF4136;
}
.btn-question {
color: #FFFFFF;
background-color: #ED7458;
border-color: #D45B3F;
}
.btn-question:hover,
.btn-question:focus,
.btn-question:active,
.btn-question.active,
.open .dropdown-toggle.btn-question {
color: #FFFFFF;
background-color: #D45B3F;
border-color: #D45B3F;
}
.btn-question:active,
.btn-question.active,
.open .dropdown-toggle.btn-question {
background-image: none;
}
.btn-question.disabled,
.btn-question[disabled],
fieldset[disabled] .btn-question,
.btn-question.disabled:hover,
.btn-question[disabled]:hover,
fieldset[disabled] .btn-question:hover,
.btn-question.disabled:focus,
.btn-question[disabled]:focus,
fieldset[disabled] .btn-question:focus,
.btn-question.disabled:active,
.btn-question[disabled]:active,
fieldset[disabled] .btn-question:active,
.btn-question.disabled.active,
.btn-question[disabled].active,
fieldset[disabled] .btn-question.active {
background-color: #ED7458;
border-color: #D45B3F;
}
.btn-question .badge {
color: #ED7458;
background-color: #FFFFFF;
}
footer {
background-color: #efefee;
}

Tan pronto como hago eso, cuando refresco... ¡Funciona! ¡Nuestro CSS está de vuelta! La razón es que - si revisas tu terminal - yarn watch está observando a nuestros archivos por cambios. Tan pronto modificamos el archivo app.css, esto vuelve a leer el archivo y arroja una nueva versión dentro del directorio public/build. Esa es la razón por la cual corremos esto en segundo plano.

Hagamos lo mismo para nuestro JavaScript particular. Abre question_show.js y, en vez de tener un archivo JavaScript específico por página - donde solo incluimos esto en nuestra página "show" - para mantener las cosas simples, voy a poner esto dentro del nuevo app.js, el cual es cargado en cada página.

29 lines assets/js/app.js
... lines 1 - 13
/**
* Simple (ugly) code to handle the comment vote up/down
*/
var $container = $('.js-vote-arrows');
$container.find('a').on('click', function(e) {
e.preventDefault();
var $link = $(e.currentTarget);
$.ajax({
url: '/comments/10/vote/'+$link.data('direction'),
method: 'POST'
}).then(function(data) {
$container.find('.js-vote-total').text(data.votes);
});
});

Luego ve a borrar el directorio public/js/ completamente... y public/css/. También abre templates/question/show.html.twig y, al final, remueve la vieja etiqueta script.

{% extends 'base.html.twig' %}
{% block title %}Question: {{ question }}{% endblock %}
{% block body %}
... lines 6 - 57
{% endblock %}

Con algo de suerte, Encore ya reconstruyó mi app.js. Asi que si damos click para ver una pregunta - Voy a refrescar solo para estar seguros - y... da click en los íconos para votar. ¡Si! Todavía funciona.

Instalando e Importando Librerías Externas (jQuery)

Ya que estamos usando Encore, existen algunas cosas muy interesantes que podemos hacer. Esta es una: en vez de enlazar a una CDN o descargar jQuery directamente en nuestro proyecto y agregarlo al commit, podemos importar jQuery e instalarlo en nuestro directorio node_modules/... lo cual es exactamente como lo haríamos en PHP: Instalamos una librería pública dentro de vendor/ en vez de descargarla manualmente.

Para hacer eso, abre una nueva terminal y corre:

yarn add jquery --dev

Esto es lo equivalente a correr el comando composer require: Agrega jquery al archivo package.json y lo descarga dentro de node_modules/. La parte --dev no es importante.

Después, dentro de base.html.twig, remueve por completo jQuery del layout.

... line 1
<html>
... lines 3 - 12
<body>
... lines 14 - 25
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>

Si regresas a tu navegador y refrescas la página ahora... Está completamente roto:

$ is not defined

...viniendo de app.js. Eso tiene sentido: Solamente descargamos jQuery en nuestro directorio node_modules/ - aquí puedes encontrar un directorio llamado jquery - pero aún no lo estamos usando.

¿Cómo lo utilizamos? Dentro de app.js, descomentariza la línea del import: import $ from 'jquery'.

29 lines assets/js/app.js
... lines 1 - 9
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
import $ from 'jquery';
... lines 14 - 29

Esto "carga" el paquete jquery que instalamos y lo asigna a la variable $. Todas esas variables $ de más abajo están haciendo referencia al valor que importamos.

Esta es la parte realmente interesante: sin hacer ningún otro cambio, cuando refrescamos, ¡Funciona! Webpack se dio cuenta que estamos importando jquery y automáticamente lo empaquetó dentro del archivo app.js final. Importamos las cosas que necesitamos, y Webpack se encarga de... empaquetar todo.

Tip

De hecho, Webpack los separa en multiples archivos por cuestión de eficiencia. En realidad, jQuery vive dentro de un archivo diferente en public/build/ ¡Pero eso no es importante!

Importando el CSS de Bootstrap

Podemos hacer lo mismo para el CSS de Boostrap. En base.html.twig, arriba, elimina la etiqueta que enlaza a Bootstrap.

... line 1
<html>
<head>
... lines 4 - 5
{% block stylesheets %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
... lines 12 - 28
</html>

Nada nuevo, cuando refrescamos, nuestro sitio se ve terrible.

Para arreglarlo, encuentra tu terminal y corre:

yarn add bootstrap --dev

Esto descarga el paquete de bootstrap dentro de node_modules/. Este paquete contiene ambos JavaScript y CSS. Queremos activar el CSS.

Para hacerlo, abre app.css y, en la parte de arriba, utiliza la vieja y confiable sintaxis @import. Dentro de las comillas, escribe ~bootstrap:

129 lines assets/css/app.css
@import "~bootstrap";
... lines 3 - 129

En CSS, la ~ es una forma especial de decir que quieres cargar el CSS del paquete de bootstrap dentro de node_modules/.

Ve al navegador, refresca y... estamos de vuelta! Webpack vio el import, tomó el CSS del paquete de bootstrap, y lo incluyó en el archivo app.css final. ¿Qué tan bueno es eso?

¿Qué Otras Cosas Puede Hacer Encore?

Esto es solo el comienzo de lo que Webpack Encore puede hacer. También puede minificar tus archivos para producción, puede compilar código Sass o LESS, viene con soporte para React y Vue.js, maneja versiones para los archivos y más. Para aprender más, mira nuestro tutorial gratuito sobre Webpack Encore.

Y... ¡Eso es todo para este tutorial! ¡Felicitaciones por llegar al final junto conmigo! Ahora ya entiendes las partes más importantes de Symfony. En el siguiente tutorial, vamos a hacer crecer incluso aún más tu potencial de Symfony al revelar el secreto de los servicios. Serás imparable.

Como siempre, si tienes preguntas, problemas o tienes una historia divertida - especialmente si involucra a tu gato - nos encantaría escuchar sobre ti en los comentarios.

Muy bien amigos - ¡Nos vemos la próxima vez!

Leave a comment!

57
Login or Register to join the conversation

hey there how are things going. it's been a while, happy new year :D

man, i've been trying wp and im getting this controllers.json not found error at every turn.

  btx  main ≢ -2 | +1 ~3    yarn watch
yarn run v1.22.17
$ encore dev --watch
Running webpack ...

ERROR Failed to compile with 1 errors 1:22:00 PM

error in ./node_modules/@symfony/stimulus-bridge/controllers.json 1:22:00 PM

Module build failed (from ./node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js):
Error: Your controllers.json file was not found. Be sure to add a Webpack alias from "@symfony/stimulus-bridge/controllers.json" to *your* controllers.json file.
at createControllersModule (C:\vhosts\btx\node_modules\@symfony\stimulus-bridge\dist\webpack\loader.js:37:15)
at Object.loader (C:\vhosts\btx\node_modules\@symfony\stimulus-bridge\dist\webpack\loader.js:107:43)

Entrypoint app [big] 1.36 MiB = runtime.js 14.5 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-3d222b.css 878 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-3d222b.js 482 KiB app.css 426 bytes app.js 17.9 KiB
webpack compiled with 1 error

1 Reply

ok, I'm just dumb :D

.enableStimulusBridge('./assets/controllers.json');

did the trick :D

1 Reply

Hi Ryan and Victor.
I would like to know if there a way to expose "symfony environment variables" .env, .env.local ...
In symfony/vue webpack encore app.
Thank you

1 Reply

Hi Moulaye!

Excellent question! Yes and no :). Let me explain:

1) Node makes it very easy to read environment variables - it's process.env.foo if you want to read the foo environment variable.

2) The .env files are a standard format. I've never tried it, but you should be able to install this package - https://www.npmjs.com/packa... - and use it to load the .env (and .env.local if you want) files at the top of webpack.config.js. Then, you can access them like I mentioned in (1).

Let me know if that helps!

Cheers!

1 Reply

Thank you alot

I will make I try and let you know.

Good week, cheers!

Reply
Default user avatar
Default user avatar Fernando Gómez Gil | posted hace 2 años

At the moment I deleted the code in the file show.html.twig of the old javascript, doesn't work Voting Up and Down don't work. I don't know how to solve it.
Also, I didn't give to much importance but when in the previous video you did the checking the console was not appearing the text to me.

1 Reply

Hey Fernando,

Sometimes if you make any changes to the JS file but don't see any changes in the browser - it might be browser cache. To exclude it, try to open the same page in Chrome Incognito mode for example. If you still don't see changes - most probably it's the problem in your code - you would need to double check it. First of all, make sure you ran the webpack encore with "--watch" mode, otherwise you would need to re-run encore again to recompile all your assets after any change you made. Also, if you have any errors - Chrome Dev Tools should show it, find "Console" tab there, reload the page and watch for any errors.

Those were a few tips that should help you to find some problems in your project. Usually, it's enough to find some obvious problems you missed. If you still have some problems - you would need to debug your code more carefully to find what exactly is missing.

Cheers!

Reply
Default user avatar
Default user avatar Fernando Gómez Gil | Victor | posted hace 2 años

Found I did a mistake

I copy paste twice
{{ encore_entry_link_tags('app') }}

Instead
{{ encore_entry_script_tags('app') }}
for the script.
Thank you

Reply

Hey Fernando,

Great, I'm glad you found it! It was easy to miss, and the most obvious problems are usually hardest.

Cheers!

Reply
Jimmy Avatar

This course is definetely too fast and has not enough explanations. Just copy and paste and you have to understand immediately. Not for beginners like me. Do this do that. It work's. Not helpful i'm sorry.

Reply

Hey Jimmy!

We're sad to hear this course was too difficult for you! Feel free to ask questions in the comments below the video if you didn't get the topic we're explaining in the video or get suck somewhere following the course - our support will help :)

Also, did you watch this course from the beginning? Or did you watch the videos selectively? In your account I don't even see you either started this course or finished it, did you leave it? We definitely would like to have more feedback about what exactly you didn't understand or where you got stuck.

Cheers!

Reply
Jimmy Avatar
Jimmy Avatar Jimmy | Victor | posted hace 1 mes | edited

Hey Victor,

thanks for your reply. i've started from the very beginning on another account until i got my own one. I think the explanations are a bit too quick. I need to pause too many times. And sometimes a bit less explanation would be better. If not necessary why do i need to know then. I will definitely finish it and hopefully will understand more in the end.

Cheers!

Reply

Hey Jimmy,

Ah, I see now... Yeah, the explanation might be a bit fast for you, especially if you're not a native English speaker... but mostly this should not be a problem because as you said you can pause the video whenever you want as also re-watch the video as many times as you want too. Also, a little known fact, that you can configure the playback speed for the video player, like play the video on 0.75x or 0.5x speed - it might help too. But the reason behind the video is quick is that we don't want to stretch it... our way of recording a bit different than some youtube live streams when you see a lot of pauses and videos for 1 topic might take hours, but still we are trying to make the video understandable for most people. I hope it sounds reasonable to you :)

Yeah, give it another try! The webpack encore tool is awesome, and webpack is really feature-rich - that's why we showed only part of all available features in it, i.e. only those we think are most important and valuable for most users. But webpack abilities are even bigger. Sometimes, to save some time in the tutorial, we just mention that there are other cool features exist but we won't cover them in the current course. And if some users are interested in those features - they will be able to read the docs and know more about it, we want to make them aware of those other feature at least.

And if you get lost of get stuck in the middle of the course - feel free to ask questions in the comments section below the video and we will try to help ;)

Cheers!

Reply

Hey there,

I completed this course, but it still shows as 98% complete. For some reasons it looks like the last challenge won't register. Can you please look into it?

Cheers!

Reply

Hey Julien,

Most probably our system things that you have not finished some chapters. Please, go to the course intro page: https://symfonycasts.com/sc... - and make sure you have "check" icon near every chapter. If any chapter does not have that check icon - please, watch it again till the end. Also, make sure you have all challenges completed and they are green.

If you still have this issue and can't figure out what chapter you missed - write to us via the contact form https://symfonycasts.com/co... and we will help you, we need to know your email address to be able to look at it :)

Cheers!

Reply
Juanma C. Avatar
Juanma C. Avatar Juanma C. | posted hace 11 meses

Hi there!!! I have followed your steps and reached this point, where I install the encore webpack with node and yarm installed. I also downloaded jquery and when I proceed to uncomment the import $ from 'jquery' line in the app.js file, it just doesn't show up and gives me undefined $. Greetings and thank you

Reply
Juanma C. Avatar

I have also added bootstrap and I have put it as you have explained and it does not detect it. It puts bootstrap not found and $ not defined. I don't know what could happen, well I have the latest version of Symfony, that may be the problem. All the best

Reply
Juanma C. Avatar

Hello again!! I already fixed the error. It is that I had misunderstood the concept of the webpack and did not add what is necessary in the css and js files within the assets directory. Another note is that the import $ from jquery line that you uncommented in the video did not come in my file and you have to add it directly. But all fixed. I just need more practice to get the hang of it, because Symfony and all its plugins look easier and more powerful. Thank you very much and congratulations for this very good tutorial, at least for me. All the best

1 Reply

Thanks for your kind words, I'm glad to know you could fix your problem.
Cheers!

Reply
Paskuale Avatar
Paskuale Avatar Paskuale | posted hace 1 año

commented line -> import $ from 'jquery'; missed, it's a version issue ?

Reply

Hey Hey Pasquale,

If you're talking about this code block: https://symfonycasts.com/sc... - it's not an issue, because first of all that jQuery import line is commented out by default from Symfony recipe. And if you will follow this chapter further, we uncomment that line in https://symfonycasts.com/sc... after we installed jQuery as a Yarn dependency in our project.

Cheers!

Reply
Paskuale Avatar
Paskuale Avatar Paskuale | Victor | posted hace 1 año | edited

Hi victor may be the reason that i added jquery without the --dev option ?

Reply

Hey Pasquale,

Wait, do you mean we display incorrect code in our code block or do you have some problems with importing jQuery? I just can't "link" your first comment with this one. Could you explain your problem better?

But answering to your question, it does not matter if you add that --dev option or no when we're talking about Webpack, it will compile the result assets into public/build/ directory. If you have some issues with jQuery import - probably restart your Webpack server and try in Chore Incognito mode just in case of any browser cache.

Cheers!

Reply
Paskuale Avatar

ok, I'll try it, thanks

Reply
Elchanan B. Avatar
Elchanan B. Avatar Elchanan B. | posted hace 1 año

Hello,
Now, at this course's end, can you please suggest ideas for "do it yourself" project to do before continuing to the next course? (or it will be better if I'll wait after the next course? after gaining some more knowledge about symfony?)

Reply

Hey there!

That's a good question. I'd recommend you to watch next our Stimulus tutorial https://symfonycasts.com/sc...
and if you want to reinforce your knowledge, just create a new project and add a few pages to it. It could be a product's gallery site where you can see all the products, select one to see more information, etc.

Cheers!

1 Reply
Elchanan B. Avatar
Elchanan B. Avatar Elchanan B. | posted hace 1 año

Hey,
Why were the jQuery and bootstrap packages installed with --dev? is that because webpack build the prod parts so they aren't really necessary in production? did I get it right 😬?

Reply

Hey there!

Haha, that's a tricky question that we hear often :) But the answer is simple! You literally don't use all those dependencies on production (not only jQuery and bootstrap, but also other deps that you're passing through the Webpack Encore). Why? Because everything you're passing through the Webpack Encore compiles into build/ dir, i.e. as soon as you compiled your assets - you can literally remove the node_modules/ directory and it will still work. In other words, technically, you only need all those deps to generate the compiled version of them. That's why we can consider those deps as dev deps only, we're not using them directly on production, we use their compiled version from builds/.

But, it does not matter too much, you can put it wherever you want in your packages.json file, either in dev or prod section, it will still work :) So, don't think too much on it :)

I hope it's clearer for you now!

Cheers!

1 Reply
Jakub Avatar

After i downloaded jquery and added that line
import $ from 'jquery';
to the app.js it still doesnt work. Console says
Uncaught ReferenceError: $ is not defined
so it looks like that import doesnt work. I checked and there is downloaded jquery module. I tried to check it on incognito page and still same. Any ideas?

Edit. i checked that also bootstrap looks like doesnt work so maybe it may help

Reply

Hey Jakub

Where did you get that error, in a different file than app.js? Remember that the scope of the import variables it's on the file only. What you require on file A.js won't be accesible on file B.js

Cheers!

Reply
Jakub Avatar
Jakub Avatar Jakub | MolloKhan | posted hace 1 año | edited

MolloKhan had same problem like guy below. Everything was fine. Incognito mode didnt work or anything. I just ended for yesterday and started watching new series. Today it works fine. Webs are weird sometimes

Reply

Ha! Yes, indeed. Usually, when I get into a problem like that one I clear the cache and force a full page refresh. Cheers!

Reply
Arthur B. Avatar
Arthur B. Avatar Arthur B. | posted hace 1 año

Hi, I follow the instruction but neither the node_modules or the build folder appear on sublime text but the terminal tell me that they are created.
But only the background change to grey and the console did not put the message, I don't know what to do

Here is my terminal :

➜ cauldron_overflow git:(master) ✗ composer require encore
Using version ^1.11 for symfony/webpack-encore-bundle
./composer.json has been updated
Running composer update symfony/webpack-encore-bundle
Loading composer repositories with package information
Updating dependencies
Nothing to modify in lock file
Installing dependencies from lock file (including require-dev)
Nothing to install, update or remove
Generating optimized autoload files
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

Run composer recipes at any time to see the status of your Symfony recipes.

Executing script cache:clear [OK]
Executing script assets:install public [OK]

Nothing to unpack
➜ cauldron_overflow git:(master) ✗ yarn install
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.34s.
➜ cauldron_overflow git:(master) ✗ yarn watch
yarn run v1.22.10
$ encore dev --watch
Running webpack ...

DONE Compiled successfully in 976ms 6:43:25 PM

5 files written to public/build
Entrypoint app [big] 543 KiB = runtime.js 14.1 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-7db861.js 510 KiB app.css 390 bytes app.js 18.5 KiB
webpack compiled successfully
Reply

Hey Arthur,

Hm, from your output I see that "5 files written to public/build" directory, don't you see them? Could you run "ls -la public/build" in the project root directory? Do you see any output? The same for node_modules/ dir, try to run "ls -la node_modules" in your terminal while you're in project root dir - it should list the folders in your node_modules/ dir. So, as far as you can see them in terminal - great! What about Sublime - I'm not sure, probably try to close the project and open again so it re-index the new files. Or, I'd better recommend you to open the project in PhpStorm that we're using in this course.

Anyway, as far as those files exist - you should be able to run the project successfully. Those files are autogenerated, so you should not care about them too much, i.e. you don't need to view or open them in your editor, they just should exist. Just try to run the project in your browser - if no errors - then perfect, now you can start coding :)

I hope this helps!

Cheers!

Reply
Farshad Avatar

When I run 'yarn watch' it says: error Command "watch" not found.

Reply

Hey Farry,

You're missing this section on your package.json file


// package.json
{
...
"scripts": {
...
"watch": "encore dev --watch"
}
}

Give it a try and let me know if it worked. Cheers!

Reply
Farshad Avatar

Ive added your code. It says install webpack notifier. When I try to instal it, it says package.json: No licence field.

Reply

Hey @Farry7!

That error - "No license field" - should just be a "warning" - it's trying to encourage you to add a license field to your package.json file. But it shouldn't be required - and the webpack notifier library should have installed normally. So, did webpack notifier actually install (and this was just a warning)? Or did it cause an actual error and not install?

EDIT: I realized I was replying to your comments out of order - apologies! I'm happy you got things working!

Cheers!

Reply
Tanguy D. Avatar
Tanguy D. Avatar Tanguy D. | posted hace 2 años

Hey guys, as soon as I try to add images via app.css, i've got this error

ERROR Failed to compile with 1 errors

error in ./assets/css/app.css

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve

Reply

Hey Tanguy D.!

Hmm. So I'm pretty sure I know what this is communicating. When you add a image (e.g. background-image) in app.css, Webpack parses that image path. It actually parses it like a JavaScript import/require internally. I'm telling you that because, if your path to the image isn't *just* right, the error you'll get is this one: "Module not found". The module in this case is actually the image file!

What does your CSS code look like and where is your image relative to your CSS file? Double-check the path. It could be something more subtle or deeper, but the first thing to check is that the path to the image is correct - it should be a relative path from the source CSS file to the source image file (e.g. don't worry about where the image and CSS file will eventually be moved to).

Cheers!

Reply
Peter D. Avatar
Peter D. Avatar Peter D. | posted hace 2 años

I'm trying to use a bootstrap theme in my Symfony project. I have imported the CSS and JS files from the theme but when I run encore I get the following error:

$ yarn run encore dev
yarn run v1.22.4
$ /Users/shaunthornburgh/Development/devfeed/node_modules/.bin/encore dev
Running webpack ...

ERROR Failed to compile with 7 errors 12:04:22

These dependencies were not found:

* core-js/modules/es.array.filter in ./assets/js/theme.min.js
* core-js/modules/es.array.for-each in ./assets/js/dashkit.min.js
* core-js/modules/es.array.map in ./assets/js/theme.min.js
* core-js/modules/es.array.slice in ./assets/js/theme.min.js
* core-js/modules/es.object.assign in ./assets/js/theme.min.js
* core-js/modules/es.parse-int in ./assets/js/theme.min.js
* core-js/modules/web.dom-collections.for-each in ./assets/js/theme.min.js

To install them, you can run: npm install --save core-js/modules/es.array.filter core-js/modules/es.array.for-each core-js/modules/es.array.map core-js/modules/es.array.slice core-js/modules/es.object.assign core-js/modules/es.parse-int core-js/modules/web.dom-collections.for-each
Entrypoint js/app [big] = runtime.js vendors~js/app.js js/app.js
Entrypoint css/app [big] = runtime.js vendors~css/app.css vendors~css/app.js css/app.css
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I am confused as core-js seems to be included in my webpack.config.js file


var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/app', [
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
'./node_modules/holderjs/holder.min.js',
'./assets/js/dashkit.min.js',
'./assets/js/theme.min.js'
])
.addStyleEntry('css/app', [
'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./assets/css/theme.min.css'
])
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
;

module.exports = Encore.getWebpackConfig();
Reply

Hey Peter D. !

Hmm, it could be one simply thing. You *do* have that corejs stuff in webpack.config.js, but you also need to make sure it's installed. Try running: yarn add core-js.

That might be all you need. Let me know :).

Cheers!

Reply
Default user avatar
Default user avatar Jose Camacho | posted hace 2 años

Hey! I followed this course and everything was great until uncomment jQuery import. As soon I did that, a console error was showed up "Uncaught SyntaxError: Cannot use import statement outside a module" any cue?

Reply
Default user avatar

nvm! I was using the built file instead the assets/

Reply

Nice job debugging Jose Camacho!

Reply
Default user avatar

Hi, I followed all the tutorial and it was great. Just a question... When you created the file "question_show.js" and only imported it in "show.html.twig" I assumed it was to reduce space usage or something related to component re-utilization like every framework. But now, that you moved that script to "app.js" file, it will be imported in every file. Is this right?

Reply

Hey Martin!

Really happy you enjoyed the tutorial. And you noticed an excellent thing! Yes, when I originally created question_show.js, the idea was "Hey! This is JavaScript that's only needed on the question show page. So, instead of putting that into a JavaScript file that will be included on every page - and thus making people download that extra code even if they never go to the question show page - let's put it in its own file". So, indeed, the idea is (a) organization but also (b) not making users download JavaScript they won't need. This isn't something you should go crazy trying to optimize, but this is why I did it.

So, when I refactored to Encore, why did I suddenly put it in app.js? Because, you are 100% correct: a user that goes to *any* page will now download this code. The reason was just simplicity :). Encore has a concept of "multiple entries", which allow you to have page-specific code. For example, I would have an "app" entry (we do have this) that includes "global" JavaScript that I want on every page. The app.js file would be included on every page (i.e. in the layout). Then I would create a "question_show" entry, put the question show JavaScript there, and only include the question_show.js script tag on that ONE PAGE. That would be a more optimal solution - I just skipped it here because i didn't want to get too deep into Encore.

Cheers!

1 Reply

Hi, the moment I put my js in the assets/js directory my css doesn't get loaded anymore

IIRC this has something to do with the trans piling of webpack. So you have to link your css in your js file

Reply

Hey juantreses

You can require CSS files in your JS scripts and let Webpack handle it. Webpack will build a CSS and a JS file, you need to include both in your HTML template so everything works as expected.

Cheers!

Reply
Mickaël M. Avatar
Mickaël M. Avatar Mickaël M. | posted hace 2 años

I followed all the tutorial but when I do yarn run dev, only my CSS is load. My jquery isn't load and I have still the console.log despite I delete it. I don't know what happened

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.3.0 || ^8.0.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.9
        "sensio/framework-extra-bundle": "^6.0", // v6.2.1
        "symfony/asset": "5.0.*", // v5.0.11
        "symfony/console": "5.0.*", // v5.0.11
        "symfony/debug-bundle": "5.0.*", // v5.0.11
        "symfony/dotenv": "5.0.*", // v5.0.11
        "symfony/flex": "^1.3.1", // v1.17.5
        "symfony/framework-bundle": "5.0.*", // v5.0.11
        "symfony/monolog-bundle": "^3.0", // v3.5.0
        "symfony/profiler-pack": "*", // v1.0.5
        "symfony/routing": "5.1.*", // v5.1.11
        "symfony/twig-pack": "^1.0", // v1.0.1
        "symfony/var-dumper": "5.0.*", // v5.0.11
        "symfony/webpack-encore-bundle": "^1.7", // v1.8.0
        "symfony/yaml": "5.0.*" // v5.0.11
    },
    "require-dev": {
        "symfony/profiler-pack": "^1.0" // v1.0.5
    }
}