-
Notifications
You must be signed in to change notification settings - Fork 1
Front End Resources
This document aims to provide some helpful notes on setup and development environments for the avalon-bundle front-end.
All JS should be written in ES6 format. Here's a list of webpacker's default ES6 support.
In the avalon-bundle application, ES6 JavaScript is automatically transpiled via Babel as part of webpacker's default configuration.
Application JavaScript files should be placed in the following directory, as configured through webpack as the entrance point location:
app/javascript
Individual pack files are located in app/javascript/packs. These are the files which are referenced in a Rails view or partial. So these pack files should be small, simple JavaScript files which import .js files from the parent directory. The parent directory should store files which contain actual application logic.
yarn is used for front-end package management, over npm. yarn is also the default package manager for webpacker.
If you'd like to install a new package, from the application root directory run:
yarn add my-awesome-new-package, or if it's a development specific dependency, run:
yarn add -dev my-awesome-new-package
Webpack is made available to the Rails 5.1 environment through the webpacker package.
https://github.com/rails/webpacker
Configuration files/folders for webpack in the Rails 5.1 / webpacker environment are located in:
config/webpack
It appears webpacker's default configuration displays original source files in the browser's dev tools panel.
In Chrome: DevTools > Sources > Network, the location is:
top / webpack:// / app/javascript / src
Here you'll see the application's pre-transpiled ES6 JavaScript, and you can put breakpoints in for debugging or inspection.