A webkit React starter kit
Over the last couple of days, I’ve been prototyping a web application that I’ve had an idea for ever since jumping into Rails. It was on the backburner for a while until I could figure out how to handle such a dynamic UI… Then React came out. React is providing exactly the functionality I’m looking for—able to use components in a web application without hijacking the entire view (a la Ember), and with a cleaner separation of concerns (looking at Angular here).
It’s been a while since I’ve dabbled in the front end, though—and the landscape has changed. Webpack, Babel, widespread adoption of ES6… I was a bit overwhelmed for a couple of hours catching up. Because of this, I put together a webpack starter kit to easily pull down when prototyping new React projects:
https://github.com/dstrunk/webpack-react-starter-kit
To get started with this project, clone it or download the zip from GitHub. You’ll need a couple of things from NPM, so run the following commands:
npm install -g webpack
npm install -g webpack-dev-server
After installing webpack and webpack-dev-server globally, run the following to install package dependencies:
npm install
From there, you can simply run npm run start
. This command (seen in our
package.json
file)
- starts an
http-server
running our local directory on port8080
- starts
webpack-dev-server
on port8090
which serves thewebpack-dev-server
runtime and ourapp.js
file
… and that’s it! Once setup, you’ll have an environment that allows you to get started quickly with prototyping React applications, and keeps productivity high by watching files and refreshing when necessary.