title | description | author | ms.date | ms.topic | audience | ms.reviewer | ms.search.region | ms.author | ms.search.validFrom |
---|---|---|---|---|---|---|---|---|---|
Create a new module |
This article describes how to create a new module in Dynamics 365 Commerce. |
samjarawan |
05/28/2024 |
article |
Developer |
v-chrgriffin |
Global |
niholman |
2019-10-31 |
[!include banner]
This article describes how to create a new module in Dynamics 365 Commerce.
To create a new module in Commerce, the online software development kit (SDK) provides the add-module command-line interface (CLI) command. When you run the command as in the following example, you replace MODULE_NAME with the name that you want to give to the new module.
yarn msdyn365 add-module MODULE_NAME
The following example shows how to create a module that is named product-feature.
yarn msdyn365 add-module product-feature
After the command has finished running, you can find the new module in the \src\modules\ directory.
To preview the new module in a local web browser, follow these steps.
-
At a command prompt, go to your root SDK folder, and run the yarn start command. Here is an example.
c:\repos\Msdyn365.Commerce.Online\yarn start
-
In a web browser, open the following URL to view the module:
https://localhost:4000/modules?type=product-feature
. Notice the module name in the type=MODULE_NAME query string parameter.
Module names are case-insensitive. We recommended that you use whole words for module names whenever you can.
By default, all modules are rendered server-side, but deferred loading of some modules may be needed to improve page load performance. For more information, see Page load data actions.
To help prevent unexpected rendering behavior, such as page flicker and Document Object Model (DOM) mismatch issues, any references to window or document objects that are available only in the context of a browser should be appropriately handled during server-side rendering. The MsDyn365.isBrowser SDK utility function can be used for this purpose, as shown in the following example.
import MsDyn365 from '@msdyn365-commerce/core';
if (MsDyn365.isBrowser) {
return new URL(window.location.href);
}
If a module encounters an error during server-side rendering, the failed module is then wrapped into an ErrorModule component to prevent any module-level render error from breaking the page. For example, a module using window or document objects during a server-side render would fail because these objects are non-existent on the server side. In this case, the module would then be wrapped in an error component. The module would then attempt to render again on the client. In development mode, to determine if a module failed on the server side, use a ?debug=true
query string parameter.
Add module configuration fields
Test modules by using module mocks
Test modules by using page mocks
Create a layout container module
Create a page container module
[!INCLUDEfooter-include]