Webpack Encore: JavaScript Greatness

Tip

The recipe now adds these 2 files in a slightly different location:

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

But the purpose of each file is exactly the same.

Okay: here's how this whole thing works. The recipe added a new assets/ directory with a couple of example CSS and JS files. The app.js file basically just console.log()'s something:

            
            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');

The app.css changes the background color to light gray:

            
            4 lines
            
            assets/css/app.css
        
            body {
        
                background-color: lightgray;
        
            }

Webpack Encore is entirely configured by one file: webpack.config.js:

            
            75 lines
            
            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();

We won't talk much about this file - we'll save that for the Encore tutorial - but it's already configured to point at the app.js and app.css files: it knows that it needs to process them.

Running Encore

To execute Encore, find your terminal and run:

yarn watch

This is a shortcut for running yarn run encore dev --watch. What does this do? It reads those 2 files in assets/, does some processing on them, and outputs a built version of each inside a new public/build/ directory. Here is the "built" app.css file... and the built app.js file. If we ran Encore in production mode - which is just a different command - it would minimize the contents of each file.

Including the Built CSS and JS Files

There's a lot more cool stuff going on, but this is the basic idea: we code in the assets/ directory, but point to the built files in our templates.

For example, in base.html.twig, instead of pointing at the old app.css file, we want to point at the one in the build/ directory. That's simple enough, but the WebpackEncoreBundle has a shortcut to make it even easier: {{ encore_entry_link_tags() }} and pass this app, because that's the name of the source files - called an "entry" in Webpack land.

            
            35 lines
            
            templates/base.html.twig
        
                                                    ... 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>

At the bottom, render the script tag with {{ encore_entry_script_tags('app') }}.

            
            35 lines
            
            templates/base.html.twig
        
                                                    ... 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>

Let's try it! Move over and refresh. Did it work? It did! The background color is gray... and if I bring up the console, there's the log:

Hello Webpack Encore!

If you look at the HTML source, there's nothing special going on: we have a normal link tag pointing to /build/app.css.

Moving our Code into Encore

Now that this is working, let's move our CSS into the new system. Open public/css/app.css, copy all of this, then right click and delete the file. Now open the new app.css inside assets/ and paste.

            
            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;
        
            }

As soon as I do that, when I refresh... it works! Our CSS is back! The reason is that - if you check your terminal - yarn watch is watching our files for changes. As soon as we modified the app.css file, it re-read that file and dumped a new version into the public/build directory. That's why we keep this running in the background.

Let's do the same thing for our custom JavaScript. Open question_show.js and, instead of having a page-specific JavaScript file - where we only include this on our "show" page - to keep things simple, I'm going to put this into the new app.js, which is loaded on every page.

            
            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);
        
                });
        
            });

Then go delete the public/js/ directory entirely... and public/css/. Also open up templates/question/show.html.twig and, at the bottom, remove the old script tag.

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

With any luck, Encore already rebuilt my app.js. So if we click to view a question - I'll refresh just to be safe - and... click the vote icons. Yes! This still works.

Installing & Importing Outside Libraries (jQuery)

Now that we're using Encore, there are some really cool things we can do. Here's one: instead of linking to a CDN or downloading jQuery directly into our project and committing it, we can require jQuery and install it into our node_modules/ directory... which is exactly how we're used to doing things in PHP: we install third-party libraries into vendor/ instead of downloading them manually.

To do that, open a new terminal tab and run:

yarn add jquery --dev

This is equivalent to the composer require command: it adds jquery to the package.json file and downloads it into node_modules/. The --dev part is not important.

Next, inside base.html.twig, remove jQuery entirely from the layout.

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

If you go back to your browser and refresh the page now... it's totally broken:

$ is not defined

...coming from app.js. That makes sense: we did just download jQuery into our node_modules/ directory - you can find a directory here called jquery - but we're not using it yet.

How do we use it? Inside app.js, uncomment this import line: 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

This "loads" the jquery package we installed and assigns it to a $ variable. All these $ variables below are referencing the value we imported.

Here's the really cool part: without making any other changes, when we refresh, it works! Webpack noticed that we're importing jquery and automatically packaged it inside of the built app.js file. We import the stuff we need, and Webpack takes care of... packaging it all together.

Tip

Actually, Webpack splits the final files into multiple for efficiency. jQuery actually lives inside a different file in public/build/, though that doesn't matter!

Importing the Bootstrap CSS

We can do the same thing for the Bootstrap CSS. On the top of base.html.twig, delete the link tag for Bootstrap:

            
            30 lines
            
            templates/base.html.twig
        
                                                    ... 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>

No surprise, when we refresh, our site looks terrible.

To fix it, find your terminal and run:

yarn add bootstrap --dev

This downloads the bootstrap package into node_modules/. This package contains both JavaScript and CSS. We want to bring in the CSS.

To do that, open app.css and, at the top, use the good-old-fashioned @import syntax. Inside double quotes, say ~bootstrap:

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

In CSS, this ~ is a special way to say that you want to load the CSS from a bootstrap package inside node_modules/.

Move over, refresh and... we are back! Webpack saw this import, grabbed the CSS from the bootstrap package, and included it in the final app.css file. How cool is that?

What Else can Encore Do?

This is just the start of what Webpack Encore can do. It can also minimize your files for production, supports Sass or LESS compiling, comes with React and Vue.js support, has automatic filename versioning and more. To go further, check out our free Webpack Encore tutorial.

And... that's it for this tutorial! Congratulations for sticking with me to the end! You already understand the most important parts of Symfony. In the next tutorial, we're going to unlock even more of your Symfony potential by uncovering the secrets of services. You'll be unstoppable.

As always, if you have questions, problems or have a really funny story - especially if it involves your cat - we would love to hear from you in the comments.

Alright friends - seeya next time!

Leave a comment!

jlchafardet | posted 1 year ago | edited

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

jlchafardet | jlchafardet | posted 1 year ago

ok, I'm just dumb :D

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

did the trick :D

1 Reply

Moulaye | posted 2 years ago

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

weaverryan | SFCASTS | Moulaye | posted 2 years ago | edited

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!

1 Reply

Moulaye | weaverryan | posted 2 years ago

Thank you alot

I will make I try and let you know.

Good week, cheers!

Fernando Gómez Gil | posted 3 years ago

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

Victor | SFCASTS | Fernando Gómez Gil | posted 3 years ago

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!

Fernando Gómez Gil | Victor | posted 3 years ago

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

1 Reply

Victor | SFCASTS | Fernando Gómez Gil | posted 3 years ago

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 6 months ago

Hello, I totally lost styles and bootstrap on the page.
I did all the steps according to the tutorial.
How to fix it?

MolloKhan | SFCASTS | Szymon | posted 6 months ago

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!

Szymon | MolloKhan | posted 6 months ago

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 :)

MolloKhan | SFCASTS | Szymon | posted 6 months ago

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!

1 Reply

Szymon | MolloKhan | posted 6 months ago

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 8 months ago

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.

Victor | SFCASTS | Jimmy | posted 8 months ago

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!

Jimmy | Victor | posted 8 months ago | 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!

Victor | SFCASTS | Jimmy | posted 8 months ago

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!

julien_bonnier | posted 1 year ago

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!

Victor | SFCASTS | julien_bonnier | posted 1 year ago

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!

Juanma C. | posted 1 year ago

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

Juanma C. | Juanma C. | posted 1 year ago

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

Juanma C. | Juanma C. | posted 1 year ago

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

MolloKhan | SFCASTS | Juanma C. | posted 1 year ago

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

pasquale_pellicani | posted 1 year ago

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

Victor | SFCASTS | pasquale_pellicani | posted 1 year ago

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!

pasquale_pellicani | Victor | posted 1 year ago | edited

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

Victor | SFCASTS | pasquale_pellicani | posted 1 year ago

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!

pasquale_pellicani | Victor | posted 1 year ago

ok, I'll try it, thanks

Elchanan B. | posted 2 years ago

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?)

MolloKhan | SFCASTS | Elchanan B. | posted 2 years ago

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. | posted 2 years ago | edited

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 😬?

Victor | SFCASTS | Elchanan B. | posted 2 years ago

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 | posted 2 years ago | edited

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

MolloKhan | SFCASTS | Jakub | posted 2 years ago | edited

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!

Jakub | MolloKhan | posted 2 years ago | 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

MolloKhan | SFCASTS | Jakub | posted 2 years ago

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

Arthur B. | posted 2 years ago

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

Victor | SFCASTS | Arthur B. | posted 2 years ago

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!

Farshad | posted 2 years ago

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

MolloKhan | SFCASTS | Farshad | posted 2 years ago | edited

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!

Farshad | MolloKhan | posted 2 years ago

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

weaverryan | SFCASTS | Farshad | posted 2 years ago

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!

Tanguy D. | posted 2 years ago

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

weaverryan | SFCASTS | Tanguy D. | posted 2 years ago | edited

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!

Peter D. | posted 3 years ago | edited

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();

weaverryan | SFCASTS | Peter D. | posted 3 years ago | edited

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!

Jose Camacho | posted 3 years ago

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?

Jose Camacho | Jose Camacho | posted 3 years ago

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

weaverryan | SFCASTS | Jose Camacho | posted 3 years ago | edited

Nice job debugging Jose Camacho!

Load more comments

This tutorial also works great for Symfony 6!

Symfony 5.0

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
    }
}

Edit on GitHub

TRACK

Symfony 5 >

COURSE

Charming Development in Symfony 5

Webpack Encore: JavaScript Greatness

Video not working?

Running Encore

Including the Built CSS and JS Files

Moving our Code into Encore

Installing & Importing Outside Libraries (jQuery)

Importing the Bootstrap CSS

What Else can Encore Do?

Leave a comment!

What PHP libraries does this tutorial use?

	/*
	* 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');

	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();

	... 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>

	... 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>

	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;
	}

	... 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);
	});
	});

	{% extends 'base.html.twig' %}

	{% block title %}Question: {{ question }}{% endblock %}

	{% block body %}
	... lines 6 - 57
	{% endblock %}

	... lines 1 - 9

	// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
	import $ from 'jquery';

	... lines 14 - 29