Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 856e8f4

Browse files
urwithaturwithat
committedJan 18, 2021
Doc for Local deployment, handle auth redirects
·
v1.0
1 parent 143ec6b commit 856e8f4

File tree

1 file changed

+277
-0
lines changed

1 file changed

+277
-0
lines changed
 

‎README.md

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,3 +294,280 @@ The URL for the React app started this way would look like:
294294
There is no universal approach to run any React app as child app in Single SPA. This is because unlike Angular application which always use Angular CLI, each React application has it's own Webpack config. And to be able to run React app as a child microapp we need the Webpack to be configured in a certain way.
295295
296296
- Here is Official Video form the creator of Single Spa on [How To Convert a create-react-app (CRA) project to single-spa](https://www.youtube.com/watch?v=W8oaySHuj3Y&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU)
297+
298+
299+
300+
301+
302+
### Checkout 4 repos and apply patches:
303+
- git clone https://github.com/topcoder-platform/micro-frontends-frame.git
304+
- git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
305+
- git clone https://github.com/topcoder-platform/micro-frontends-react-app.git
306+
- git clone https://github.com/topcoder-platform/micro-frontends-angular-app.git
307+
and create a folder (ex: 'auth0-local-login'), and save the following file: 'https://accounts-auth0.topcoder-dev.com/setupAuth0WithRedirect.js' into that folder. After 'setupAuth0WithRedirect.js' file was saved, create an empty 'index.html' file with the following content:
308+
```
309+
<!DOCTYPE html>
310+
<html>
311+
<head>
312+
<title>Auth0</title>
313+
<meta charset="utf-8" />
314+
<script language="javascript" type="text/javascript" src="./setupAuth0WithRedirect.js"></script>
315+
</head>
316+
<body>
317+
Loaded...redirecting to auth0.(see browser console log)
318+
<script>
319+
window.onload = authSetup;
320+
</script>
321+
<a href="?retUrl=http://localhost:3000" >Login</a>
322+
</body>
323+
</html>
324+
```
325+
### Local deployment:
326+
(1). root-config:
327+
open Terminal #1
328+
change the current dir to the root-config folder and apply patch:
329+
- cd micro-frontends-frame
330+
- git apply ../micro-frontends-frame.diff --ignore-whitespace --whitespace=nowarn
331+
install dependencies:
332+
- npm install
333+
build and run the app:
334+
- APPMODE=development APPENV=local npm run build
335+
- APPMODE=development APPENV=local npm run local-server
336+
(2). navbar-app:
337+
open Terminal #2
338+
change the current dir to the navbar-app folder and apply patch:
339+
- cd micro-frontends-navbar-app
340+
- git apply ../micro-frontends-navbar-app.diff --ignore-whitespace --whitespace=nowarn
341+
there is a config file: '{navbar-app-repo}/config/development.js'. To login locally, change 'ACCOUNTS_APP_CONNECTOR', and 'AUTH' to point to the server that will be served in folder 'auth0-local-login' which was setup in the previous step.
342+
```
343+
URL: {
344+
ACCOUNTS_APP_CONNECTOR: "http://localhost:5000",
345+
AUTH: "http://localhost:5000"
346+
...
347+
}
348+
```
349+
install dependencies:
350+
- npm install
351+
build and run the app (choose 1 out of 3 ways listed bellow):
352+
for development build with hot-reload:
353+
- npm run dev
354+
or
355+
for development build with static server:
356+
- APPMODE=development npm run build
357+
- npm start
358+
or
359+
for production build with static server:
360+
- npm run build
361+
- npm start
362+
NOTE:
363+
Default backend environment is always the dev environment. To switch to production environment, add APPENV=production before the command, ex:
364+
- APPENV=production npm run dev
365+
or
366+
- APPENV=production npm run build
367+
- npm start
368+
(3). react-app:
369+
open Terminal #3
370+
change the current dir to the react-app folder and apply patch:
371+
- cd micro-frontends-react-app
372+
- git apply ../micro-frontends-react-app.diff --ignore-whitespace --whitespace=nowarn
373+
install dependencies:
374+
- npm install
375+
build and run the app:
376+
- npm run dev
377+
(4). angular-app:
378+
open Terminal #4
379+
change the current dir to the angular-app folder and apply patch:
380+
- cd micro-frontends-angular-app
381+
- git apply ../micro-frontends-angular-app.diff --ignore-whitespace --whitespace=nowarn
382+
install dependencies:
383+
- npm install
384+
build and run the app:
385+
- npm run dev
386+
(5). auth0 login in local mode
387+
open Terminal #5
388+
change the current dir to the 'auth0-local-login' folder and serve with the index.htm file
389+
- cd auth0-local-login
390+
- npx http-server . -p 5000
391+
The app can be open at the browser url: 'http://localhost:5000' (this page will redirect to the actual page: 'http://localhost:3000')
392+
393+
## Local deployment - handle auth redirects
394+
395+
### Checkout 4 repos and apply patches:
396+
397+
- git clone https://github.com/topcoder-platform/micro-frontends-frame.git
398+
399+
- git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
400+
401+
- git clone https://github.com/topcoder-platform/micro-frontends-react-app.git
402+
403+
- git clone https://github.com/topcoder-platform/micro-frontends-angular-app.git
404+
405+
and create a folder (ex: 'auth0-local-login'), and save the following file: 'https://accounts-auth0.topcoder-dev.com/setupAuth0WithRedirect.js' into that folder. After 'setupAuth0WithRedirect.js' file was saved, create an empty 'index.html' file with the following content:
406+
407+
```
408+
409+
<!DOCTYPE html>
410+
411+
<html>
412+
413+
<head>
414+
415+
<title>Auth0</title>
416+
417+
<meta charset="utf-8" />
418+
419+
<script language="javascript" type="text/javascript" src="./setupAuth0WithRedirect.js"></script>
420+
421+
</head>
422+
423+
<body>
424+
425+
Loaded...redirecting to auth0.(see browser console log)
426+
427+
<script>
428+
429+
window.onload = authSetup;
430+
431+
</script>
432+
433+
<a href="?retUrl=http://localhost:3000" >Login</a>
434+
435+
</body>
436+
437+
</html>
438+
439+
```
440+
441+
### Local deployment:
442+
443+
(1). root-config:
444+
445+
open Terminal #1
446+
447+
change the current dir to the root-config folder and apply patch:
448+
449+
- cd micro-frontends-frame
450+
451+
- git apply ../micro-frontends-frame.diff --ignore-whitespace --whitespace=nowarn
452+
453+
install dependencies:
454+
455+
- npm install
456+
457+
build and run the app:
458+
459+
- APPMODE=development APPENV=local npm run build
460+
461+
- APPMODE=development APPENV=local npm run local-server
462+
463+
(2). navbar-app:
464+
465+
open Terminal #2
466+
467+
change the current dir to the navbar-app folder and apply patch:
468+
469+
- cd micro-frontends-navbar-app
470+
471+
- git apply ../micro-frontends-navbar-app.diff --ignore-whitespace --whitespace=nowarn
472+
473+
there is a config file: '{navbar-app-repo}/config/development.js'. To login locally, change 'ACCOUNTS_APP_CONNECTOR', and 'AUTH' to point to the server that will be served in folder 'auth0-local-login' which was setup in the previous step.
474+
475+
```
476+
477+
URL: {
478+
479+
ACCOUNTS_APP_CONNECTOR: "http://localhost:5000",
480+
481+
AUTH: "http://localhost:5000"
482+
483+
...
484+
485+
}
486+
487+
```
488+
489+
install dependencies:
490+
491+
- npm install
492+
493+
build and run the app (choose 1 out of 3 ways listed bellow):
494+
495+
for development build with hot-reload:
496+
497+
- npm run dev
498+
499+
or
500+
501+
for development build with static server:
502+
503+
- APPMODE=development npm run build
504+
505+
- npm start
506+
507+
or
508+
509+
for production build with static server:
510+
511+
- npm run build
512+
513+
- npm start
514+
515+
NOTE:
516+
517+
Default backend environment is always the dev environment. To switch to production environment, add APPENV=production before the command, ex:
518+
519+
- APPENV=production npm run dev
520+
521+
or
522+
523+
- APPENV=production npm run build
524+
525+
- npm start
526+
527+
(3). react-app:
528+
529+
open Terminal #3
530+
531+
change the current dir to the react-app folder and apply patch:
532+
533+
- cd micro-frontends-react-app
534+
535+
- git apply ../micro-frontends-react-app.diff --ignore-whitespace --whitespace=nowarn
536+
537+
install dependencies:
538+
539+
- npm install
540+
541+
build and run the app:
542+
543+
- npm run dev
544+
545+
(4). angular-app:
546+
547+
open Terminal #4
548+
549+
change the current dir to the angular-app folder and apply patch:
550+
551+
- cd micro-frontends-angular-app
552+
553+
- git apply ../micro-frontends-angular-app.diff --ignore-whitespace --whitespace=nowarn
554+
555+
install dependencies:
556+
557+
- npm install
558+
559+
build and run the app:
560+
561+
- npm run dev
562+
563+
(5). auth0 login in local mode
564+
565+
open Terminal #5
566+
567+
change the current dir to the 'auth0-local-login' folder and serve with the index.htm file
568+
569+
- cd auth0-local-login
570+
571+
- npx http-server . -p 5000
572+
573+
The app can be open at the browser url: 'http://localhost:5000' (this page will redirect to the actual page: 'http://localhost:3000')

0 commit comments

Comments
 (0)
This repository has been archived.