Skip to content

Development

Jump to bottom
Peter Adams edited this page Jan 18, 2022 · 10 revisions

This page contains information pertaining the development of OWA.

PHP

All third party PHP dependancies are managed via Composer.

Composer

Each module can specify its dependancies graph in its own composer.json file. The composer.json file for each module is automatically merged to create a single top level dependency graph.

  • To install php dependancies run the following from the top level:

composer install

  • To update php dependancies run:

composer update

Javascript

JavaScript builds are managed using npm/webpack and all new Javascript code should be written using ES6 style modules.

npm

Node Package Manager (npm) is used to manage OWA's Javascript dependancies and builds.The npm configuration is stored in package.json.

  • To install the necessary node modules for the project:

npm install

  • To run a development build with live watching of files:

npm start

  • To run a production build:

npm run build

Webpack

We are using Webpack 5 for all Javascript bundling. The configuration is stored in webpack.conf.js.

Src & Dist Paths

  • Javascript source files are stored in modules/base/src.
  • Webpack creates packaged bundles in modules/base/dist. NOTE: The dist/ directory contains build artifacts and therefor should never be checked into Git.

--> IMPORTANT NOTE about the JS tracker location!!!

As of v1.7.4... The location and name of the JS tracker is moving! New location will be modules/base/dist/owa.tracker.js However, in order to not break existing installs webpack will make a copy of the tracker and place in in the old location(modules/js/owa.tracker-combined-min.js`) to preserve backwards compatibility with old tracker code.

Bundles

Webpack will be configured to create a few different bundles:

  • owa.tracker.js: this is a new ES6 version of the entire tracker code base. Source files are now in src/tracker

  • owa.vendors.js: this is a bundle of all the npm managed vendor files imported by ES6 modules/classes.

  • owa.heatmap.js & owa.player.js: these are dynamic import chunks that have been separated out from the tracker bundle because they are only needed for reporting users.

  • owa.reporting-combined-min.js: this is the legacy reporting bundle with all the old jQuery plugins etc. Source files are now in src/reporting/v1. Because this bundle does NOT use ES6 modules we have configured webpack to just do a simple concatenation and minimization of the files. This entire bundle will be replaced with a new v2 bundle that uses ES6 and React.

Clone this wiki locally