The Structure of an Arc.js Application
Arc.js Project Files
The project files in which you develop Arc.js applications have the structure shown in the following image. You can use the Kibo eCommerce Yeoman Generator to automatically scaffold these files.
Arc.js Project Root
|assets||This folder contains the subfolders where you code your custom functions and design your tests. When you run Grunt, all the files in the assets folder are uploaded to your Arc.js application in Dev Center.|
|Gruntfile.js||This file defines Grunt task configurations and loads Grunt plugins. Grunt tasks automate the repetitive aspects of Arc.js development and are invoked through the command line. You can add custom Grunt tasks to this file if you wish. The default Grunt commands include:
grunt—Runs grunt build. In addition, asks for your developer account password in order to upload your Arc.js assets to Dev Center. If your tests fail, you can append --force to the command to force the upload.
grunt build—Lints your code, bundles your dependencies, runs tests, and creates the dist folder and functions.json file, but does not upload the Arc.js assets to Dev Center (making this command useful for development). If your tests fail, you can append --force to the command to force the build.
grunt test—Runs the tests associated with your action files (you can edit these tests in the assets/test directory).
grunt reset—Deletes all Arc.js assets from your project folder and from Dev Center.
grunt w—Enables a watch that runs grunt every time you save a change to a project file. Unlike in theme development, where you can refresh a browser page to test most changes, setting a watch is normally not useful for Arc.js development, where you are more likely to test your changes across larger intervals. An exception when you might want to set a watch is if you are using Arc.js to alter view data for the theme.
|mozu-config.json||This file stores Kibo eCommerce authentication credentials for the Arc.js application, sync app, and your Dev Center account.|
|package.json||This file stores npm module metadata (like the package name and version number) and includes a list of dependencies for the application (for example, Grunt dependencies, Arc.js development tools, and any external Node.js libraries that the application leverages).|
|dist||This folder contains built and optimized assets that result from the Grunt build task.|
|manifest.js files||These files define the relationship between custom functions and the actions they bind to in Kibo eCommerce. The build task autogenerates these files based on the settings you specify in the Yeoman scaffolding tool, and then leverages the manifest files to generate the functions.json file.|
The Structure of the Action Files
|Type||Identifies the type of action.|
|Domain||Identifies the domain of the action, which specifies what part of the API hierarchy the action interacts with. For example, commerce.carts or commerce.customer.|
|Action||Identifies the HTTP or Kibo eCommerce action that runs the custom function. For example, updateItem.|
Specifies whether the custom function runs before or after the HTTP or Kibo eCommerce action occurs. For example, for an HTTP action, before runs the function when the HTTP request occurs in Kibo eCommerce but before Kibo eCommerce executes the request, and after runs the function after Kibo eCommerce executes the request and is ready to send the HTTP response.Note: Not every action includes this element.
This embedded action executes the custom functions associated with it after a price for an order is set.
To see the full list of actions available in Arc.js, refer to the reference documentation.