expose-remotesapps exposes components with a different types of components styling.consumers-nextjsNextJs apps consumes exposed components in different combinations.consumers-reactReact apps consumes exposed components in different combinations.
To show examples of how different types of styling could be federated.
| Exposed Styling | React | NextJs |
|---|---|---|
| Css | can import (affect global) | can import (affect global) |
| Scss | can import (affect global) | can import (affect global) |
| Less | can import (affect global) | can import (affect global) |
| Css Module | can import (affect encapsulated) | can import (affect encapsulated) |
| react-jss | can import (affect encapsulated) | can import (affect encapsulated) |
| styled-components | can import (affect encapsulated) | can import (affect encapsulated) |
| tailwind css (as module) | can import (affect encapsulated) | can import (affect encapsulated) |
| tailwind styled component | can import (affect encapsulated) | can import (affect encapsulated) |
| Css variables in css | can import (affect global) | can import (affect global) |
Command start:expose-all will run remotes http:https://localhost:4000-4008/ with exposed components
Commands will run host react App on http:https://localhost:3001-3008/
start:react:jss-tailwind-componentstart:react:css-styled-componentstart:react:less-scssstart:react:css-module-and-jssstart:react:tailwind-global-and-lessstart:react:tailwind-module-and-jssstart:react:combination-of-5start:react:combination-of-4
Since there are 9! variants of remotes combinations you are able to create and run your own start:react:any-combination --scopes=@federated-css/{REQUIRED_COMBINATION_OF_REMOTES}
ex. pnpm run start:react:any-combination @federated-css/{expose-css,expose-scss,expose-less,expose-tailwind-css-global}
it will run all required expose remotes and creates host app with provided depth.
Note. you don't need to start required remotes separately for this command.
| Available Scopes |
|---|
| expose-css |
| expose-css-module |
| expose-jss |
| expose-less |
| expose-scss |
| expose-styled-component |
| expose-tailwind-css-global |
| expose-tailwind-css-module |
Commands will run host NextJs App on http:https://localhost:8081-8084/.
-start:nextjs:combination-of-4 -start:nextjs:jss-tailwind-global -start:nextjs:jss-css-and-tailwind-module -start:nextjs:less-and-styled-component
Since there are 9! variants of remotes combinations you are able to create and run your own start:nextjs:any-combination --scopes=@federated-css/{REQUIRED_COMBINATION_OF_REMOTES}
ex. pnpm run start:nextjs:any-combination @federated-css/{expose-css,expose-scss,expose-less,expose-tailwind-css-global}
it will run all required expose remotes and creates host app with provided depth.
Note. you don't need to start required remotes separately for this command.
| Available Scopes |
|---|
| expose-css |
| expose-css-module |
| expose-jss |
| expose-less |
| expose-scss |
| expose-styled-component |
| expose-tailwind-css-global |
| expose-tailwind-css-module |
- localhost:3001 (React HOST)
- localhost:8080 (NextJs HOST)
- localhost:4000 (STANDALONE REMOTE)
- localhost:4001 (STANDALONE REMOTE)
- localhost:4002 (STANDALONE REMOTE)
- localhost:4003 (STANDALONE REMOTE)
- localhost:4004 (STANDALONE REMOTE)
- localhost:4005 (STANDALONE REMOTE)
- localhost:4006 (STANDALONE REMOTE)
- localhost:4007 (STANDALONE REMOTE)
- localhost:4008 (STANDALONE REMOTE)