chore: remote url from env
This commit is contained in:
		
							parent
							
								
									5614ed542a
								
							
						
					
					
						commit
						9550591048
					
				
							
								
								
									
										35
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										35
									
								
								README.md
									
									
									
									
									
								
							@ -2,13 +2,14 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
MFE with Nuxt being the Host and Remote
 | 
					MFE with Nuxt being the Host and Remote
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Initial setup
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
cd host
 | 
					cp .env.example .env
 | 
				
			||||||
pnpm i
 | 
					 | 
				
			||||||
pnpm build
 | 
					 | 
				
			||||||
pnpm serve
 | 
					 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Development
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
cd remote
 | 
					cd remote
 | 
				
			||||||
pnpm i
 | 
					pnpm i
 | 
				
			||||||
@ -16,8 +17,30 @@ pnpm build
 | 
				
			|||||||
pnpm serve
 | 
					pnpm serve
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# TODO
 | 
					```
 | 
				
			||||||
 | 
					cd host
 | 
				
			||||||
 | 
					pnpm i
 | 
				
			||||||
 | 
					pnpm dev
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- Build-mode works but Dev-mode not works
 | 
					Open http://localhost:3000
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Deployment
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					cd remote
 | 
				
			||||||
 | 
					pnpm i
 | 
				
			||||||
 | 
					pnpm build
 | 
				
			||||||
 | 
					pnpm serve
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					cd host
 | 
				
			||||||
 | 
					pnpm i
 | 
				
			||||||
 | 
					pnpm build
 | 
				
			||||||
 | 
					pnpm serve
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## TODO
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					- Build-mode works but Dev-mode not works (fixed)
 | 
				
			||||||
- Enable CORS on remote JS assets (fixed)
 | 
					- Enable CORS on remote JS assets (fixed)
 | 
				
			||||||
- Scoped style still not works (fixed)
 | 
					- Scoped style still not works (fixed)
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										1
									
								
								host/.env.example
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								host/.env.example
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					NUXT_MFE_APP1_HOST=http://localhost:3001
 | 
				
			||||||
@ -2,6 +2,8 @@ import { defineNuxtConfig } from "nuxt/config"
 | 
				
			|||||||
import federation from "@originjs/vite-plugin-federation"
 | 
					import federation from "@originjs/vite-plugin-federation"
 | 
				
			||||||
import topLevelAwait from "vite-plugin-top-level-await"
 | 
					import topLevelAwait from "vite-plugin-top-level-await"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const MFE_HOST = process.env.NUXT_MFE_APP1_HOST
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default defineNuxtConfig({
 | 
					export default defineNuxtConfig({
 | 
				
			||||||
  compatibilityDate: "2024-04-03",
 | 
					  compatibilityDate: "2024-04-03",
 | 
				
			||||||
  devtools: { enabled: false },
 | 
					  devtools: { enabled: false },
 | 
				
			||||||
@ -29,7 +31,7 @@ export default defineNuxtConfig({
 | 
				
			|||||||
        federation({
 | 
					        federation({
 | 
				
			||||||
          name: "host-app",
 | 
					          name: "host-app",
 | 
				
			||||||
          remotes: {
 | 
					          remotes: {
 | 
				
			||||||
            remote: "http://localhost:3001/_nuxt/remoteEntry.js"
 | 
					            remote: `${MFE_HOST}/_nuxt/remoteEntry.js`
 | 
				
			||||||
          },
 | 
					          },
 | 
				
			||||||
          shared: ["vue"]
 | 
					          shared: ["vue"]
 | 
				
			||||||
        })
 | 
					        })
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user