Setting up a local instance for development

You must set up a local instance of the application that you want to customize. The best way to develop an Angular 11-based application is to use the Angular CLI while developing locally. Once a feature is developed locally, then it can be deployed to the developer toolkit or cloud environment.

1. Take the latest developer toolkit, copy the Sterling Store Engagement source code from <runtime>/repository/eardata/isf/war/storesrc and put it in a temporary directory say, <WORKSPACE>/store-frontend, referred to as <store_temp> throughout this procedure.
   It indicates that you will have the source package.json inside the <store_temp>. You can use this directory (<WORKSPACE>/store-frontend/store-extensions-src) for your source code management.
   Important: Ensure that the Sterling Store Engagement source code that you copy is from the latest developer toolkit.
2. Run the yarn install command from the <store_temp> directory. It installs all the dependencies as node_modules.
3. Update the omsEndPoint in the <store_temp>/src/environments/environment.hmr.ts and <store_temp>/src/environments/environment.ts files. Here, omsEndPoint is the URL, where the Store Fulfillment application is deployed. For example, the URL can be http://localhost:9080/isf, if you have set up the developer toolkit locally.
4. Run the yarn start command and launch the application on http://localhost:4500/
   At this point, your UI application is up and is ready to communicate with the deployed backend (http://localhost:9080/isf) Since the backend is deployed on different hosts or ports, the setup will face the CORS issue.
   However, this is not applicable to the cloud environment (including developer toolkit). Therefore, the CORS support is not enabled by default. To enable CORS, refer Enabling CORS for local environment.

   Note: Currently, the developer toolkit does not build the isf WAR. To build the WAR, users must update the AP_WAR_FILES property to include isf in the list of WARs to be built.
   For more information, see Setting up the containerized developer toolkit environment.
5. Log in to the application and explore the application-provided features.
6. Add your extensions.
   For new flows, all your UI extensions must be placed inside SCREEN_EXTENSIONS_HOME and BUNDLE_EXTENSIONS_HOME.
   Update the newly added extension components, providers, and lazy loading module paths in SCREEN_EXTENSIONS_DEFINITION_FILE.
   When you add or change the extension codes, the UI module automatically refreshes to load your changes. Ensure that you run the yarn ear-build-prod command in the <store_temp> directory before pushing the changes to your source control.

   Note: Update your changes only after the command succeeds because it maintains code consistency and quality. This command is run during the EAR build process in the cloud environments. If the command fails, the minification of extension codes is skipped and your changes might not reflect in the application.