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. After that, if you make any changes to the UI of the forms by using its source code, you need to rebuild its source code to see the results of your changes. You build the source code in the FrontendSources folder of your instance. You also need to make sure that you perform some prerequisite actions before you start building the source code.

Performing the Prerequisite Actions

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

You 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.
You 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" />
```
You run the following command in the FrontendSources folder. You can use terminal in Visual Studio Code, or 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

We recommend that you use the build-dev command instead of the build command during the development for 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,FS305100
```
The command above builds the sources for only the Sales Orders (SO301000) and Service Contract Schedules (FS305100) forms.
```
npm run build-dev -- --env modules=AR,AP,GL
```
The command above builds the sources for only the forms in the specified functional areas (AR, AP, and GL in this example).

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 this command only once.

```
npm run watch -- --env screenIds=SO301000,FS305100
```
The command above 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
```
The command above 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 do not use the watch command without the screenIds or modules parameters because the command may work unstable.