SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Tip
Ahora la receta agrega estos dos archivos en un lugar ligeramente diferente:
assets/app.jsassets/styles/app.cssPero 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:
| /* | |
| * 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.
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.
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.
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.
| 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.
| ... 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.
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'.
| ... 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!
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:
| @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?
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!
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
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/package/dotenv - 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!
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.
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!
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
Hey Fernando,
Great, I'm glad you found it! It was easy to miss, and the most obvious problems are usually hardest.
Cheers!
Szymon
| posted hace 6 meses
Hello, I totally lost styles and bootstrap on the page.
I did all the steps according to the tutorial.
How to fix it?
Hey Szymon,
Well, that's unexpected. Can you double-check that your Encore build was successful? Also, check the web debug console, you may have got an error.
Oh, and sometimes it's recommended to do a hard-refresh in your Browser just to be 100% sure that it's loading the new assets
Cheers!
Hello again,
Probably I found solution.
Yarn created folder assets with app.js, bootstrap.js files, and additional directories: styles>app.css and controllers>hello_controller.js
In asset>app.js bootstrap is imported separetly
// start the Stimulus application
import './bootstrap';
same as styles
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
I deleted lines above (I was suggesting that I have something different than in the tutorial - probably I have newer version of Yarn) and also created folders same like in video (separated js folder and css) so that caused problems.
I used "git stash" and revert changes, make all chapter 17 i 18 from beginning and now all working properly :)
Hey Szymon,
I'm glad to know that you could fix your problem. You're almost right, you got a newer version of a library, but it was not Yarn, it was Webpack Encore, the new recipe version adds those two files.
Oh, by the way, we have a note add the top of the script mentioning it :)
Cheers!
Hello MolloKhan,
Yes Encore was build successful. I tried on different browser and problem is the same. I see in page source that css is not loaded. I don't know why. Have you some ideas?
Jimmy
| posted hace 8 meses
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.
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!
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!
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!
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!
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!
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
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
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
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!
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!
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?)
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!
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 😬?
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!
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
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!
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
Ha! Yes, indeed. Usually, when I get into a problem like that one I clear the cache and force a full page refresh. Cheers!
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
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!
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!
Ive added your code. It says install webpack notifier. When I try to instal it, it says package.json: No licence field.
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!
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
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!
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:
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();
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!
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?
// 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
}
}
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.
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
`