Home Manual Reference Source Test Demo

version: 0.8.0-SNAPSHOT

Template Webpack FEND App

GitHub License FOSSA Status
GitHub last commit GitHub Workflow Status
Dependency Check by David Dev Dependency Check by David
ESDoc Status CII Best Practices
GitHub issues GitHub issues by-label


Template and Example using Webpack to build a FEND Browser App (with HTML/CSS/JS and Image files).



Node v12+ and npm

See package.json(github) for full list of current dependencies

Quick Setup/Run

How to use this template to create a basic Frontend Application:

  1. Download template and update dependencies
  2. Create HTML files in src/
    • add HtmlWebpackPlugin instances for each new output page in webpack.config.js
    • add svg icons with @svg() using custom svg-pre-loader
  3. Add javascript files and create entry file (reference in src/example/ directory)
    • add javascript entry point configs in webpack.config.js
    • create handlebars partials and import, then add to DOM
  4. Add CSS files to src/ and import in javascript
    • or install CSS libraries with npm and import
  5. Use npm run start-watch to compile and run dev server + tests in watch mode
    • or npm run start-dev to run the dev server and reload on changes
  6. Navigate http://localhost:3030/ to see a development version of your web app with Hot reloading


npm run start-watch to run Karma + Mocha and watch for changes while also opening the Webpack dev server that will recompile the project and reload the webpage on file changes on http://localhost:3030

npm run test-watch to run Karma + Mocha and all of the tests associated with the project and watch for changes on the files to re-run the tests

npm run dev-watch to run the only webpack development server and watch for changes on the files to reload

npm run test-dev to start the unit test runner for debugging unit tests in the browser

npm run test to run all of the unit tests for the application one time

npm run lint to run the linter on src directory

npm run build compile application to public directory

npm run doc to generate static documentation in the doc folder

npm run doc-image to update sourcemap image and static documentation in the doc folder


npm run build-prod ... TODO: create prod config

npm run clean ... TODO: clean the workspace

npm run start start production

npm run stop stop production

npm run restart (should work after start/stop setup)