Page-Specific JS: Multiple Entries

Hi Marouane,

I'm not sure what framework are you using for animations (if I'm correct to assume that you want some animations automatically applied to certain elements in your DOM), but for this, I recommend you use ReacJS animation features specifically. While we don't have a tutorial that targets these features specifically, you can check our ReactJS tutorial at https://symfonycasts.com/screencast/reactjs, or refer to ReactJS documentation on how to apply this! https://reactjs.org/docs/animation.html.

Alternatively, though much harder to achieve without bugs, you can listen for changes in the DOM within your code and fire animations on specific events: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver. Hope this helps!

Thank you for your quick response.
I'm not using a framework, its a static template called fuse with a js file triggering ripple effect animation through css classes and using jquery.
I've imported that file in my app.js and i want to re-load it after rendering a react js component. Is that possible ?

Hmm, I suppose you could instead of loading the script on the template, load it once your react components have finished mounting. Using the proper hook, you could do something like this:

script = document.createElement('script');
script.src ='your script url here';
script.type = 'text/javascript';
script.async = true;


target = document.getElementsByTagName('script')[0];

target.parentNode.insertBefore(script, target);

Then you can manage exactly when your script is loaded and executed.

It worked thank you so much !

Hey Virgile,

Did you finish this course? You need to understand how Webpack Encore works. app.js is a special file that contains scripts that should be included on *every* page. But entries are specific, they contain JS code only for specific pages. Well, probably including 1 file instead of 2 is better, but I don't think it's a big difference on practice between 1 and 2 included files, another thing when we're talking about including 10 files :) And even with 1 or 2 files it still depends. A lot of people are working on optimizing Webpack work, and on practice including one gigantic unique file not always better than 2 but smaller. Anyway, Webpack is optimized by many people every day, and you get that optimization for free when using it.

Cheers!

Hey Victor
Thanks you for your explanation. You made this more clear for me :)

Hey Virgile,

Glad to hear it's clearer to you now! :)

Cheers!

Hey Julien,

I just double-checked the course for you and it works well, I don't have any missed migrations. Here's the way I tested it:
1. Download and extract the course code
2. Go to start/ directory
3. Install Composer deps with: "composer install"
4. Make sure I don't have the DB: "bin/console doctrine:database:drop --force"
5. Create the DB: "bin/console doctrine:database:create"
6. Run migrations: "bin/console doctrine:migration:migrate"
7. Check that schema is valid: "bin/console doctrine:schema:validate"

Actually, the same for finish/ directory. Please, make sure you execute these steps and if you still have invalid DB schema - you can run "bin/console doctrine:schema:update --dump-sql" to see what's exactly wrong, probably you just have a different MySQL version and it requires some specific queries to be executed, so you can just execute them with "bin/console doctrine:schema:update --force" and that's it.

I hope this helps!

Cheers!

Hey Kaizoku

And the answer is YES! You just need to set them global inside your encore endpoint. You can find more information about it in this chapter https://symfonycasts.com/sc... or search official encore documentation.

Cheers!

Awesome ! Thank you, I'll check this out.