2025-04-18 - single spa: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (6 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
=Install= | =Install= | ||
==Global Install== | ==Global Install== | ||
*install in shell only one time when never install single-spa in Local computer before. | *install in shell only one time when never install single-spa in Local computer before. | ||
| Line 7: | 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 19: | Line 29: | ||
*start other micro-frontend | *start other micro-frontend | ||
npm start -- --port 9001(set port) | 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 | |||
<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>