Name: Building a SmartEdit Extension Using Grunt in SAP Commerce Cloud
Uploaded: 2024-6-3
Duration: 304 s

Share feedback

<p>We are aware of intermittent issues in accessing the learning content</p>

We are aware of intermittent issues in accessing the learning content

Personalize your learning.

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

Please try again later

Sorry, we encountered an error

Try again or reset results to continue browsing

We didn’t find what you’re looking for

To continue, please log in

Your session has timed out

Validate your skills and learning by completing the certification exam and gain a highly recognised accreditation.

Book your certification exam

Complete the assessment to validate your SAP PartnerEdge competency qualifications.

Ready to take your assessment?

Learn about the key features and essentials in the latest release to help you prepare for the Stay Certified assessment.

Prepare for assessment

Learn new skills you need at your own pace with our bite-sized lessons.

Prepare for certification

In your My Learning account you can view your certification and learn how to take your Stay Certified assessment.

Ready to take your Stay Certified assessment?

Explore {title} at SAP Learning. Find out more!

Assessment

Course Completion

Knowledge Badge

Certification Exam

Theoretical Exam

Schedule

External Course

Practical Exercise

Practical Test

External Hands-On

External Resource

Learning Journey

Learning Journey Assessment

Lesson

Live Session

Practice System

Quiz

Scenario Based Assessment

Course Assessment

Course

Stay Certified

Subscription

System Based Assessment

Test Out

Unit

Video

Video Playlist

Week

<div><div><div><div><div><div>This video shows you how to create a SmartEdit extension for SAP Commerce Cloud and how to build the extension using Grunt. <br><br>These are the environment variables you need to follow along:<br><ul><li>NPM_ANCILLARY=$HYBRIS_BIN_DIR/modules/npm-ancillary/npmancillary</li><li>NODE_HOME=$NPM_ANCILLARY/resources/npm/node/node-v10.7.0-darwin-x64</li><li>GRUNT_HOME=$NPM_ANCILLARY/resources/npm/node_modules</li><li>export PATH=$NODE_HOME/bin:$GRUNT_HOME/.bin:$PATH</li></ul></div></div></div></div></div></div>

Building a SmartEdit Extension Using Grunt in SAP Commerce Cloud

Hi, in this video, I'll show you how to create a smart edit extension, then build it via Grunt, a JavaScript task runner. First, I'll set my Grunt environment variables. For example, paste the following into your personal environment's initialization script. Don't forget to save your modified script. Then I go to my installation's bin directory slash platform and run this command for Mac or Linux environments, or this command for Windows. To create a new SmartEdit extension, I'll run ant xgen. And then for the template, I'll specify ysmarteditmodule. Then for extension name, I'll specify smartedittest. And for package name, I'll specify com.sap.smartedittest as my base package. Now, to add a new extension to my overall commerce build, I need to open the local extensions.xml file with any straight text editor and add the following entry. Make sure to follow the correct syntax. Next, I go to my custom extensions base folder, which can be found here, and open extension info.xml, again, using any straight text editor, and add the following content. This declared dependency on npm ancillary enables us to build this extension without the need for a full commerce build, nor a server restart. NPM stands for Node Package Manager and manages JavaScript packages. Now, also in my custom extensions base folder over here, I open buildCallbacks.xml once again using any straight text editor. You can see here, there are some hooks in buildCallbacks.xml to trigger the and build to invoke grunt tasks. For example, here the grunt task or alias package skip tests will be invoked before each ant build. Now to build, I open a command line or terminal window and navigate to this folder and run grunt-dev. You'll notice that a new directory jstarget has been created which contains two .js files SmartEditTest.js and SmartEditTestContainer.js. This is an indication that the grunt alias has been successfully invoked. That was just to show you what a grunt invocation looks like. Let's clean up these results before I show you more. In a file manager, I navigate to this folder and delete the JS target directory. Now to show you how Grunt is invoked in a typical scenario, I open a command line or terminal window, navigate to this folder, and run ANT. You'll notice that, again, a new directory JSTarget has been created with two .js files, SmartEditTest.js and SmartEditTestContainer.js. This indicates that the Grunt alias has been invoked, but this time, indirectly. That is, it was invoked by ant build. Now I run grunt space dash dash help. Lists of supported grunt tasks and aliases are shown. In grunt, we use tasks to perform JavaScript, HTML, and CSS build operations. You can also declare aliases, which are groupings of tasks. I open grunt file.js in this folder. Then I declare an alias by adding to the file the following content. I save gruntfile.js. I open the command line or terminal window, and I run grunt package with tests. You'll notice here in the build log that some JavaScript tests have been run. I'll open buildcallbacks.xml in this folder and find grunt build under a macro def with the name smart edit tests underscore before underscore build. I can change the phase from package skip tests to package with tests. And I'll save buildcallbacks.xml. Lastly, I'll open a command line and go to this folder and run ant. And I'll notice in the build log that some JavaScript tests have been run. This indicates that my new grunt alias has been called by AntBuild. In summary, a SmartEdit-related extension can be built two ways, using grunt or indirectly from Ant. That's all for now. Thank you for watching.