TL;DR ExpressJS & VueJS Web App Cookbook, Customisable CRUD Library, CI/CD, Cloud Container Deployment, Web Components, ES Modules, Vite, AMP
Latest Version 0.4.6 - Released 2021 Feb 21 0430 +8GMT
Docker is required to test
# clone repo and install backend
git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x
# install
cd example-app
npm i
npm i ../@es-labs/esm
npm i ../@es-labs/node
NOTES
# create and seed relational db on SQLite, (delete the dev.sqlite file each time before you run this)
npm run knex # windows
npm run knex:unix # linux or mac
# create and seed MongoDB requires MongoDB - you can skip this but MongoDB examples will not work
npm run mongo # windows
npm run mongo:unix # linux or mac
# run the backend
npm run app # windows
npm run app:unix # linux or mac
Visit the following URLs
See native app above
To run unit & integration test on /api/authors. E2E testing is Work In Progress
TO TEST EVERYTHING PLEASE change describe.only(...) to describe(...) in the test scripts in example-app/tests
npm run test # windows
npm run test:unix # linux or mac
Command to run long process (do take note of caveats, for production need a monitor to handle restart strategy)
npm run process-long # windows
npm run process-long:unix # linux or mac
Command to simulate process triggered by cron (NOTE: may be better to use cron to call API than trigger a process)
npm run process-cron # windows
npm run process-cron:unix # linux or mac
MongoDB required for testing CRUD table to work
For Push Notification
cd example-vite
npm i
npm run dev
Navigate to http://127.0.0.1:8080/ to view application
Login using the following:
You can test PWA Push notifications using Webpush or FCM () on Dashboard page depending on .env. file configuration (need to be on 127.0.0.1).
Click the following buttons in order (see their output in console.log and screen):
cd example-webpack
npm i
npm run serve
Navigate to http://127.0.0.1:8080/webpack to view application with VueCrudX demo
Login is same as Vite SPA
cd example-vite
npm run dev:build # windows
npm run dev:build:unix # linux or mac
example-app should be running
Navigate to http://127.0.0.1:3000/vite/
From vue-crud-x folder
cd example-webpack
npm run build
example-app should be running
Navigate to http://127.0.0.1:3000/webpack/
Refer to link below on how to try out...
example-native for vanillaJS frontend example
example-vite for Vite Vue3 frontend example
{
"config": {
"env": "development",
}
}
The example-app/config/ folder contains the config information.
You can override the configurations using <NODE_ENV>.env.js files, e.g. development.env.js or uat.env.js in example-app/config
If too many config properties, split it to other more and files
vue-crud-x
+- .circleci/ : not used
+- .github/ : github related CICD and automations
+- @es-labs/ : shared libraries
| +- esm/ : es modules
| +- package.json
| +- node/ : nodejs libraries
| +- auth/ : authentication
| +- comms/ : messaging
| +- services/ : db
| +- config.default.js: the base config
| +- config.js: the base config
| +- package.json
+- docker-devenv/ : docker for development environment
+- docs/ : documentation
+- example-amp/ : AMP example (TBD)
+- example-app/ : example backend - See example-app/README.md for Project Structure
+- example-native/ : frontend associated to backend (Vue3 no bundle) - See example-native/README.md for Project Structure
+- example-vite/ : frontend associated to backend - (Vue3 rollup) - See example-vite/README.md for Project Structure
| +- lib/esm-rollup/ : rolled up components for frontend (e.g. apollo.js)
+- example-vite-antd/ : incorporate antdesign vue for rapid dashboard prototyping
+- example-webpack/ : frontend associated to the backend (Vue2 webpack) - See example-webpack/README.md for Project Structure
| +- lib/webpacked/ : webpacked components for frontend (e.g. VueCrudX.vue)
+- k8s/ : kubernetes YAML files (WIP)
+- .editorconfig
+- .gitignore
+- BACKLOG.md
+- CHANGELOG.md
+- LICENCE
+- package.json
+- README.md
+- rest-cmd.http : rest commands for testing
Using github actions
Manually triggered deployment on .github/workflows/manual.yml
selectable inputs
NOTE config/secret contents will not be in repo for CI/CD (so you can get errors), those should be put in VAULT
current secrets
# do not merge
VAULT="unused"
# connect to a hashicorp vault and obtain secrets to merge
VAULT={ url, token } # base64 encoded
# pass in secrets, this way is insecure and not a good way to send in secrets
VAULT={ secrets: { ... all your secrets here } } # base64 encoded