└── resources
└── assets
└── sass
└── scripts
└── images
You are viewing the legacy version of AdonisJS. Visit https://adonisjs.com for newer docs. This version will receive security patches until the end of 2021.
AdonisJs does not make any assumptions, neither provide tools on how to bundle your frontend assets. The goal of the framework is to provide a productive workflow for backend applications only.
Whereas, in this recipe, we discuss some ways on how you can go about managing and bundling your frontend code.
There are so many build tools in the frontend eco-system that it is quite easy to feel overwhelming. However, webpack (as of now) does manage everything gracefully and is the popular choice for many devs.
Let’s see how to go about storing your assets and then bundling them.
└── resources
└── assets
└── sass
└── scripts
└── images
We should keep all source assets
inside the resources
directory. This directory is already used by Adonis to store the views.
All compiled assets from this directory are placed inside the public
directory.
First, make sure to install webpack as a dev dependency and create the config file.
npm i --save-dev webpack webpack-cli
touch webpack.config.js
module.exports = {
}
Run ./node_modules/.bin/webpack
to build your files.
Use the flag --mode
to choose between production and development.
To start the watcher, make use of --watch
flag.
example
./node_modules/.bin/webpack --mode development
npm i --save-dev style-loader css-loader extract-text-webpack-plugin@next node-sass sass-loader
Add following code to your webpack.config.js file.
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractSass = new ExtractTextPlugin({
filename: 'public/app.css'
})
function sassRules () {
return [
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
}
module.exports = {
entry: [
'./resources/assets/sass/app.scss'
],
output: {
filename: 'public/app.js'
},
module: {
rules: sassRules()
},
plugins: [
extractSass
]
}
Here we make use of sass-loader
and some related dependencies to compile resources/assets/sass/app.scss → public/app.css
.
Require css file from edge
templates.
<head>
{{ style('/public/app') }}
</head>
The scripts setup is done to bundle your frontend JavaScript into a single file. I assume that you want to compile code to ES5 to target all major browsers.
We use babel for ES6 to ES5 transpilation. Also AdonisJs itself does not need babel, it is just for the JavaScript you are writing for the browser. |
npm i --save-dev babel-loader @babel/core @babel/preset-env
function scriptRules () {
return [
{
test: /\.js$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: { presets: ['env'] }
}
]
}
module.exports = {
entry: [
'./resources/assets/sass/app.scss',
'./resources/assets/scripts/app.js'
],
output: {
filename: 'public/app.js'
},
module: {
rules: sassRules().concat(scriptRules())
},
plugins: [
extractSass
]
}
This time we compile resources/assets/scripts/app.js → public/app.js
Require js file from edge
templates.
<head>
{{ script('/public/app') }}
</head>