stowball/elf

Elf is a simple & magical Eleventy starter kit to help you create a project using standard technologies like webpack, Babel and Sass, while also considering ease of use, performance and browser compatibility.

Elf

Elf is a simple, magical Eleventy starter kit to help you create a project using standard technologies like webpack, Babel and Sass, while also considering ease of use, performance and browser compatibility.

If you'd like to know why Elf exists and how best to take advantage of it, read Creating a production-ready Eleventy project with webpack, Babel and Sass.

Getting started

1. Clone or fork this repo: git clone https://github.com/stowball/elf
2. cd into the project directory and run npm install

Running and serving a dev build

npm run dev

Browse to http://localhost:8080.

Running and serving a prod build

npm run prod
npm run serve:prod

Browse to http://localhost:5000.

Technologies used

• Eleventy… obviously
• EJS as the templating language
• Sass for writing CSS
• Babel for transpiling and polyfilling JavaScript
• Autoprefixer for vendor prefixing CSS
• Webpack for compiling the Sass and JavaScript assets
• ESLint and Airbnb's base configuration for linting

Project structure

src/
  _components/
    All UI partials
  _data/
    Eleventy data files
  _layouts/
    Base page layouts
  _pages/
    Each individual page template
  assets/
    css/
      index.scss
      All other scss files
    js/
      index.js
      All other js files
  images/
    All images used
Configuration and build files

Files in assets will be handled by webpack, Eleventy will transform all of the directories with a leading _, and will copy across any images.

Eleventy’s output will be to a dist directory at the root level.

elf's Issues

CSS in imported SASS files is not auto-prefixed

I noticed that if one creates a file such as _foo.scss:

html {
  display: flex;
}

And index.scss:

@import "foo";

Then in dist/assets/main.css, display: flexis not auto-prefixed. However, if you put the same snippet from _foo.scss into index.scss, it is properly auto-prefixed. Do you where this issue may be coming from, or if it is an expected feature? Thanks!

Vendor file not being created because of chunk size being small

Hi! I was having some issues trying to setup a project through netlify. The error was :

ENOENT: no such file or directory, open './src/compiled-assets/vendor.js'

I did some investigating and after tweaking the webpack.common.js by enforcing the vendor file to be created I no longer got this bug. I think this is probably a niche case since the project I'm working on was at the very start but it could be worth adding that to config.

What I ended up with for webpack.common.js:

// Makes Sass faster!
const Fiber = require('fibers');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  // Our "entry" point
  entry: './src/assets/js/index.js',
  output: {
    // The global variable name any `exports` from `index.js` will be available at
    library: 'SITE',
    // Where webpack will compile the assets
    path: path.resolve(__dirname, 'src/compiled-assets'),
  },
  module: {
    rules: [
      // Transpile and polyfill our JavaScript
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        // Setting up compiling our Sass
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
            },
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              // eslint-disable-next-line global-require
              implementation: require('sass'),
              sassOptions: {
                fiber: Fiber,
                outputStyle: 'expanded',
              },
            },
          },
        ],
      },
    ],
  },
  // Any `import`s from `node_modules` will compiled in to a `vendor.js` file.
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};