Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/its-alex/poc-frontends-monorepo
Proof of concept of a monorepo with yarn workspace/lerna/react CRA
https://github.com/its-alex/poc-frontends-monorepo
create-react-app lerna react yarn yarn-workspaces
Last synced: 3 days ago
JSON representation
Proof of concept of a monorepo with yarn workspace/lerna/react CRA
- Host: GitHub
- URL: https://github.com/its-alex/poc-frontends-monorepo
- Owner: Its-Alex
- Created: 2020-05-02T23:39:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-05-06T06:55:15.000Z (over 4 years ago)
- Last Synced: 2025-01-01T20:35:38.045Z (9 days ago)
- Topics: create-react-app, lerna, react, yarn, yarn-workspaces
- Language: JavaScript
- Size: 251 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend monorepo
In this repository, I tried to set up a monorepo to use React
[CRA](https://github.com/facebook/create-react-app) with shared
components and a storybook.
Currently, an issue is opened on
[`create-react-app`](https://github.com/facebook/create-react-app/issues/1333)
I hope that it will be closed one the day.
## Why CRA
Using [`Create React App`](https://github.com/facebook/create-react-app) is the
best way to follow react update and keep compatibility with new features without
strong knowledge for webpack.
In this repo, I tried to touch the CRA config as little as possible.
## What about @react-workspaces/react-scripts
I know that there is another possibility with
[`@react-workspaces/react-scripts`](https://www.npmjs.com/package/@react-workspaces/react-scripts)
the problem is that I don't know what is done inside it and how close to CRA it
is so I prefer to custom a little bit CRA configuration.
## Goals
- [X] Create react app that use shared library from another project
- [X] Hot reloading
- [X] Watch
- [X] Build
- [X] With asset (image)
- [X] Storybook that use shared library from CRA and another project
- [X] Hot reloading
- [X] Watch
- [X] Build
- [X] With asset (image)
- [X] Using view from React CRA app
- [X] Using component from shared library
## React CRA
With lerna, I add dependencies to `common` in `my-app` that allow requiring
files from `common`.
### Hot reloading
I use [`craco`](https://github.com/gsoft-inc/craco) with
[`get-yarn-workspace`](https://github.com/viewstools/yarn-workspaces-cra-crna#readme)
to override CRA configuration and add others repositories to `babel-loader` in
[`craco-config.js`](./packages/my-app/craco.config.js).
## Storybook
I do the same thing that with CRA, storybook has functions to overrides CRA configuration.
## Getting started
Install dependencies:
```
$ yarn install
```
Start applications:
```
$ yarn lerna run start
```
See app:
- Go to `http://localhost:3000`
- Go to `http://localhost:9009`
Build applications
```
$ yarn lerna run build
```
# Source links
- https://dev.to/shnydercom/monorepos-lerna-typescript-cra-and-storybook-combined-4hli
- https://github.com/facebook/create-react-app/issues/1333#issuecomment-587415796