Home Manual Reference Source Test Demo

Template Webpack FEND App

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

Demo:

Dependencies

Node v12+ and npm

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

Development

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 reference in src/entry.js (for up your application
    • add additional javascript entry points 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

Tests/Running

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

TODO

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

npm run clean ... TODO: clean the workspace

TODO

Application

Notes/Ideas