How To Compile Assets In Laravel | Laravel For Beginners | Learn Laravel

This video will show the how to compile your JavaScript and CSS in Laravel - Learn one of the most popular PHP frameworks for its advanced features, templating engine, fast commands and security.
📚 New Udemy Course
If you're looking to level up your Laravel skills, my new course "Udemy Migirations, Seeders, Factories, Query Builder, Eloquent & Relationships" is the perfect opportunity. Learn the essential tools and techniques for building robust and scalable web applications with Laravel: www.udemy.com/...
📲 Let’s plan a meeting
Plan a (paid) 1-hour meeting on Calendly to do portfolio reviews, code reviews resume reviews or a coaching session for Laravel. Please read the description before booking: calendly.com/c...
💌 Newsletter
Sign up for my free weekly email newsletter: www.newsletter...
🔥 Resources
- PHP Hosting (10% DISCOUNT): www.hostinger....
- TikTok: / codewithdary
- Instagram: / codewithdary
- Twitter: / codewithdary
- Blog: blog.codewithd...
- Newsletter: newsletter.cod...
- Patreon: www.patreon.co...
- GitHub: github.com/cod...
Want to learn more?
- Courses: / @codewithdary
#laravel #laravel8 #php #assets #javascript #css

[@codewithdary]

I want to start using my socials a bit more, if you’re interested, give me a follow op Instagram!  instagram.com/darynazar/

[@ProgrammingNusantara]

Thank u sir, u save my work!

[@codewithdary]

Happy to help man :)

[@Alireza-bj6dv]

Perfect

[@codewithdary]

Thank you :)

[@eloquent2200]

Thank you!

[@codewithdary]

You're welcome!

[@tallitvak5325]

the best of the best!

[@codewithdary]

I have the best viewers :D

[@hasnainabidkhanzada3754]

Why use mix? What if i create the css and js files in public directory instead of compiling them?

[@mibrahim4245]

Thank you Dary 🌹 .. So what was the original need for mix and vite and webpack in general? Is it only to compile the files like scss to css, to make codes compatible with all browsers, and to minify them? Is that all?

[@codewithdary]

Pretty much yes. Most people forget that its just to compile frontend assets, nothing more than that...

[@mibrahim4245]

@@codewithdary 🌹🙏

[@walebee4668]

hi, do i need to run laravel mix when i making a changes to my js files on the Cpanel server ?

[@codewithdary]

Yes it does needs to be recompiled :)

[@rajabhishek2936]

Amezing.....

[@technoking536]

This is good stuff👍

[@codewithdary]

Thank you!

[@muniraakter2103]

Thanks a lot, sir, Just awesome as well.

[@codewithdary]

Most welcome Munira! :)

[@paulbrugger9610]

on the final npm run dev (after the tailwindcss stuff) I get: 'mix' is not recognized as an internal or external command, operable program or batch file. and the css is not working (formerly was) any ideas?

[@fabzster187]

The assets are compiled allm in the js directory. I have /public/js/app.js and /public/js/app.css, it does not create the app/css directory. cant understand why

[@codewithdary]

Can you show me your webpack file?

[@fabzster187]

@@codewithdary many thanks for the reply, const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); what is quite weird is, if I try to compile the sass alone mix.sass('resources/sass/app.scss', 'public/css'); it compiles mix.css . The files compile, but just the css is in the js folder

[@visualdad9453]

thank you dary :]

[@codewithdary]

Thank you for watching :)

[@terryrocker8681]

When you install tailwind after installing sass, sass doesn't work. any thoughts Dary?

[@codewithdary]

Aren't you compiling the files with the same name? Then it will overwrite :)

[@asharmuhammad8686]

because you are overwriting the app.css, change the scss filename...

[@mouctechy]

Thanks bro

[@codewithdary]

Any time!

[@djamilsellam931]

run watch and poll-watch are not working for me !

[@codewithdary]

Sharing the error message allows others to help you.

[@adriantolero6687]

Hello sir Dary, I have an error after entering this line command "npm install && npm run dev" which causes this error "'mix' is not recognized as an internal or external command, operable program or batch file."

[@codewithdary]

Likely you need to install the latest version of Laravel Mix. npm install laravel-mix@latest --save-dev

[@teragigamega5183]

composer require laravel-frontend-presets/tailwindcss --dev ✔ npm instal tailwindcss ✔ npm install and npm run dev ✖ 'mix' is not recognized as an internal or external command, operable program or batch file. Why is this happening? Thank you for your response. node v15.5.0 npm 7.3.0 Laravel Framework 8.22.1 Windows10 64bit

[@teragigamega5183]

I think I solved the problem. Thanks anyway

[@temdenis4109]

Good evening sir, please how did you solve this problem? Am facing the same problem. Please help me out sir.

[@teragigamega5183]

@@temdenis4109 Apologize, I m seeing your message now. Give me some time to get home and remind myself, hope I will help you soon.

[@temdenis4109]

@@teragigamega5183 thank you very much sir , am waiting to hearing from you, please my friend is also trying to install tailwind CSS but it's not installing, do you have any idea?

[@Kejnjrbdbfhhrbb]

JUST RUN THIS npm install laravel-mix@latest --save-dev

[@PunLlarena]

Installing tailwind using composer doesn't work on Laravel 9. And this topic isn't covered in the Laravel 9 Course yet. Your requirements could not be resolved to an installable set of packages. Problem 1 - laravel-frontend-presets/tailwindcss[4.3.0, ..., 4.3.1] require laravel/framework ^8.0 -> found laravel/framework[v8.0.0, ..., 8.x-dev] but it conflicts with your root composer.json require (^9.2). - Root composer.json requires laravel-frontend-presets/tailwindcss ^4.3 -> satisfiable by laravel-frontend-presets/tailwindcss[4.3.0, 4.3.1]. Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions. You can also try re-running composer require with an explicit version constraint, e.g. "composer require laravel-frontend-presets/tailwindcss:*" to figure out if any version is installable, or "composer require laravel-frontend-presets/tailwindcss:^2.1" if you know which you need. Installation failed, reverting ./composer.json and ./composer.lock to their original content.

[@codewithdary]

Tailwind has its own documentation on how you should add TailwindCSS into an Laravel project: tailwindcss.com/docs/guides/laravel

[@PunLlarena]

Yep, I checked on their documentation and had it working. Thanks for checking on my comment.

[@santhoshkumar4783]

Where is the link that u mentioned in the video to download node js?

[@codewithdary]

Your so right! My bad, the link is here: nodejs.org/en/download/

[@shye351]

background url doesnt work, image wont show

[@codewithdary]

You might need to clear your cache

[@Konstantinosiakovou]

I can not understand why it does not work for me. I follow your steps.

[@codewithdary]

What's going wrong? :)

[@Konstantinosiakovou]

@@codewithdary thank you for answer me. The background color does not change.

[@codewithdary]

Has the app.css file even been compiled?

[@Konstantinosiakovou]

@@codewithdary run successfully.