|
1 | | -# Create Micro React App |
| 1 | +# Create Micro React App [](https://travis-ci.com/matheusmr13/create-microfrontend-react-app) [](https://dev.azure.com/matheusmr13/create-microfrontend-react-app/_build/latest?definitionId=2&branchName=master) [](https://sonarcloud.io/dashboard?id=matheusmr13_create-microfrontend-react-app) |
2 | 2 |
|
3 | | -[](https://travis-ci.com/matheusmr13/create-microfrontend-react-app) |
4 | | -[](https://dev.azure.com/matheusmr13/create-microfrontend-react-app/_build/latest?definitionId=2&branchName=master) |
5 | | -[](https://sonarcloud.io/dashboard?id=matheusmr13_create-microfrontend-react-app) |
| 3 | +<img align="right" src="icon.png" width="23%"> |
6 | 4 |
|
7 | | -Create simple microfrontend architecture with tools like [Create React App](https://github.com/facebook/create-react-app). |
| 5 | +Most complete approach to microfrontend architecture: |
8 | 6 |
|
9 | | -<p align="center"> |
10 | | - <img src="icon.svg" width="40%"> |
11 | | -</p> |
| 7 | +- Library to export and import microfrontends; [know more...](https://matheusmr13.github.io/create-micro-react-app/docs/core) |
| 8 | +- Command line interface to create, development and release your app; [know more...](https://matheusmr13.github.io/create-micro-react-app/docs/cli) |
| 9 | +- Backoffice to simplify all complexity needed; [know more...](https://matheusmr13.github.io/create-micro-react-app/docs/backoffice) |
| 10 | +- Simple just like [Create React App](https://github.com/facebook/create-react-app). |
| 11 | + |
| 12 | +If you want to know more about microfrontends and why you should (or shouldn't) use it, check [this article](https://matheusmr13.github.io/create-micro-react-app/docs/core/microfrontend). |
12 | 13 |
|
13 | 14 | ## Quick Overview |
14 | 15 |
|
15 | 16 | ``` |
16 | | - npx @cmra/cli create my-app --app --microfrontend |
| 17 | + npx @cmra/cli create my-app |
17 | 18 | cd my-app |
18 | 19 | npm start |
19 | 20 | ``` |
20 | 21 |
|
21 | | -## What it does |
22 | | - |
23 | | -It helps you create a simple application with microfrontend architecture with no build configuration. |
24 | | - |
25 | | -### Core Features |
| 22 | +## Installing |
26 | 23 |
|
27 | | -- Microfrontend development made easy: |
| 24 | +To install our cli you need **Node >= 13**. |
28 | 25 |
|
29 | | - - Boilerplate and pre configured architechture; |
| 26 | +### npm |
30 | 27 |
|
31 | | - - Mock all other microfrontends (refering to a stable environment) combined with hotreload on current microfrontend, allowing you to see the changes you make as you develop new feature on a specific module; |
32 | | - |
33 | | - - Choose to split microfrontends into multiple repositories; |
| 28 | +```bash |
| 29 | + npm i -g @cmra/cli |
| 30 | +``` |
34 | 31 |
|
35 | | -- You just need something to host your static files and you are ready to go with a microfrontend app; |
| 32 | +### yarn |
36 | 33 |
|
37 | | -- All of this with [Create React App](https://github.com/facebook/create-react-app) beautiful configuration. |
| 34 | +```bash |
| 35 | + yarn global add @cmra/cli |
| 36 | +``` |
38 | 37 |
|
39 | | -- Integrates easy with a simple management interface that helps you organizing your microfrontends. |
| 38 | +## Using it |
40 | 39 |
|
41 | | -## Service |
| 40 | +After installing it, you'll have `cmra` command available: |
42 | 41 |
|
43 | | -Splited on marketplace-backend and marketplace-frontend packages. |
| 42 | +``` |
| 43 | + cmra create my-app |
| 44 | +``` |
44 | 45 |
|
45 | | -It helps you organizing your application integrated with the best tools (like github), like a backoffice for your architechtur. |
46 | | -You can have a simple microfrontend architechture on your application, and deploy it easily with many options. |
47 | | -Check our [site](https://matheusmr13.github.io/create-micro-react-app) for a demo. |
| 46 | +It will generate a folder structure like: |
| 47 | + |
| 48 | +```bash |
| 49 | + my-app |
| 50 | + ├── package.json |
| 51 | + ├── packages |
| 52 | + | ├── microfrontend # create-react-app structure folder |
| 53 | + | | ├── README.md |
| 54 | + | | ├── package.json |
| 55 | + | | ├── public |
| 56 | + | | | ├── favicon.ico |
| 57 | + | | | ├── index.html |
| 58 | + | | | ├── logo192.png |
| 59 | + | | | ├── logo512.png |
| 60 | + | | | ├── manifest.json |
| 61 | + | | | └── robots.txt |
| 62 | + | | ├── src |
| 63 | + | | | ├── App.css |
| 64 | + | | | ├── App.js |
| 65 | + | | | ├── App.test.js |
| 66 | + | | | ├── index.css |
| 67 | + | | | ├── index.js |
| 68 | + | | | ├── logo.svg |
| 69 | + | | | ├── serviceWorker.js |
| 70 | + | | | └── setupTests.js |
| 71 | + | | └── yarn.lock |
| 72 | + | └── webapp # create-react-app structure folder |
| 73 | + | ├── README.md |
| 74 | + | ├── package.json |
| 75 | + | ├── public |
| 76 | + | | ├── favicon.ico |
| 77 | + | | ├── index.html |
| 78 | + | | ├── logo192.png |
| 79 | + | | ├── logo512.png |
| 80 | + | | ├── manifest.json |
| 81 | + | | ├── microfrontends |
| 82 | + | | | └── meta.json |
| 83 | + | | └── robots.txt |
| 84 | + | ├── src |
| 85 | + | | ├── App.css |
| 86 | + | | ├── App.js |
| 87 | + | | ├── App.test.js |
| 88 | + | | ├── index.css |
| 89 | + | | ├── index.js |
| 90 | + | | ├── logo.svg |
| 91 | + | | ├── serviceWorker.js |
| 92 | + | | └── setupTests.js |
| 93 | + | └── yarn.lock |
| 94 | + └── yarn.lock |
| 95 | +``` |
48 | 96 |
|
49 | | -## CLI Docs |
| 97 | +## Development |
50 | 98 |
|
51 | | -Contained on @cmra/cli package. |
| 99 | +First of all, check our [contributing guide](https://github.com/matheusmr13/create-micro-react-app/blob/master/CONTRIBUTING.md). |
| 100 | +If you have any questions just [open an issue](https://github.com/matheusmr13/create-micro-react-app/issues/new)! |
52 | 101 |
|
53 | | -``` |
54 | | - npx @cmra/cli --help |
55 | | - npx @cmra/cli start --help |
56 | | - npx @cmra/cli build --help |
57 | | - npx @cmra/cli create --help |
58 | | -``` |
| 102 | +--- |
59 | 103 |
|
60 | 104 | Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/) |
61 | | - |
62 | | -## Next steps |
63 | | - |
64 | | -- Rename packages |
65 | | - - Create "cmra" namespace |
66 | | - - @cmra/cli -> "@cmra/cli" |
67 | | - - react-microfrontend -> "@cmra/lib" |
68 | | - - marketplace-frontend -> "@cmra/web" |
69 | | - - marketplace-backend -> "@cmra/server" |
70 | | - - export models from backend -> "@cmra/model" |
71 | | -- Make it easy to deploy |
72 | | - - server -> create package to extend -> `import Server from '@cmra/server'; Server.run();` |
73 | | - - frontend -> create package to extend -> `import Webapp from '@cmra/web'; await Webapp.build(); Server.addStatic('build');` |
74 | | - - docker image with all together |
75 | | -- Permission |
76 | | - - get things separate between users (currently works if you create your own environment) |
77 | | -- Deploy |
78 | | - - Schedule deploy to date |
79 | | - - Recurrent deploy |
80 | | - - Integrations to publish final package to: |
81 | | - - Amazon s3 |
82 | | -- Package management integration, get packages from: |
83 | | - - NPM |
84 | | - - Amazon s3 |
85 | | - - Gitlab? |
86 | | -- Extends command line |
87 | | - - Application template (create-micro-react-app --from <APPLICATION_UUID>) |
88 | | - - CLI for general uses such as preparing a next deploy |
89 | | -- Flux between multiple namespaces |
90 | | - - Define an order for each namespace (such as alpha->beta->main) |
91 | | -- Expand namespaces |
92 | | - - Create hidden "next deploy preview" |
93 | | - - Integrate react-microfrontend with setting namespaces |
94 | | -- Custom microfrontends |
95 | | - - Set microfrontends meta infos (nav bar label? url? custom field) |
96 | | - - Lazy loading |
97 | | - - Changelog by version () |
98 | | -- Notifications |
99 | | - - Changes to next deploy on namespace |
100 | | - - Next deploy started (and done) |
101 | | - - Integrations: |
102 | | - - slack |
103 | | - - email |
104 | | -- Cannary deploy Vs Quality checks |
105 | | - - Define some rules to get things checked and move to next deploy (really next to flux iniciative) |
0 commit comments