Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
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.

Goals

See GOALS.

Contributing

See CONTRIBUTING.

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.