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.

Martin Azambuja

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.

But when we discovered how much hassle it was to maintain a starter kit with the javascript world moving at the speed of sound, we decided to deprecate our first kit and create a fork of another one we found, react-universally. Very similar to ours, but in active maintenance, react-universally has served us well, and we have contributed a lot to the code.

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:

Server-side rendering: It’s very hard to do, and it’s something most React developers just don’t want to deal with. Our starter kit includes it by default, thus enabling users without javascript to see the page. Time to first meaningful paint is reduced drastically.

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.

Babel is a transpiler, that allows you to write modern javascript that works in the targets you choose (IE8, node, etc.). It also enables JSX support, so writing React gets easier and is clearer to read.

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
cd project
npm install
npm run dev

Head to the project’s README for more information.

Thanks for reading!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.