Adonis assets compilation

readme.md

Adonis Assets Compilation

This gist shows how to create a flow for assets compilation in Adonis Framework.

Folder structure

Adonis uses public folder for assets, so the best folder structure in that case and for that webpack config file is:

public/
|-- styles/
|   |-- application/
|   |-- manage/
|   |-- application.less
|   |-- manage.less
|-- scripts/
|   |-- application/
|   |-- manage/
|   |-- application.js
|   |-- manage.js
|-- images/

Installation

This config uses webpack as a core. The flow is built around LESS + JS (ES2015) + Babel. Before running compilation install these packages (add --save-dev if you compile assets locally and then deploy):

npm i webpack autoprefixer babel-core babel-loader babel-preset-env babel-preset-es2015 \
      less less-loader css-loader file-loader style-loader url-loader \
      extract-text-webpack-plugin assets-webpack-plugin\
      uglify-js

After install

Copy webpack.config.js to project folder. Copy code from hooks.js to app/hooks.js, in order to define custom edge globals. Add tasks to package.json to scripts section in order to start and process webpack tasks.

"scripts": {
  "build": "mkdir -p public/build && rm -rf public/build/* && webpack -p",
  "watch": "mkdir -p public/build && rm -rf public/build/* && webpack -w",
}

Use

After all is done you can call js and css assets in edge templates by using created global, it will insert specific file defined in assets.json created by webpack in public/build

{{ webpack_asset('manage.js') }}

PS

Work still in progress. Basing on that config you can easily add Vue/React compilation and etc.

hooks.js

'use strict'

const fs = require('fs')
const path = require('path')
const { hooks } = require('@adonisjs/ignitor')

hooks.after.providersRegistered(function () {

  const View = use('Adonis/Src/View')

  View.global('webpack_asset', function (url) {
    url = url.split('.')
    const data = JSON.parse( fs.readFileSync( path.join(__dirname, '..', 'public', 'build', 'assets.json'), 'utf8') )
    const file = data[ url[0] ][ url[1] ]
    const ext = url[1]
    let str = ''

    if ( ext === 'js' ) {
      str = `<link rel="stylesheet" href="${file}" />`
    }

    if ( ext === 'css' ) {
      str = `<script type="text/javascript" src="${file}"></script>`
    }

    return this.safe( str )
  })

})

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin  = require('extract-text-webpack-plugin')
const AssetsPlugin = require('assets-webpack-plugin')

const prod = process.env.NODE_ENV === 'production' ? true : false;
const plugins = [
  new ExtractTextPlugin({ filename: '[name]-[chunkhash].css', disable: false, allChunks: true }),
  new AssetsPlugin({filename: 'assets.json', path: path.join(__dirname, 'public', 'build')})
];

// enable minification if production
if ( prod ) {
  plugins.push( new webpack.optimize.UglifyJsPlugin({ sourceMap: true, minimize: true }) );
}

module.exports = {

  // entry points
  entry: {
    application: './public/scripts/application.js',
    ... other files ...
  },

  // output setup
  output: {
    publicPath: '/build/',
    filename: '[name]-[chunkhash].js',
    path: path.resolve(__dirname, 'public', 'build')
  },

  // sourcemaps
  devtool: 'source-map',
  module: {
    rules: [

      // process less
      {
        test: /\.less$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
          use:[ 'css-loader', 'less-loader'],
          fallback: 'style-loader'
        })
      },

      // process js
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components|components)/,
        loader: 'babel-loader'
      },

      // process fonts & images
      {
        test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
        loader: 'url-loader?limit=10000'
      },

      // process fonts
      {
        test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
        loader: 'file-loader'
      }

    ]
  },

  // plugins
  plugins: plugins
}