At Optimist Digital, we work on various different projects — Laravel, Node, React, Universal React, static pages.
This presents a problem because we often end up with different Webpack setups, which are painful to update and result in inconsistencies between our projects. Inspired by Create React App, we set out to create a toolkit that hides the build process into an npm package so it can be reused in different projects and updated easily.
Priorities
We needed a tool that solved the following problems:
- Backend agnostic, and not tied to any specific front-end library
- Keep the application as clean from build related files as possible
- Works with zero-configuration, but allow deep customisation
- Include often-used features out of the box: Babel, SCSS, etc
What are toolkits?
Dan Abramov talked about toolkits in a talk in 2017: the idea of hiding your build process behind a single dependency. This works by giving you a command to generate a minimal boilerplate, and exposing the dev/build scripts through a node module. Updating the build process can then be as simple as updating that single module in your package.json.
In this article we will introduce our own toolkit — Create Frontend — but for more complex use cases it’s not a bad idea to make your own.
Create Frontend — how it works
In a terminal, navigate to your project directory and type the following:
$ npx @optimistdigital/create-frontendYou will now see the following files in your project:
If you want to build a static site, you can make a file such as /client/html/index.html and the assets will be automatically linked. Or, for more complex projects, a /public/build/asset-manifest.json will be generated so you can extract the hashed filenames of your assets.
You’re now ready to start developing by typing npm run dev.
For React apps, you may also run the create-frontend command with an additional flag: npx @optimistdigital/create-frontend --template=react . This generates a React boilerplate and sets up hot reloading.
Closing notes
Additional information about this toolkit can be found in the documentation. It’s quite opinionated to fit our workflows at Optimist Digital, but generic and configurable enough to be used by anyone — we’d love it if you gave it a try. In the future, we might write more about how to make your own toolkit.
