2025-04-18 - single spa: Difference between revisions

From Izara Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 24: Line 24:
==import explain==
==import explain==
===key===
===key===
* micro-frontend name  
* Application name  
* format Organization_name/Project_name eg. @izaraFrontends/root-config
* format Organization_name/Project_name eg. @izaraFrontends/root-config
===value===
===value===
Line 35: Line 35:
         "@izaraFrontends/user-detail": "//localhost:9002/izaraFrontends-user-detail.js",
         "@izaraFrontends/user-detail": "//localhost:9002/izaraFrontends-user-detail.js",
}
}
</syntaxhighlight>
==registerApplication==
===izaraFrontends-root-config.js===
*all aplication register here don't need to change anything
===index.ejs===
*create route of aplication here
<syntaxhighlight lang="html">
    <route path="login">
        <application name="@izaraFrontends/authentication"></application>
      </route>


</syntaxhighlight>
</syntaxhighlight>

Revision as of 06:55, 18 April 2025

Install

Global Install

  • install in shell only one time when never install single-spa in Local computer before.
  npm install -g create-single-spa

Install single-spa project

  npx create-single-spa

Organization name

  • izaraFrontends

Project name

  • <your repository name> eg. table-config

Open port & Run script

  • start root-config
  npm start
  • start other micro-frontend
  npm start -- --port 9001(set port)

Root-config

import explain

key

  • Application name
  • format Organization_name/Project_name eg. @izaraFrontends/root-config

value

  • sorce of microfrontend file
  • example path of sorce izara-frontend-core-user-details_pack/src/izaraFrontends-user-detail.js
  • example imports
 "imports": {
        "@izaraFrontends/root-config": "//localhost:9000/izaraFrontends-root-config.js",
        "@izaraFrontends/user-detail": "//localhost:9002/izaraFrontends-user-detail.js",
}

registerApplication

izaraFrontends-root-config.js

  • all aplication register here don't need to change anything

index.ejs

  • create route of aplication here
     <route path="login">
        <application name="@izaraFrontends/authentication"></application>
      </route>
Retrieved from "https://izara.io/wiki/index.php?title=2025-04-18_-_single_spa&oldid=3186"