Boilerplate for a frontend project powered by Metalsmith
This is a small project that takes a bunch of HTML, CSS, JS files (
web/) and turns them into a website (
public/). Use it to build your new Reddit webapp, Pokemon tool, Firebase-based webapp, Phoenix app assets, or whatever suits your fancy.
See instructions for:
**Vanilla** (no framework)
mkdir my-project cd my-project curl -sSL https://raw.githubusercontent.com/rstacruz/frontend-starter-kit/master/_extras/INSTALL.sh | bash
See INSTALL.sh to see what it does.
Decca is a React-like library for rendering functional views.
# Run both: curl -sSL https://raw.githubusercontent.com/rstacruz/frontend-starter-kit/master/_extras/INSTALL.sh | bash curl -sSL https://raw.githubusercontent.com/rstacruz/frontend-starter-kit/master/_extras/decca/INSTALL.sh | bash
with **React** + **Redux**
This is a React boilerplate with Redux. It uses riot-route for routing.
# Run both: curl -sSL https://raw.githubusercontent.com/rstacruz/frontend-starter-kit/master/_extras/INSTALL.sh | bash curl -sSL https://raw.githubusercontent.com/rstacruz/frontend-starter-kit/master/_extras/react/INSTALL.sh | bash
in a **Phoenix** project
Experimental! Use this with Phoenix to replace Brunch with Metalsmith. Bootstrap your app with
mix phoenix.new --no-brunch, then:
curl -sSL https://raw.githubusercontent.com/rstacruz/frontend-starter-kit/master/_extras/phoenix/INSTALL.sh | bash
Run in development (or production):
Or build for production (builds
npm run build
What you get
- Extensible everything build pipeline (via Metalsmith)
- Modern CSS via Sass, PostCSS, Cssnext, and Autoprefixer
- Reliable dependency management via Yarn
As well as:
- Support for Pug (as well as any templating language) via jstransformer
- Production-ready tools (JS and CSS compression)
- Super-useful development server (via metalsmith-start)
- Ready to deploy to Heroku (just
What you DON'T get
It's opinionated, but only up to a point. All it does is take
web/ and turn it into
public/ with a production build command (
npm run build) and a development auto-watcher command (
npm start). The rest is up to you.
These things are not included here:
- React (bring your own framework!)
- Testing boilerplate (bring your own testing tools!)
- CSS framework (bring your own Bootstrap/Foundation/etc!)
- ...and so on
web/ is compiled into
- web/assets/ — files compiled into
/public. Anything not "compilable" is simply copied over.
- web/css/ — files @imported by assets/app.scss.
- web/js/ — files compiled by Browserify.
- web/layouts/ – template layouts.
- metalsmith.js — metalsmith configuration.
Metalsmith is a compiler "framework". Its purpose in life is to take a folder (
web/) and turn it into another folder (
It's (kinda) functional. Metalsmith brings together plugins that transform files into new files. A Metalsmith plugin is simply a
map() for your entire project. Your build pipeline is simply a series of
It's also great for development. metalsmith-start is a fantastic development server for Metalsmith. It rebuilds your files instantaneously as you change them, supports LiveReloading, and can run on any Metalsmith project.
It simplifies many things. Everything here is in <100 lines of JS and JSON (including package.json). The only significant pieces here are
metalsmith.js and the Babel config in
Why not X?
You can use Webpack (it compiles JS wonderfully!), but webpack won't copy over any non-JS files (
.pngand so on). It also won't compile into CSS (it'll compile your CSS into JS, yuck).
You can use Brunch (it does the same folder-into-another-folder build style!), but Brunch has its own JS build pipeline, which is very hard to work with. It also doesn't support webpack/browserify.
You can use Gulp (it ties together build tools, too!), but interoperability between Gulp plugins is dismal. Good luck getting real-time file watching working with Browserify. Try to get LiveReload working without losing your hair and you'll see.
## Where to go from here
You can also add support for:
- non-Pug partials
- Other template engines via jstransformer (eg, jstransformer-swig).
- Add tests with your favorite test framework