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

From Izara Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(4 intermediate revisions by one other user not shown)
Line 8: Line 8:
==Install single-spa project==
==Install single-spa project==
   npx create-single-spa  
   npx create-single-spa  
*npx create-single-spa@latest //use when install old version when don't update version 
==Update Install==
test choose
*npm update -g create-single-spa
*sudo npm install -g create-single-spa@latest


===Organization name===  
===Organization name===  
Line 22: Line 31:


=Root-config=
=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
<syntaxhighlight lang="JavaScript">
"imports": {
        "@izaraFrontends/root-config": "//localhost:9000/izaraFrontends-root-config.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>


[[Category:Working documents| 2025-04-18]]
[[Category:Working documents| 2025-04-18]]
[[Category:Working documents - Creating 2025-04-18 - single spa| 2025-04-18]]
[[Category:Working documents - Creating 2025-04-18 - single spa| 2025-04-18]]

Latest revision as of 10:48, 12 June 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
  • npx create-single-spa@latest //use when install old version when don't update version


Update Install

test choose

  • npm update -g create-single-spa
  • sudo npm install -g create-single-spa@latest


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=3285"