Skip to content

Introduction

Usage

After creating frontend project from the template, you will have file structures like this.

frontend
├── package.json
├── src
│   ├── application
│   │   # webpack entry files here
│   │   ├── app.js
│   │   └── app2.js
│   ├── components
│   │   └── sidebar.js
│   └── styles
│       └── index.scss
├── vendors
│   └── images
│       ├── sample.jpg
│       └── webpack.png
  1. You can create entry file in src/application (This project would detect the entry files automatically so you do not need to config Webpack)
  2. Reusable components can be placed at src/components
  3. SCSS and CSS code can be put at src/styles
  4. Static assets such as images, fonts and other files can be put at vendors
$ cd frontend

# install dependency packages
$ npm install

# build js, scss files
$ npm run start

Now you can load bundle js and css files in template

{% stylesheet_pack 'app' %}
{% javascript_pack 'app' %}

Note

  1. You can import multiple entry files using stylesheet_pack and javascript_pack ({% javascript_pack 'app' 'app2')
  2. The javascript_pack would also import dependency files automatically to handle code splitting
  3. You can use attrs to set custom attributes, ({% javascript_pack 'app' attrs='charset="UTF-8"' %})