Getting Error while adding custom menu and page via Admin Ui-SDK

[ShubhamAg2]

The Adobe Commerce Admin UI SDK allows App Builder developers to enhance the Commerce Admin by adding custom menus and pages. I am currently incorporating custom menus and pages based on the sample code provided at

https://github.com/adobe/adobe-commerce-samples

I am following this documentation

https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/app-registration/

and performing all the necessary operations. However, when I run the command aio app deploy, I receive the following error:

Error: missing files in /home/user/Documents/App-Builder/Adobe-admin-ui-sdk/adobe-commerce-samples(new)/admin-ui-sdk/menu/custom-menu/dist/commerce-backend-ui-1/web-prod, maybe you forgot to build your UI?

When I run the command aio dev then I get a response like
https://localhost:9080/
To view your deployed application in the Experience Cloud shell:-> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080
Your actions:
web actions:
-> https://localhost:9080/api/v1/web/admin-ui-sdk/registration

-> https://localhost:9080/api/v1/web/CustomMenu/commerce-rest-get 

There is no content on the localhost when I am invoking it in the browser
As per the documentation, the browser should show a response like

[asalloum]

Hello @ShubhamAg2,

It looks like your application is not built correctly.

• Did you run an "npm install" and "aio app build"? If so, try and run "aio app build --force-build". 
• Before running the "aio app deploy", I would recommend to make sure your that "aio app use" is correctly executed and your ".env" file is updated with the correct credentials.

For the localhost, you need to make sure that you have a local server that is running and that the local Commerce instance is correctly configured. Here's a link to the documentation with the steps to follow: 

https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/configuration/

What version of Admin UI SDK are you using? The sample provided in the github repo is compatible with Admin UI SDK 3.0.0.

If the issue persist am happy to check other options that can be checked to solve it.

[AmitVishwakarma]

Hi @ShubhamAg2 ,

Root Cause:

You haven’t built the frontend part of your Admin UI SDK app yet.

This dist/commerce-backend-ui-1/web-prod folder is generated only after building your app’s UI (aio app build) - without it, deploy fails.

1. Ensure Node.js and npm are installed

node -v
npm -v

2. Navigate to your App directory

cd /home/user/Documents/App-Builder/Adobe-admin-ui-sdk/adobe-commerce-samples/admin-ui-sdk/menu/custom-menu

3. Install dependencies

npm install

4. Force build the app

aio app build --force-build

 5. Ensure .env is set correctly

Example .env:

AIO_RUNTIME_NAMESPACE=xxxxxxx
AIO_RUNTIME_AUTH=yyyyyyyyy
COMMERCE_ADMIN_URL=https://admin.dev.adobe-commerce.site/

And run

aio app use 
aio app deploy

Regards,
Amit

[ShubhamAg2]

Thanks, @AmitVishwakarma. I performed all the steps mentioned above, but I still get the same error. I am confused about whether we can use a local instance like magento2.local(instead of https://magentsite.com) to connect the admin UI SDK.