https://github.com/steadylearner/react-embed-with-rollup
https://github.com/steadylearner/react-embed-with-rollup
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/steadylearner/react-embed-with-rollup
- Owner: steadylearner
- License: mit
- Created: 2020-06-13T10:44:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T08:46:58.000Z (over 3 years ago)
- Last Synced: 2025-01-11T02:32:55.830Z (over 1 year ago)
- Language: HTML
- Size: 4.14 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Build React umd file with Rollup
Project with CRA to dev and Rollup to build umd lib file to embed.
## How to use it.
- Use your libary component or app in src/ folder.
- Specify entry file in rollup's config input property (`rollup.config.js`). src/index.js is the entry point currrently.
- Test run your bundle by running `yarn start`.
- Run `yarn build` to bundle the production project to embed.
- $node cdn-server/index.js and $node cdn-server/index.js in differnet console.
- Visit localhost:3001/page and edit myapp.init() inside cdn-client/index.html
## Development and Production difference
Inside src/index.js, you will see the code snippet below with comments.
Comment init() part before you make production files to embed with $yarn build
Uncomment init() part when you want to back to develop React project again.
I have attempted to make it work without manual control. But, it wasn't easy to find how in short period of time.
I think that you can easily find the better way.
```js
export const init = (config = "Window") => {
alert(config);
ReactDOM.render(, document.getElementById('root'));
}
init()
```
## Read More
* [How to bundle React app with Rollup](https://medium.com/better-programming/lets-build-react-components-library-part-3-b2e7aec478a2)
* [How to Build React components library](https://medium.com/better-programming/lets-build-react-components-library-part-3-b2e7aec478a2)
* [Base Rollup repository for React](https://github.com/codenaz/create-react-package-tutorial)
* [Resolving modules from browser globals](https://engineering.mixmax.com/blog/rollup-externals/)
* [Import undefined rollup](https://www.google.com/search?client=firefox-b-d&q=import-undefined-when-bundling-ui-library-with-rollup)