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

From Izara Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(One intermediate revision 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 24: Line 33:
==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 44:
         "@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>

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"