Everything you always wanted to know about the Ueno Developer’s Starter Kit
Why we use it, what’s in it and what’s not.
On my way to the Ueno developers summit in Reykjavík, I thought it might be a good idea to write a few words about why we went to the trouble of creating our own starter kit, what’s different about it, and why we keep it open source.
From day one, we’ve been using React for most of the projects we’ve crafted at Ueno. With every new project, we used to copy what we did on the previous project, remove everything but the boilerplate, add a few tools and refactor the code a bit. Rinse and repeat.
Eventually we created our first simple starter kit so we wouldn’t have to go through this painful procedure every time we started a project, with the goal of getting our developers up and running faster with all the tools and libraries they needed.
As you probably know, Facebook also created their own starter kit,
create-react-app, developed by the React community, and maintained by Facebook. It includes all the basics needed to get started, which is why it’s used by a lot of developers.
So why didn’t we just use that?
The answer is that even though create-react-app has been great add-on for the community — we’ve even used it for some projects — it’s missing a few crucial features that we need for our development workflow to be able to work fast, structured and efficient, the two most important being server-side rendering, and CSS Modules or CSS pre-processors:
CSS modules and CSS pre-processors: These are very important to us. We are design-first-oriented front-end developers, and we want to have all the tools available to be able to maintain and apply those beautifully designed pixels to the screen.
Another thing we need that isn’t included in create-react-app is code linting to predefined standards. It reduces overhead of adjusting to the code, keeps thing tidy and clean. We include eslint, extending the airbnb style guide and stylelint with our own set of rules. Optionally we have available git hooks that run the linting operation before committing to GitHub.
Two dependencies that are absolutely crucial to us (that create-react-app actually does include) are Webpack and Babel:
Webpack is a bundler that takes all your code and packs (or compiles) it into single files. Webpack supports loaders that work by applying logic to files that go in to the bundler, and plugins that are applied usually on the code coming out of the bundler.
All in all there are over 90 dependencies in the Ueno starter pack … we try our best to keep them up to date.
We encourage anyone who has needs similar to ours to check it out, use it, and contribute to it if they think something’s missing.
And if you just want to get started kit, the quickest way if you have already git and node is this:
git clone http://github.com/ueno-llc/starter-kit-universally project
npm run dev
Head to the project’s README for more information.
Thanks for reading!