Modern UI Development: Building of the Source Code

When you want to start migrating MYOB Acumatica forms to the Modern UI or you want create a new form based on it, you need to build the source code of each form to see its Modern UI version.

Performing the Prerequisite Actions

Before you begin building the source code for the first time, you do the following:

Make sure you have Node.js installed on your computer. By default, Node.js is installed by the MYOB Acumatica ERP Configuration Wizard when you deploy a new application instance.
Make sure that in the appSettings section of the Web.config file of your MYOB Acumatica instance, the following key is added.
```
<add key="EnableSiteMapSwitchUI" value="True" />
```
Run the following command in the FrontendSources folder. You can use the terminal in Visual Studio Code, Windows PowerShell, or a similar program.
```
npm run getmodules
```
This command installs the required dependencies needed to build the sources correctly.
Tip: The system performs this instruction automatically during the first publication of a customization project that contains any Modern UI files.

Building the Source Code for All MYOB Acumatica Forms

To build the sources in the FrontendSources folder of your instance, you need to run a command in the same folder. This command generates the form schema and JavaScript code from the TypeScript code and creates the mapping between the JavaScript and TypeScript code. You use this mapping to debug the client code in a web browser.

To build the sources during the UI development, you run the following command in the FrontendSources folder.

npm run build-dev

To build the sources in production mode, you run the following command in the FrontendSources folder.

npm run build

Tip: The system performs this instruction automatically during the publication of a customization project that contains any Modern UI files.

We recommend that you use the build-dev command instead of the build command during the development. This provides easier debugging in the web browser.

Building the Source Code for Particular MYOB Acumatica Forms

To speed up the build process, you can initiate the build for only specific forms instead of all of them. To do this, you can run one of the following modified versions of the command instead of the one in the preceding section in the FrontendSources\screen folder:

```
npm run build-dev --- --env screenIds=SO301000
```
This command above builds the sources for only the Sales Orders (SO301000) form.
```
npm run build-dev --- --env modules="AR,AP,GL"
```
This command builds the sources for only the forms in the specified functional areas (AR, AP, and GL in this example).

Tip: Notice that you need to use quotation marks if you specify more than one form or area to be built.

Automatically Rebuilding the Source Code for Particular MYOB Acumatica Forms

During the migration of the needed forms to the Modern UI, you make changes to the generated source files in the FrontendSources\screen folder of your instance. To see the changes that you make to a form, you will need to rebuild the corresponding source files every time a change is made. To save time, you can run a command that causes the source files to be rebuilt automatically each time a file is modified and saved in this folder.

To automatically rebuild the sources for only specific forms, you can run one of the following commands in the FrontendSources\screen folder (you need to run the selected command only once):

```
npm run watch --- --env screenIds="SO301000,FS305100"
```
This command automatically rebuilds the sources for only the Sales Orders (SO301000) and Service Contract Schedules (FS305100) forms when their corresponding source files are modified and saved.
```
npm run watch --- --env modules="AR,AP,GL"
```
This command automatically rebuilds the sources for only the forms in the specified functional area (AR, AP, and GL in this example).

Tip: To run the watch command from the root folder of your instance, you can navigate to the root folder in Windows PowerShell, and run the following command along with the screenIds or modules parameter.

npm run watch --prefix .\FrontendSources\screen\

Attention: We recommend that you not use the watch command without the screenIds or modules parameters because the command may behave in an unstable manner.