Welcome to the readme of the Frontend setup.
This is a basic setup for creating (static) html templates and dynamic pages through Express and build on top on other tools like: Node.js, Webpack and Browsersync.
Filled with automated tasks and configuration options through Webpack and Node Scripts. This gives us the options to make use of Webpacks: Hot Module Replacement and the same aliases through Typescript and SASS.
1. Express Server for development (and for production if you want SSR).
2. Routes based upon a simple static router
3. Hot Module Replacement for Typescript and SASS.
4. Dynamic polyfill loader based upon the settings (config/polyfills.js).
5. Auto generating and injection of favicons and manifest.json (manageable through config/favicons.js) Favicons.
6. Modern and modern/legacy webpack bundle.
7. Auto generated Serviceworker through Workbox.
8. Styleguide through Storybook.
9. Typescript is being used within this setup. Typescript Cheatsheet.
10. Linting: prettier, eslint and editorconfig.
Use the setup following these commands.
1. Make sure you're on the right node version. (10.x should work)
2. Install all the npm modules
yarn install
3. Start the project in dev mode
yarn start
- Add testing
- Add documentation
- Fix hmr for @atomify/css (shadow dom)
Future todos
- Create export to static routes