Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Imarc Boilerplate · Netlify Status

This is a front-end development framework that includes a curated set of conventions and libraries, including

View Boilerplate

Framework, not a Library

Unlike traditional libraries, the code included within Boilerplate is scaffolded into your project so you can adapt it to do your needs. It adds a fractal.config.js, webpack.mix.js, as well as everything in the resources/ folder to your project. Learn more about Boilerplate's structure.





Getting Started

On a new or existing project

First, make sure you have a package.json file. If you don't have one, you an create one by running

npm init -y

Once you have a package.json file, you can install Boilerplate:

npm install imarc-boilerplate
npx imarc-boilerplate

The npx command automatically copies fractal.config.js, webpack.mix.js, and the resources/ folder out of node_modules/ into your project for your use. It also updates the npm scripts section within your package.json.

Using the Build (Laravel Mix)

After Boilerplate is installed, you can build your front-end files by running the following:

  • npm run dev will run the the development build (make sourcemaps, don't minify, etc.)
  • npm run watch also runs the development build, but it watches for changes to the source files and automatically re-runs the build when they change.
  • npm run prod will run the production build which is optimized for deployment in production.

Using the Pattern Library (Fractal)

Boilerplate includes Fractal, a pattern library. Within Fractal you can see all the components available within your project. You can see an example here.

  • npm run fractal start runs Fractal's development server. It has hot reloading and will automatically detect when you add or remove components.
  • npm run fractal build has Fractal build a static version of the pattern library, by default into /web/pattern-library/.

You can customize this behavior further by editing either the webpack.mix.js or fractal.config.js files per the Laravel Mix or Fractal documentation respectively.

While working on components within the pattern library, you will likely want to run npm run watch in one terminal while running npm run fractal start in another. The first will watch for source file changes and the second will watch for changes to the twig and compiled files.