How To Compile Laravel Css And Js Files - FreeCodeBlog

Last updated: Nov 13, 2021

After installed node js packages in laravel we should compile css and js files. Today I will explain you how we can compile laravel css and js files for local server and production server.

 

How To Compile Laravel Css And Js Files
How To Compile Laravel Css And Js Files

 

Laravel To compile CSS & Js Files.

Well, install any version of laravel to practice how CSS and js files works or compile in laravel. For this tutorial I already install laravel 8 version. If you don't know how to install laravel then read how to install any kind of laravel version tutorial.

 

Laravel CSS & Js Path.

Once new laravel have been installed, you can see 2 css & Js folder in once public another resources folder. Follow next steps to understand public & resources css & js files.

 

Laravel Public CSS & Js Files.

In CSS & Js folder you will see app.css & app.js file. this app.css & app.js file work when your project pages rendering. you can see app.css & app.js file path in app.blade.php file. Don't change this files to change your project design or development. Just change resources css and js files. public files automatically will change after changed resources files. for more information read install custom design files on laravel tutorial.

 

Laravel Resources CSS & Js Files.

In js & CSS folder you will see app.js & app.css file. this app.js & app.css file works when you use laravel mix to compile.

app.css: You may see bootstrap, google fonts, tailwindcss file into app.css file. you can change app.css files according to your project requirement.

app.js: You may see vue or react or bootstrap included file into app.js files. you can also change included files from js files.

 

Laravel Mix CSS & Js Files.

You will see resources and public css & js files into laravel mix files. You can change included files from mix file. for more information read laravel mix complete tutorial.

 

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

 

npm run dev: don't forget to run npm run dev command to compile your laravel project css and js files.

 

npm run watch: if you want to compile css & js files while working on your laravel project and don't want to run npm run dev command again and again then run npm run watch command.

 

npm run prod: run npm run prod command after deploy your laravel project on production.

 

You will see all npm command information on laravel package.json file.

 

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

 

Thanks.

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
How To Configure Laravel Project For Production

Want to deploy laravel project on live server, shared hosting, vps server, production? Wait a minute, have you configured the Laravel project for p... Read More

How To Slove Low Value Content Error In Google Adsense For Your Website

Have you applied your website to Google AdSense to monetize your website and received low value content errors? Actually you need to fix some thing... Read More

Fix Laravel Failed To Authenticate On Smtp Server With Username Mail Error On Cpanel

Still using laravel on cpanel with mail connection? Yes. Did you get it error message like failed to authenticate on smtp server with username on c... Read More

Make One To One Chat Application In Laravel With Vue Js

Today I will make a one to one chat application in laravel with vue js. To making one to one chat application use can easily use jetream user authe... Read More

Deploy Laravel Via Ftp On Shared Hosting Cpanel

Deploy laravel via ftp on cpanel! Want to deploy laravel on shared hosting cpanel via ftp? Yes. But why? Because I can't access cpanel public_HTML... Read More