| version |
|---|
0.8.0-SNAPSHOT |
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, 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
How to use this template to create a basic Frontend Application:
- Download template and update dependencies
- 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
- 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
- Add CSS files to
src/and import in javascript- or install CSS libraries with npm and import
- Use
npm run start-watchto compile and run dev server + tests in watch mode- or
npm run start-devto run the dev server and reload on changes
- or
- 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
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)
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent