How to clone Adventure Works

(1) Share

Report

Posted on by Jritz

283

Good Morning,

We have previously cloned the Fabrikam theme without issue. We have added the Adventure Works theme to our SDK as well. I will list some of our steps below. We are attempting to clone the Adventure Works theme to make some customizations to certain Modules, as when we make changes to the Adventure Works module, package the changes, and deploy them to our site, it seems the changes are being overwritten possibly during trans-compiling and pulling down dependencies? Not sure on that one. Can someone explain how to clone the Adventure Works theme and why our attempt is failing? Thanks, steps below:

Added Adventure Works to SDK: yarn add @msdyn365-commerce-theme/adventureworks-theme-kit@9.35

Command was successful.

Attempted clone: yarn msdyn365 clone adventureworks cust-theme

Command failed: The module you requested does not exist in the module library.

Any insight would be appreciated, as we need to make changes to the Adventure Works theme.

Thanks,

Josh

All responses (11)

Answers (1)

NM-09101045-0 39 on at

Like (0)

Report

How to clone Adventure Works

Hi all, sorry for jumping in the discussion after all this time but i'm new about commerce.

I'm using

node 16.20.2

yarn 1.22.22

csu 10.0.40

skd 9.51

In the package json, once checked out the repo i've already this dependencies:

"@msdyn365-commerce-modules/fabrikam-design-kit": "9.51",
"@msdyn365-commerce-modules/msdyn365-exp-test-connector": "^1.0.0",
"@msdyn365-commerce-modules/starter-pack": "9.51",
"@msdyn365-commerce-theme/adventureworks-theme-kit": "9.51",
"@msdyn365-commerce/bootloader": "^1.0.0",
"@msdyn365-commerce/retail-proxy": "9.51",

i've installed the theme using the cmd yarn add @msdyn365-commerce-theme/adventureworks-theme-kit@9.51.

I'm stucked in this section of the guide https://learn.microsoft.com/en-us/dynamics365/commerce/install-adventure-works#set-up-the-resources-for-the-adventure-works-theme.

My point is that the folder \node_modules@msdyn365-commerce-theme\adventureworks-theme-kit\src\modules\adventureworks\resources\* doesn't really exists.
I tried to copy all the \node_modules@msdyn365-commerce-theme\adventureworks-theme-kit\src\modules\adventureworks into both \src\modules and \src\resources (i'm not sure that's the right way) but when i run yarn start i got the same error previously described: Error: Unable to find parent definition file for file C:\src\Msdyn365.Commerce.Online\src\themes\testTheme\definition-extensions\search-result-container-v2.definition.ext.json

Can anyone help me ?
Jritz 283 on at

Like (0)

Report

RE: How to clone Adventure Works

Not certain on that one, but I'd refer to the SDK and module library kit update documentation found at the link below:

learn.microsoft.com/.../sdk-updates
ajpajp 10 on at

Like (0)

Report

RE: How to clone Adventure Works

Hi there! Thank you for this.

I have a follow up question. So we want to use the latest online SDK, which is version 9.40.

But I will have to use version 9.32 of the adventureworks-theme-kit. Is that correct? Is it okay it's an older version?

Thanks!
Jritz 283 on at

Like (0)

Report

RE: How to clone Adventure Works

Hi ajpajp,

You will need to follow this step:

learn.microsoft.com/.../install-adventure-works

The part to pay attention to is here:

"If the \src\resources target directory doesn't exist, it can be copied in its entirety from the \node_modules@msdyn365-commerce-theme\adventureworks-theme-kit\src\modules\adventureworks source directory to the \src target directory."

Additionally, if you have not run the below command, the resources folder will not be present:

yarn add @msdyn365-commerce-theme/adventureworks-theme-kit@9.32
ajpajp 10 on at

Like (0)

Report

RE: How to clone Adventure Works

I'm just piggy backing here. On step 1 here, when I try to install the adventure works theme. I get stuck on the step 'Set up the resources for the Adventure Works theme'. The 'resources' folder doesn't exist here: '\node_modules@msdyn365-commerce-theme\adventureworks-theme-kit\src\modules\adventureworks\resources\modules'.

I just skipped that step and followed everything else to install it, as well as the steps here, and when i run yarn start i get the error:

Error: Unable to find parent definition file for file C:\src\Msdyn365.Commerce.Online\src\themes\testTheme\definition-extensions\search-result-container-v2.definition.ext.json
Jritz 283 on at

Like (0)

Report

RE: How to clone Adventure Works

Hi Sam,

Thank you so much for following up with the update. This appears to have fixed the issue and we are now able to pack our custom theme based on Adventure Works. We look forward to the published fix, but this workaround has resolved our concerns for now. I'm sure this will make our client very happy.

Thanks,

Josh R
Verified answer

Sam Jarawan on at

Like (0)

Report

RE: How to clone Adventure Works

Hi Josh,

Looks like one of the SDK dependencies recently took a new dependency on a newer version of React, causing the break which I was able to reproduce and was also reported by other methods.

We're going to publish a fix for it ASAP, and will also put a new forum post on the issue. The good news is there is an easy work around, just modify the package.json file to include a new entry in the resolutions section to ensure the React version 16.x version is chosen ( "@types/react": "16.9.0") then run "yarn" to sync up the proper dependencies.

Below is a sample of where it can be added.

...

"resolutions": {

"@msdyn365-commerce/bootloader": "^1.0.0",

"@msdyn365-commerce/core": "^1.0.0",

"@msdyn365-commerce-modules/core-components": "^1.0.0",

"axios": "^0.21.1",

"@types/react": "16.9.0"

}

thanks,

Sam
Jritz 283 on at

Like (0)

Report

RE: How to clone Adventure Works

Hi Sam,

Thank you for the update. This did seem to help us get a custom theme following the AW theme. We are able to verify that it does work when running yarn start, however we are getting a lot of Typescript errors when trying to run yarn msdyn365 pack so that we can use the custom theme with the changes we made to AW on our site. The main error we are seeing is below:

ERROR in C:/repos/Msdyn365.Commerce.Online/src/themes/contoso/contoso/views/write-review.view.tsx(35,10):

TS2786: 'Image' cannot be used as a JSX component.

Its instance type 'Image' is not a valid JSX element.

This error is showing up on a number of the view and component files. Do you have any insight on this? The same errors are present in the AW theme files, but when running yarn msdyn365 pack with just AW theme present, it seems to package without a hitch.
Suggested answer

Sam Jarawan on at

Like (0)

Report

RE: How to clone Adventure Works

Hi Josh,

The online SDK clone CLI command will only clone module library modules and SDK modules and not external added ones such as the Adventure Works theme.

However, now that the Adventure Works theme is our primary reference theme (it used to be Fabrikam), we are working on adding this theme directly in the online SDK in our github repo, however until then it's rather simple to manually do the steps to create a copy of the theme for your own use using the below steps after you've added the reference.

1. Install the AW theme : Install the Adventure Works theme - Commerce | Dynamics 365 | Microsoft Docs

2. Create a "theme" directory under "\src" if one doesn't exist already and another directory for the name of your theme example for a theme named "contoso" : "\src\themes\contoso"

3. Copy the "...\Msdyn365.Commerce.Online\node_modules\@msdyn365-commerce-theme\adventureworks-theme-kit\src\modules\adventureworks" directory to your "\src\themes\contoso" directory and rename it to the new name of your theme example "...\Msdyn365.Commerce.Online\src\themes\contoso" (if you are naming the theme contoso

4. If you followed the steps when installing the AW theme in step 1 above, you already have a copy of the "resources" and "public" folder so you can remove those two folders from the new theme files. Also there is a "__test__" file you won't need unless you are adding your own unit tests for the theme.

5. Next step is rename a few files in the theme to match your new theme name. There are some files at the root "adventureworks.definition.json", "adventureworks.theme.settings.json" and "adventureworks.tsx" rename each to the name of your theme example : "contoso.definition.json", "contoso.theme.settings.json" and "contoso.tsx"

6. Edit the contoso.definition.json file and proivde a new "name" (ex: "contoso") and friendly name/description

7.Rename styles files. Under the "styles" directory you'll find "adventureworks.definition.scss.json", "adventureworks.scss" , rename with your new theme name, example "contoso.definition.scss.json", "contoso.scss"

8. Edit contoso.defintion.scss.json and change the name of the style preset to the name of your new theme "contoso" (also change the description).

Now if you run "yarn start" you should be able to test your new theme out using the ?theme=contoso query string parameter (change contoso to the name of your theme that is inside the definition file set in step 6. An example test is to preview one of the module library modules such as the "promo banner" module using: localhost:4000/modules

Hope that helps,

Sam
Jritz 283 on at

Like (0)

Report

RE: How to clone Adventure Works

Hi Judy,

Thanks for the link. However, we have already consulted this link, which is where I got the yarn command to add Adventure Works. We already successfully added Adventure Works to our SDK. That went off without a hitch. The issue we have is cloning AW. We have some changes to some of the scss and view files in that theme, however, making changes directly to the AW theme seems not to take when we run yarn msdyn365 pack and upload to our asset library. The changes aren't reflecting on Site Builder. So, we wanted to clone the AW theme so we could have a custom theme based on the AW theme, but the clone command seems to only work on the Fabrikam theme.

Thanks