A webapack-based seed project that's a good foundation for modern JS/TS web applications. An attempt to make web development productivd without the lock-in of Big Frameworks!

If you are wondering 'Why one more seed project'? -> Why?

• Creating a workshop

• Typescript - The tsconfig.json includes support for decorators, dynamic loading, and ESNext
• webpack
  • Dynamic modules - Make chunking and dynamic loading part of your design
  • chunking
  • Maps - Maps work with minified production code so that we can develop all the time with code we will use in prod

Most of the features in this seed project are optional. You should also be able to easily add dependencies that are compatible with ES6 and TypeScript.

• lit-html and lit-element - Polymer core libraries to build true web components
  • Workshop setup depends on these two libraries
• Some custom code
  • to extend lit-element
  • to provide a simple router
• Workshop Environment - Isolate features for the sake of documenting, testing, and showcasing. Includes an easy to bootstrap mechanism
• Jest - for unit testing
• TestCafe - for integration and end-to-end testing
• Milligram - a tiny css library (<2k) that you can enhance or replace when/if you find you need something more.
• Simple theming file to share css across components
• Non-trivial example code showing all of the key features

That said I think this is a good stack that should allow to build simple or complex SPAs without any of the complexity and overhead of the big frameworks.

• add ./node_modules/.bin to your path so you can avoid installing anything globally... because we all know it's evil! Do it just in the shell or add it to your ~/.bashrc

  export PATH=./node_modules/.bin:$PATH
  

• ideally use yarn to install the dependencies

  yarn
  

• unit tests - run tests that is isolatable and ideally not needing the DOM.

  yarn test
  

• integration tests - You will need to run either the app or the workshop(see below). Then run the testcafe integration tests. These should be split into web-layer integration and end-to-end tests with a full back-end.

  # not yet implemented
  

• lint - make sure your code is clean and following some reasonable standard.

  yarn lint
  

• building and watching - There are variations here for different purposes... mostly obvious build the app and the workshop

  yarn build
  

  generates dist/app and dist/workshop

  build and watch the app:

  yarn serve.app
  

  build and watch the workshop:

  yarn serve.workshop
  

You then need to run `http-serve dist/workshop` or `http-serve dist/app` to serve any of the builds.

Why not use the webpack server? Because we should test releasable code and avoid the build-test-rebuild anti-pattern

Note: the plan is to eventually share a single build of common code between app and workshop.

• https://www.typescriptlang.org/ - TypeScript
• https://lit-html.polymer-project.org/ - lit-html
• https://lit-element.polymer-project.org/ - lit-element
• https://webpack.js.org - check package.json for names of all plugins and loaders used
• https://www.favicon-generator.org/ to generate the favicon set
• OG meta-tags http://ogp.me/
• https://developers.google.com/web/tools/workbox/ - WPA support
• http://publicicons.org/

• find a decent routing library: complete, no overkill, reasonable size, ES6 I am providing a simple solution
• find a decent XHR library... if it's really needed.
• Make sure I can add angular, react, vue, polymer, web components without having to change the core
• finish WPA support (pulled out for now)
• add unit and e2e testing support
• clean-up sample code (apply tslint fixes)
• problem with uglify and stacktraces in dev mode.
• setup webpack so that components get built only once so they can be shared between the app and the workshop.