Frontend Build Process

Build Process

The frontend is built using GulpJS.

Build Commands

There are 3 commands to build the app which can be run from the main frontend directory:

• $ npm start - This will build the react and sass for development so will include source mappings and will the n watch for file changes and rebuild automatically when any source files are changed. This is the main command to use when developing.
• $ npm run build - This is the same as the previous command except it will finish after the build has finished rather than watching for file changes.
• npm run production - This sets up some environment variables and builds the app for production so does not include source mappings and minifies the output files. This must be run before deploying the app to the staging or production server.

Gulp Files

The main gulp file is gulpfile.js but this is just used to register tasks, the bulk of the code is in the gulp directory. The index.js file loads all the tasks from the tasks folder. It must be passed a list of file names without extensions then each of these will be loaded as a gulp task with that name.

Tasks

• browserify.js - Compiles the jsx files using browserify. The output directory for the file is determined using filepath.js.
• sass.js - Compiles the sass code into css. The output directory for the file is determined using filepath.js.
• watch.js - Defines which sass and jsx files to watch for changes.
• productionBuild.js - Builds both javascript and sass for production by minifying the output and omitting source maps.
• filePath.js - Because there are multiple Django apps for the backend and they may need separate frontend apps the javascript and sass can be built into the static directory of the corresponding Django app. This is defined in the fileModules.json file. Each key corresponds to the name of a file and the value is the django app the compiled code should be put in.