We love our build tools at Sparkbox, but this means our tools are often changing and require a certain level of technical knowledge to use. We have often thought it would be great to have something like Codekit that wraps our Gulp, Grunt, or npm script-based projects. With the power of Electron and React, we were able to rapidly spin up an actual working app that does just this.
Electron
Electron is a framework Github built when they were creating their text editor, Atom. Electron uses the Chromium project to enable developers to use HTML, CSS, and JS to create “native” apps. That’s “native” in quotes because the app is really a web app running in a packaged version of Chrome, but it’s fast enough—and most computers are fast enough—that it works.
Electron has been pretty widely adopted; Slack’s apps are based on it, as is Microsoft’s new Visual Studio.
React (and Webpack + ES6)
We love React, and it was a great fit for the structure of our app (which is really just a bunch of application states). We created a few React components to flesh out the app and went from there. We also used Webpack to bundle those components while also letting us use ES6 via Babel. ES6 has become the default at Sparkbox.
The App
Because we’re using Electron, we can use Node’s awesome FS and path APIs! We used those APIs to figure out if there’s a package.json file in the project and then parsed that file for a start npm script. From there, we used shelljs or the child.spawn API to spin up the project’s local development server, and we were off.
Designing for Native
The biggest paradigm to overcome was matching a native-like feel using web technology. The beautiful thing about building websites is that the browser is pretty much a big canvas where you can do whatever the hell you want. While we were able to harness web technologies for this project, native apps come with different expectations for the user interface and interactions.
Thankfully, Electron is fully aware of this difference and provides tools like window interactions and style options to help provide a natural experience. We could choose whether our app could go fullscreen or not. We were able to constrain the window to a fixed height and width. There was even the option to hide the system window chrome, which we totally used as well!
Beta Release
We have put an initial release of Site Ignite up on Github. We’ve only released a Mac build for now as we continue to work on it. If you want to give it a try on Windows or Linux, clone the repo and create a build!
We hope it inspires people to start experimenting with and creating their own tools and apps with the web skills they already have.
