Repository files navigation

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)

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, andSinon -- 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

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

1. Download template and update dependencies
2. Create HTML files insrc/
   • 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 insrc/example/ directory)
   • add javascript entry point configs in webpack.config.js
   • create handlebars partials and import, then add to DOM
4. Add CSS files tosrc/ and import in javascript
   • or install CSS libraries with npm and import
5. Usenpm run start-watch to compile and run dev server + tests in watch mode
   • ornpm run start-dev to run the dev server and reload on changes
6. Navigatehttp://localhost:3030/ to see a development version of your web app with Hot reloading
   • orhttp://localhost:3030/docs/ to see the documentation

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 onhttp://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)

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

• Devlin Junker (Me!)