Cookbook Rule #1 - Do Not Build Up Technical Debt
As developers we create different applications. Along the way, we come up with code recipes for ORMs, GraphQL, SSO, charts, OpenAPI, Vue/React SPA, etc.
These recipes solve real world problems and can be reused elsewhere!
The project originally began life as a CRUD Component.
As more and more functionality and codes were added, the code "recipes" were consolidated in a "Cookbook" for future use.
If you just want to dive in, visit the project.
TL;DR ExpressJS, VueJS cookbook, with evergreen recipes and templates (CRUD, CI/CD, QA, Testing, Cloud container deployment, Web Components, ES Modules, etc.) to develop applications faster, while reducing the need for rewrite or refactoring due to changes in dependencies.
Latest Version 0.6.7 - Released 2021 September 25 1030 +8GMT
- cypress e2e testing now also able to run in CI/CD if needed
- add NestJS and ReactJS example (from https://www.udemy.com/course/react-nest-admin but to be modified)
- add node-saml usage
- streaming file download, create pdf, download pdf
Ask for help and recommend improvements here
Considerations for this project are similar to favv. The difference between them are:
- this repo is more of a cookbook and recipes are constantly being improved and updated
- favv backend is written in Python, they can be used to improve on each other
We do not use Typescript in most folders because TS people can understand JS easily, but JS-only…
The recipes must be continuously maintained:
- adding new recipes and removing obsolete ones
- updating and improving existing recipes (e.g. cleaner code)
We also should bear in mind the following which have impact on cookbook users:
- make it easy for users to build and maintain multiple projects based on the cookbook
- make it easy for users to update their projects when cookbook recipes are updated
- easy to deploy using CI/CD, containers
Some available recipes in the cookbook are:
- GraphQL & subscriptions
- SAML2, OpenID Connect, OAuth social logins, JWT, refresh token, 2FA/TOTP
- Multi-part forms, file uploads, signup uploads
- REST, OpenAPI documentation and validation
- Web components - Webcam, Canvas inputs, CRUD table
- MongoDB, replication, transactions, streams
- SQL Query Builders, migration, seed
- cors, body parser, helmet, connect-api-history-fallback
- Automated testing
- Visualization (Charts, Maps, etc.)
Find out how each recipe works by checking out, building, and running the code while referencing the project documents.
There are 3 ways to build a web frontend application
- Single Page Application (SPA)
- Server-Side Rendered (SSR)
- Static Sites
The table below shows the comparison between the 3 ways.
After comparing the feature of each way, the decision was to focus on SPA and Static Sites.
- A CRUD component was developed in late 2017 due to a desire to create a better table editor using VueJS 2 and Vuetify 1.
- A backend project and authentication was added as this was needed. Features and applications start getting added, updated, removed.
- Vuetify 2 (3Q 2019) introduced breaking changes. Hence the need to look at more stable or reduced number of dependencies.
- Backend structure was re-organized to allow same codebase on multiple projects.
- Project was again re-organized when docker and CI/CD had to be taken into account.
- With ES Modules introduced, a no bundler version of the frontend was created. The CRUD UI was also migrated to a use Web Components and Bulma CSS.
- Docker compose files for applications such as DB, Redis, Kafka, Vault were added to support local development.
- Vue3 broke Vue2 plugins, fortunately the project did not use many plugins (it used libraries like leafletJS directly instead). The migration was quite painless.
- Escaped much pain when VueJS and its 3rd party libraries update, e.g.:
- vee-validate v1 -> v2 -> v3 -> v4 (keeps breaking)
- vue-apollo (cannot use for Vue3 yet)
- vue-rx (cannot use for Vue3 yet)
- vuetify v1 -> v2 -> v3 (keeps breaking)
- Experience with a sister project helped in addressing cookbook user considerations stated above.
- Now awaiting npm workspaces in the upcoming NodeJS 16 LTS release... and focus on project stability.
Hope you find the cookbook project, and its recipes helpful.
The cookbook is continuously being updated and improved to remain relevant and useful.
We are looking for contributors and maintainers to continuously make it better.
Thank you for taking your time to read this.