Skip to main content

Posts

Featured

Publishing a React Component Demo to Github Pages

While working on a private project, whenever I write some bit of logic that I think could be useful to others without compromising my project's trade secrets, I like to break it out into a separate component, push it to a new project on GitHub, and then register it on npm to others can find it.  Since my recent work has been mostly front-end, I also like to create a demo of it on GitHub Pages.

My recent projects are all web components built with React.  Since I began using React with Webpack a few months ago, I've fallen into a simple pattern whereby I place all the code for my component in a src/ directory, then I write a simple demo.html and demo.jsx and place those in the top directory of my project.  demo.jsx contains only the logic to bootstrap a React app that contains only my component.

In development mode, webpack will bundle demo.jsx into dist/bundle.js.  demo.html links to bundle.js and has a placeholder where the bootstrap code in demo.jsx will inject the top-level …

Latest Posts

Making Friends with Webpack

Maintaining Anonymity in a Financial App

Deep Dive into React and Redux (and more!)

Getting to Know Gstreamer, Part 4

Getting to Know Gstreamer, Part 3

Getting to Know Gstreamer, Part 2

Getting to know Gstreamer, Part 1