WebSphere Commerce Version 8.0.4.3 or later

Rebuilding store code

You can rebuild your store code, such as JavaScript and CSS files, by using Grunt plugins.

Before you begin

Download and install node.js and npm tooling:
1. Download and install node.js and npm from nodejs.org.
2. Ensure that the path environment variables are added after install, so that all commands work correctly from any directory on the command line.
Install bower from npm. From a command prompt, run the following command:
```
npm install -g bower
```
Note: Bower might return a deprecated message. This can safely be ignored.
Install the tooling for your store and widgets:
1. Copy the external directory from WC_installdir\samples\stores\AuroraJQuery to Stores.war\WebContent.
2. Use the command prompt to go to the Stores.war\WebContent\external directory and run the following commands:
```
npm install
bower install
```
3. Go to the following directories:
  - Stores.war\WebContent\external\build_ibm
  - Stores.war\WebContent\external\build_store
4. From a command prompt, run the following command:
```
npm install
```

About this task

For optimal store performance, all JavaScript and CSS files are kept to a minimum inside the store and widget directories. As a result, you must complete this task every time you update your store code, so that the store can apply your changes.

Procedure

Rebuilding JavaScript files in the widgets directory.

Complete this step every time you update JavaScript files in the widgets directory (widgetdir).

This step rebuilds the JavaScript and minimizes all widget code to the widgetdir\commom\javascript\widgets.js file.
1. Go to the following directory: Stores.war\WebContent\external\build_ibm
2. From a command prompt, run the following command:
```
grunt dev -storename=storeName
```
Rebuild your store's code.
1. Run the following commands in sequence:
  For development environments, use the grunt dev command, which only merges the code to make it easier for you to debug:
```
Stores.war\WebContent\external\build_ibm>
grunt dev -storename=your_store_name
```
  If you run the command under the build_ibm directory, it compresses the default javascript files. The source is Stores.war/Widgets_801, and it collects all the javascript files in this directory. The destination is Stores.war/Widgets_801/Common/javascript/widgets.uncompressed.js.
```
Stores.war\WebContent\external\build_store>
grunt dev -storename=your_store_name
```
  If you run the command under the build_store directory, it compresses the custom javascript files. These files are listed in grunt.properties and the directory that you pointed to your custom widget (myWidgetsDir=../../…/MyWidgets). You can verify the configuration by reviewing the properties defined in grunt.js. To do this, open the file and look for the following construction:
```
properties: {
gruntProps: 'grunt.properties'
},
```
  The grunt.js file always picks up the directory from the grunt.properties file. Therefore, in this example, the source is ["<%=gruntProps.myWidgetsDir %>/**/*.js"] and the destination is Stores.war/<customstore>/javascript/custom.uncompressed.js. This destination is stored in your specific store (for example, your specific StorefrontAssetStore for your jquery store).
  For production environments, use the grunt prod command, which uglifies and merges the code to increase load efficiency:
```
Stores.war\WebContent\external\build_ibm>
grunt prod -storename=your_store_name
Stores.war\WebContent\external\build_store>
grunt prod -storename=your_store_name
```
  Where your_store_name is your store name. For example, AuroraB2BStorefrontAssetStore.
  
  Ensure that each command runs successfully. Then, your store code has been recompiled.