https://github.com/dubzzz/react-multi-fronts

Proof-Of-Concept: React app spread accross multiple apps (separate releases)
https://github.com/dubzzz/react-multi-fronts

Last synced: about 1 month ago
JSON representation

Proof-Of-Concept: React app spread accross multiple apps (separate releases)

• Host: GitHub
• URL: https://github.com/dubzzz/react-multi-fronts
• Owner: dubzzz
• License: mit
• Created: 2019-07-01T19:33:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-01T23:04:42.000Z (over 5 years ago)
• Last Synced: 2024-05-02T00:04:38.795Z (7 months ago)
• Language: TypeScript
• Size: 346 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Proof-Of-Concept: React app spread accross multiple apps (separate releases)

## In a nutshell

**1- Setup initial apps**

```sh

create-react-app app-main --typescript

create-react-app app-team-a --typescript

create-react-app app-team-b --typescript

```

**2- Import team app from main app**

In order to do so, we are just relying on pure JavaScript code and disabling some checks done by WebPack and TypeScript:

```jsx

// import the module corresponding to the app of Team A

const AppTeamA = React.lazy(() =>

  //@ts-ignore

  import(/* webpackIgnore: true */ "http://localhost:10001/bundle.js")

);

// use it into our main app

render() {

    // ...

    return Loading...}>

        

    ;

}

```

**3- Bundle team A and team B work**

Check the following files:

- rollup.config.js

- tsconfig.lib.json

## Run it

In a first terminal:

```

cd app-main

yarn && yarn start

```

In a second terminal:

```

cd app-team-a

yarn && yarn build:dist && yarn serve

```

In a third terminal:

```

cd app-team-b

yarn && yarn build:dist && yarn serve

```