Experience Builder Custom Widgets General Question

Question

The below question assumes you have deployed a custom widget, and ran npm ci, npm fund, and npm start on the client followed by server folders in Deleper Edition. Suppose you update a file within the widget, such as widget.tsx, do you need to run any npm commands on the client and/or server folder? Will refreshing the Developer Edition builder app window work? Mostly asking as it can take 5-10 minutes to run through the commands for both the client and server folders.

Marshal · Accepted Answer

As long as npm is running it should be listening for changes.  So generally, refreshing the browser running ExB Dev will reflect changes to custom widgets.  Although, I have had occasions that required restarting npm completely.

Jeff.Thompson@arlingtontx.gov_arlingtontx · Accepted Answer

Before directly answering your question, I think it would be helpful to explain what those commands you ran do.

* npm ci- The ci stands for clean install. The files you downloaded from ESRI are not all the files that go into Experience Builder. Somewhere in that package of files is a list of additional files that have been developed by third-parties that Experience Builder needs to run. Running npm ci downloads and installs those files. It's only necessary when first downloading Experience Builder or upgrading from one version to another.
* npm fund- Many of those third-party developers are not companies but individuals or small teams that mostly just make stuff for fun but maybe someone wants to tip them some money for their effort and to cover their costs. That command tells you who wants some money. Running it or paying them is entirely optional.
* npm start- This command starts the software package in the folder it is used in. At the beginning of every Experience Builder session, you will need to run this on both the client and sever folders.
* Ctrl+C- Press Ctrl and the c key at the same time, twice, in both the server and client folder. This command will safely stop Experience Builder. Use it when you are done working in Experience Builder for the day. It's not common, but errors can occur if you do not shut down properly.

When you are in an Experience Builder session (between npm start and Ctrl+C), one of those third party software packages called Webpack will watch for anytime you save a file in the your-extensions folder (If you are changing anything in any other folder, you are doing something wrong.) and automatically re-build and re-start your client server. All you will need to do is refresh your browser to see the changes. If you add a new folder, you may need to stop and restart your client folder to see that change.