version
0.8.0-SNAPSHOT

Template Webpack FEND App

Intro

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

Demo:

• Simple web interface for storing values in the Browser Local Storage.
• Local Storage - Todo List
• Partial Example (HTML/Javascript in modular files)

Dependencies/Frameworks

Node v12+ and npm

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

• Webpack + Loaders -- managing the build process
• Babel -- compiling newer ECMA2016+ into browser-capable javascript
• FlowJS -- adding types to javascript
• ESLint -- enforcing javascript code style
• Webpack Dev Server-- rapid development with hot reloading
• Mocha, Chai, and Sinon -- unit testing
• Karma -- managing tests in different browsers
• EsDoc -- creating easy javascript documentation
• PostCSS -- parsing and compiling css files
• HTMLHint -- parsing and enforcing HTML standards
• Tailwind - Utility-first CSS Framework
• Zondicons - Free SVG Icon Library
• Handlebars - HTML Templating Engine

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
   • or http://localhost:3030/docs/ to see the documentation

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

npm run start start production

npm run stop stop production

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

Links

• Code of Conduct
• Contribute
• Doc Site
• Wiki
• Notes

Contributors

• Devlin Junker (Me!)