Frontend Build¶

Templates frontend assets building Methods¶

We have configured the frontend building structure in 2 different ways for individual templates.

In most of the templates we have to implement this building process and it’s a new standard process.
Overall building structure is based on Node and YARN.
So, First Install the compatible Node Versions(14.19.0 and above) (https://nodejs.org/en/download)
Then after installing the YARN - Building Package Manager (https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable).

You can detect this method if this file exists `yarn.lock` to the following path:

ns_theme_TEMPLATE-KEY/Resources/Public/Build/yarn.lock

From now you need to fire the following commands:

Just for your information command should be fire on this path:

ns_theme_TEMPLATE-KEY/Resources/Public/Build

Getting Started:

yarn install

Add Any packages(plugins):

yarn add PACKAGE_NAME

To Test Stylesheets:

yarn lint:stylesheets

To Test Javascript:

yarn lint:javascript

To Build Project:

yarn build

After the yarn build command, Your Building process started. Just change your SCSS/JS files and your changes should reflect at the front end.

We have used this method rarely in templates.
After doing changes on any SCSS files, you must clear the backend cache.
After clearing the cache just reloads your frontend page, Your changes will be reflected on it.

Backend Cache Clear Screenshot:

You can detect this method if this file exists `gulpfile.js` to the following path:

ns_theme_TEMPLATE-KEY/Resources/Public/Build/gulpfile.js

If you don’t want to compile and build CSS using our mentioned in frameworks, then you can easy-go with custom CSS applied.

Just add your custom style on custom.css from the following path

ns_theme_TEMPLATE-KEY/Resources/Public/css/custom.css

Thats It!..:)