Local development

• Introduction
• Backend
• Frontend
  • Setup
  • Usage

Introduction

Explore our local development options, crafted to streamline your development experience with a suite of curated tips and tricks. Dive into a world where convenience meets efficiency, empowering you to harness the full potential of our platform while honing your coding skills in a familiar environment.

Backend

Usually, the backend only provides callable endpoints via REST API. Sometimes it can be more convienent to have the UI pointing to the locally hosted backend. Therefore, we started exploring the option to route the API calls from the Frontend to a different url in the SAW module. To activate this feature, just add the javascript variabele

Frontend

For local development we can use 2 approaches.

1. First is to load any application with npm start which for Angular application will run ng serve. The problem with this approach is that you need to have API option for loading different from SSO that will be used only for localhost. This option is not possible with VueJS applications.
2. Second option is setup the server, build and upload all applications, and then load needed one from localhost

Setup

Depending on where we get the project code in Base App we can have or not ready to use Import map overrides setup.

If this setup is missing you can just add this two lines:

<!--index.html-->
<script src="js/import-map-override.js"></script>
<import-map-overrides-full show-when-local-storage="devtools"></import-map-overrides-full>

import-map-override.js is already part of the project repository files. import-map-overrides-full is an HTML Web Component, that will add to your screen button and popup as per documentation of Import map overrides.

Usage

Open the DCP application () in the browser and open the DevTools Console. Inside the console run the following command:

localStorage.setItem('devtools', true)`

After page reload, there is one additional button in bottom right corner available, by clicking on the button the Import Map Overrides can be opened.

To use the overwrite you can run the application locally, using the following command:

npm run start:spa

This will run the application with extra-webpack single-spa configuration ready. to be used inside the import map overwrites.

In every application repository you can find correct port that the application will be started.

To import Angular application you need to enter http://localhost:4201/main.js (e.g. Administration application) or https://localhost:8081/js/app.js (e.g. SAW VueJS application) depending on after build naming and folder structure.

Currently used ports for local development