seriousben / Embeddable React Widget
Create an embbedable js widget with react
Stars: ✭ 222
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Embeddable React Widget
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-10.81%)
Mutual labels: webpack, babel
Crate
👕 👖 📦 A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
Stars: ✭ 2,281 (+927.48%)
Mutual labels: webpack, babel
Essential React
A minimal skeleton for building testable React apps using Babel
Stars: ✭ 2,035 (+816.67%)
Mutual labels: webpack, babel
Electron Vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Stars: ✭ 14,610 (+6481.08%)
Mutual labels: webpack, babel
Advanced React Webpack Babel Setup
The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 176 (-20.72%)
Mutual labels: webpack, babel
Are You Es5
A package to help you find out which of your node_modules aren't ES5 so you can add them to your Webpack/Rollup/Parcel transpilation steps.
Stars: ✭ 197 (-11.26%)
Mutual labels: webpack, babel
Reactn
React, but with built-in global state management.
Stars: ✭ 1,906 (+758.56%)
Mutual labels: webpack, babel
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+6239.19%)
Mutual labels: webpack, babel
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (-9.01%)
Mutual labels: webpack, babel
React Tradingview Widget
React component for rendering the TradingView Advanced Real-Time Chart Widget.
Stars: ✭ 170 (-23.42%)
Mutual labels: webpack, babel
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-6.31%)
Mutual labels: webpack, babel
Graphpack
☄️ A minimalistic zero-config GraphQL server.
Stars: ✭ 1,994 (+798.2%)
Mutual labels: webpack, babel
Typescript Webpack React Redux Boilerplate
React and Redux with TypeScript
Stars: ✭ 182 (-18.02%)
Mutual labels: webpack, babel
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-25.68%)
Mutual labels: webpack, babel
Mullet
Mullet Stack: Facebook in the front. Walmart in the back. (React, Hapijs, Node)
Stars: ✭ 194 (-12.61%)
Mutual labels: webpack, babel
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (-29.73%)
Mutual labels: webpack, babel
Koa Web Kit
🚀A Modern, Production-Ready, and Full-Stack Node Web Framework with React
Stars: ✭ 199 (-10.36%)
Mutual labels: webpack, babel
React Isomorphic Starterkit
Create an isomorphic React app in less than 5 minutes
Stars: ✭ 2,326 (+947.75%)
Mutual labels: webpack, babel
Embeddable React Widget
Easy creation of embeddable widgets - https://seriousben.github.io/embeddable-react-widget
Features
- Full ES6/ES2015 support (with Babel)
- Package fonts, css, json, javascripts together into one single package (with Webpack)
- No css styling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
- Bookmarklet supported for fast testing and demonstration
- User theming of widget
- Obfuscating of the widget code
- Unit Tested with code coverage enabled
- Continuous Integration ready
Demo
Running the widget
Install dependencies
$ npm install
Start the development server
$ npm start
... server running at http://localhost:8080/
Run tests
$ npm test
... test output
Production build
$ npm run build
... create files in /dist
Roadmap
- [x] Widget as react app - index.html works (webpack, babel, react)
- [x] React widget (widget builder)
- [x] Webpack changed to output a library
- [x] Add tests
- [x] Add circleci integration
- [x] Add codecov integration for codecoverage
- [x] Production Build
- [x] Minified
- [x] Add greenkeeper
- [x] Bookmarklet
- [x] Reset / Cleanslate / No-conflicts of styles
- [x] Obfuscation
- [ ] Theming support
- [ ] Storyboard and docs
- [ ] Integrate eslint with webpack
Background
What is an embeddable widget?
- Usable using a simple
<script>
tag - Configurable with code
- Themable
Why not in an iframe?
- Interaction between the frame and the hosting page is tricky and not recommended
- You can only display content within the iframe
- iframe and content resizing is impossible
- iframe sandboxing can result in missing functionalities
Read more
Read more about about widgets, react and scoping of css.
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#hot-module-replacement
- https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
- https://github.com/timarney/react-app-rewired
- https://github.com/premasagar/cleanslate
- https://github.com/krasimir/third-party-react-widget
- https://github.com/jenyayel/js-widget
- https://github.com/anakinjay/react-widget-starter
- https://webpack.js.org/guides/author-libraries/
- https://github.com/webpack-contrib/webpack-serve
- https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75
- https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js
- https://github.com/webpack-contrib/purifycss-webpack
- https://medium.com/quick-code/from-zero-to-deploy-set-up-react-stack-with-webpack-3-20b57d6cb8d7
- https://medium.com/dailyjs/building-a-react-component-with-webpack-publish-to-npm-deploy-to-github-guide-6927f60b3220
- http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
- https://github.com/javascript-obfuscator/webpack-obfuscator
- https://github.com/tsileo/embedded-js-widget
- https://thomassileo.name/blog/2014/03/27/building-an-embeddable-javascript-widget-third-party-javascript/
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].