How do I add a custom widget to Developer Edition?

[AdamGebhart]

I'm struggling to find the directions for this.  I'm in Developer 1.18 and have downloaded  @Brian_McLeer's Advanced Draw widget as I'd like to use it in one or more of our apps.

I've extracted the .zip contents to ...\EXB_1.18\client\your-extensions\widgets but it's not showing up in ExB under Insert widget.  There isn't a 'Custom' section option.

What other step(s) do I need to complete?  

[Brian_McLeer · Accepted solution]

@AdamGebhart you may need to run the commands again such as npm ci, npm fund, npm start on the client/server folder. 

[JeffreyThompson2]

Shut down and re-start the client server in your Command Prompt.

[Leonidas]

You need to restart your client service.  If you press CTRL C in your client window, it will prompt you to terminate the current instance.  Then you run npm start again and refresh your Builder window and it should be there.  You will need to click on the Insert widget section on the left side in the builder app.  Then scroll down all the way to the bottom and there should be a custom section for your custom widgets.  

[AdamGebhart]

Thanks for the tips. 

When I try @JeffreyThompson2's suggestion of EXB_1.18\client > cmd > npm start I get these messages:

> exb-client@1.18.0 start
> cross-env NODE_ENV=development webpack --mode development --watch

'cross-env' is not recognized as an internal or external command,
operable program or batch file.

Before I try @Brian_McLeer's suggestion will re-running those npm steps affect the apps I've already built?  

[Brian_McLeer]

It should not, but I would recommend downloading the ZIPs first to be safe. 

[AdamGebhart]

Thanks again for the replies.  For anybody who runs into this same issue I...

Opened command prompt on EXB_1.18\client and ran npm ci, then npm start.  Closed the client command prompt. 

Opened command prompt on EXB_1.18\server and ran npm start.  

Opened ExB and now I see the custom widgets.

@Brian_McLeer , I did not run npm fund on either the Client or Server folder - should I on either or both of them?  I was able to add and configure the Draw - Advanced widget without running it.

[JeffreyThompson2]

You should keep both the client and server Command Prompts open and running the entire time you are working with Experience Builder. Closing them may have been your actual problem. Or your initial installation went wrong and was fixed by npm ci.

npm ci only needs to be run once when you first install Experience Builder (or upgrade to a new version number). nom fund is tells you what development teams are asking for donations to make and maintain their npm packages. You are never required to run it.

[Brian_McLeer]

@AdamGebhart I usually run npm fund between npm ci and npm start, but to be honest I don't do it all the time. If I am not doing any custom widget updates, I usually don't use admin and just my regular account and run npm start on only the server folder if I want to go right into updating the Experiences in DE without needing to do any code updates.

[AdamGebhart]

@JeffreyThompson2 - that's good to know.  I've never had them open at the same time.  I've always just had the server command prompt open when running ExB.

Even though there is some overlap in the suggestions I'll mark @Brian_McLeer's first response as the solution.  

Thanks again.