How to Implement CSS and JS in new Package in Bagisto

Abhishek Kathuria

19 May 2023

Today we are going to learn “How to Implement CSS and JS in a new Package in Bagisto”, Here are some steps to follow :-

Step 1

Firstly create a package.json file in the root directory of the Custom Package with some dependencies with the latest version as stated below code

{
  "private": true,
  "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"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.49",
    "laravel-mix-merge-manifest": "^2.1.0",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "vue": "^3.2.47",
    "vue-template-compiler": "^2.7.14"
  }
}

{

"private": true,

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

"devDependencies": {

"cross-env": "^7.0.3",

"laravel-mix": "^6.0.49",

"laravel-mix-merge-manifest": "^2.1.0",

"sass": "^1.62.1",

"sass-loader": "^13.2.2",

"vue": "^3.2.47",

"vue-template-compiler": "^2.7.14"

}

Step 2

Now create a file called webpack.mix.js in the root directory of the package as stated below

const mix = require("laravel-mix");

if (mix == 'undefined') {
    const { mix } = require("laravel-mix");
}

require("laravel-mix-merge-manifest");

if (mix.inProduction()) {
    var publicPath = 'publishable/assets';
} else {
    var publicPath = '../../../public/themes/default/assets';
}

mix.setPublicPath(publicPath).mergeManifest();
mix.disableNotifications();

mix.js([__dirname + '/src/Resources/assets/js/app.js'], 'js/app.js')
    .copyDirectory(__dirname + '/src/Resources/assets/images', publicPath + "/images")
    .sass(__dirname + '/src/Resources/assets/sass/admin.scss', 'css/admin.css')
    .sass(__dirname + '/src/Resources/assets/sass/default.scss', 'css/default.css')
    .sass(__dirname + '/src/Resources/assets/sass/velocity.scss', 'css/velocity.css')
    .options({
        processCssUrls: false
    });


if (! mix.inProduction()) {
    mix.sourceMaps();
}

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

const mix = require("laravel-mix");

if (mix == 'undefined') {

const { mix } = require("laravel-mix");

}

require("laravel-mix-merge-manifest");

if (mix.inProduction()) {

var publicPath = 'publishable/assets';

} else {

var publicPath = '../../../public/themes/default/assets';

}

mix.setPublicPath(publicPath).mergeManifest();

mix.disableNotifications();

mix.js([__dirname + '/src/Resources/assets/js/app.js'], 'js/app.js')

.copyDirectory(__dirname + '/src/Resources/assets/images', publicPath + "/images")

.sass(__dirname + '/src/Resources/assets/sass/admin.scss', 'css/admin.css')

.sass(__dirname + '/src/Resources/assets/sass/default.scss', 'css/default.css')

.sass(__dirname + '/src/Resources/assets/sass/velocity.scss', 'css/velocity.css')

.options({

processCssUrls: false

});

if (! mix.inProduction()) {

mix.sourceMaps();

}

if (mix.inProduction()) {

mix.version();

}

The above file uses laravel-mix dependency for compiling modern JavaScript and triggering a CSS preprocessor and also using laravel-mix-merge-manifest which merges new manifests into the existing ones and there are some functions that are js(), css() first parameter – path of the module scss and js and second paramter – public path of css and js this is used for compiling the respective files

Step 3

Go to the module path that is package/Webkul/<packagename> on the terminal and run a command – npm install you will get a folder called node_modules

Now we have Two commands:-

npm run prod – This command is used in the production mode and by this command firstly files go to the publishable folder and after running php artisan vendor:publish –force :- press the module no. and enter files go to the public folder from where it will be access

npm run watch – This command is used in the Development mode and after running this command files directly go to the public folder from where it will access

Step 4

First, run the above command at the package path and then add your changes in the scss and js files and then check on the instance

That`s all for implementing “CSS and JS in the new Package in Bagisto “.

You can also hire laravel developer for custom service and for extension, you can explore our Extensions