Add JS File in Magento 2 Module: How to Add Java Script

When we create a magneto model or extension then at that time we also need to use javascript and style sheet file etc.
Let us know how we add js file in Magento 2 or style sheet in  Magento 2 module or extension.

Add JS file in Magento 2

Magento 2 has its own structure to define the javascript and CSS file. So we will follow the same path in order to add the js file to execute JavaScript code.

Here, I am going to explain with an example so I will create a Magento 2 module to add a JS file to execute the code and pass the parameters inside a script.


Steps to Add JS File in Magento 2 Module

There are five steps to add the js and CSS file in Magento 2 module.

  • Create or add in the existing module.
  • Create a requirejs-config.js and a JavaScript module file.
  • Create a layout update to add a template that will enable the JavaScript module.
  • Create a template file.


Step 1: Create a New Module

* Developer: Hemant Singh Magento 2x Developer
* Website:

use Magento\Framework\Component\ComponentRegistrar;



Step 2: Create a Module XML file

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_AddJsfile" setup_version="0.0.1">


Step 3: Create requirejs-config.js and a JavaScript

Add the file

var config = {
map: {
'*': {
hello: 'Wishusucess_AddJsfile/js/hello',


Step 4: Add JS File in Magento 2 Extension

In this step, we will add the javascript file in Magento 2 extension or module.

And finally, add the file

], function($){
"use strict";
return function(config, element) {


Step 5: Add XML File

Now we have to create a layout file in order to add a template file so that will enable the JavaScript in that file of the module.

And then add the file catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" template="Wishusucess_AddJsfile::hello.phtml" />

Step 6: Create a Template File

So, this template is a frontend view so we can choose any template in order to show the js functionality.

Now, suppose we have a template file hello.phtml and we want to add the javascript in that file so we will add in the file like below.

<div data-mage-init='{"hello": {"message": "Hello Wishusucess Magento Team!"}}'>


Step 6: Run Below Magento 2 Command

Now we have to run the below upgrade and cache command in Magento 2 root directory.

bin/magento setup:upgrade

bin/magento cache:clean


Read more: System XML File: How to Create Admin Configuration in Magento 2


Add CSS File in Magento 2 Module

In this step, we will learn how we can add the style sheet in Magento 2 extension or Module.

In order to add the CSS file in the Module. first, we will create a CSS file.



Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2