Vuejs-Cookbook 0.6.10: vue-crud-x - Extensible crud component using Vuetify layout, other than the usual page, sort, filter, it is able to do nested CRUD, custom forms, filters, operations.

icon
Latest Release: 0.6.10

Version 0.6.10

  • [chore] update packages & cleanup & work on improving documentation

Also includes the Version 0.6.9 changes below

  • [chore] update packages & cleanup & work on improving documentation
  • [js-web/react-admin] update to react-router-dom v6
  • [js-node/nest-microservice] removed, refer to the github projects instead in README.md
  • [chore] updated list of useful VS Code plugins README.md
Source code(tar.gz)
Source code(zip)

npm version npm MadeWithVueJs.com shield

WHY

Always Remember Rule #1 - Do Not Let Technical Debt Build Up

  1. Ever wondered why you keep rewriting almost the same code when you work on full-stack applications?

  2. Do you have trouble keeping the libraries in your different applications?

  3. How often and how long do you spend fixing things when there is a version change in a dependency?

Well... what started as a CRUD component for VueJS has grown to a full-stack app development cookbook, and further expanded into a way of building and maintaining multiple full-stack applications of different use cases with as little waste as possible, aiming to address those 3 issues above as much as possible!

NOTICES & UPDATES

Latest Version 0.3.1 - Released 2020 May 18 1230 +8GMT

vue-crud-x 0.3+ Reorganize folders and structure, for ease of developing and maintaining multiple applications.

vue-crud-x 0.2+ uses Vuetify 2. Due to many breaking changes from Vuetify 1 to 2, we took the chance to make things better by designing component to be more UI framework agnostic (reduce dependencies!), easier to use, improving code quality, documentation and supporting article.

vue-crud-x 0.1 and Vuetify 1 will be supported under the v1 branch. You can refer to the v1 article.

WHAT IS VUE-CRUD-X

TL;DR ExpressJS & VueJS Web App Cookbook And A Customisable CRUD Library

A VueJS CRUD component which is customisable and extensible to suit more complex situations such as Nested CRUD, custom filters, forms, use of GraphQL or REST to access various datastores. Vuetify is used for frontend UI components but can be changed to alternatives such as ElementUI (with some effort)

Over time, the example projects to show the use of vue-crud-x have grown to become a cookbook that includes many other useful recipes for use in production ExpressJS and VueJS web applications.

Web App Cookbook Aims

  1. As little technical debt as possible
  2. Ease of maintenance and updates
  3. Scalable in terms of application use cases (from v0.3 onwards)
  4. Scalable in terms of traffic and load (in progress)
  5. Ease of build, test, deployment, CI/CD, etc. (in progress)

CRUD Unique Selling Points

The following differentiates vue-crud-x from other CRUD repositories:

  • Able to do nested CRUD operations (parent table call child table),
  • Server side pagination, sorting & filtering
  • Handle infinite scroll use-case
  • Handle authentication tokens, user permissions
  • Customise table, search filter, CRUD form, validation, CRUD operations (call REST, GraphQL, Firestore, etc.)
  • Inline edit (row level)
  • Auto-configure/generate Search filter and CRUD Forms using JSON
  • Export to CSV/JSON, File/Image Upload
  • Reload & optimization strategy
  • Real-time updates & subscription
  • Overridable methods with default behaviour
  • Emitted events for use by parent component

Other design considerations :

  • i18n, l10n a11y
  • Tree shaking, Lazy loading, Performance
  • Implementation with multiple UI frameworks
    • remove as many UI framework dependent parts as possible
    • indacate parts which should change if other UI frameworks are used
  • Cleaner code with correct use of RxJS, async/await/Promises
  • Prefer static generated sites, over SSR and SPA
  • Automated unit & integration test

QUICK START

  1. Clone the repository, setup and run, using the following commands
git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x
npm run install-libs
npm run install-db
npm run dev:spa
  1. VueJS example SPA Application

Navigate to http://127.0.0.1:8080 to view the VueCrudX demo and example SPA application in development

Login using the following:

  • User: test
  • Password: test
  • OTP (if enabled): if USE_OTP set to TEST, use 111111 as otp pin
  1. View example OpenAPI documentation at http://127.0.0.1:3000/api-docs

  2. View website served by express at http://127.0.0.1:3000

The page contains functional samples and demos you can use to interact with the server

  1. Testing

to run unit & integration test on /api/authors route

TO TEST EVERYTHING PLEASE change describe.only(...) to describe(...) in the test scripts in example-app/tests

npm run test
  1. To serve the VueJS SPA production build

From vue-crud-x folder

cd example-app/web/spa
npm run build

Change the example-app/config/index.js file contents

  //...
  WEB_STATIC: [
    //...
    { folder: 'example-app/web/spa/dist', url: '/' }, // uncomment this
    // { folder: 'example-app/public', url: '/' }, // comment this
    //...
  ]
  //...
  1. Build another application

The new folder should reside inside vue-crud-x directory, e.g.

Use the example-app to see how to build your own application

vue-crud-x/test-app
vue-crud-x/group/test-app1
vue-crud-x/group/test-app2

change package.json property config.app to point folder

e.g. for project def in vue-crud-x/abc/def the value in package.json should be

{
  "config": {
    "app": "abc/def",
  }
}

e.g. for project xyz in vue-crud-x/xyz the value in package.json should be

{
  "config": {
    "app": "xyz",
  }
}

Check the vue-crud-x/example-app/config.js to also see what should be change in the configs

  1. VueJS example Nuxt SSR/Static Application

Run the frontend from one console...

From vue-crud-x folder

cd example-app/web/ssr
npm i
npm run dev

Note: for static content see example-ssr/README.md on generating and serving static content

Run the backend from another console...

From vue-crud-x folder

cd example-app
npm run dev
  1. PWA and vite

TBD

  1. Building & Deployment for Production (WIP)

From vue-crud-x folder

npm run build

runs the following scripts

  • build.sh
  • /build-app.sh
  • /build-web.sh

places everything into vue-crud-x/build folder

node modules are not built

Use ssh, scp to deploy to vm, start / stop, check PM2 (TBD)

Use docker (TBD) -> User kubernetes (TBD)


Project Strcuture

The project structure is shown below

vue-crud-x
+- common/ : common components for frontend and backend
+- common-app/ : common components for backend
+- common-web/ : common components for frontend (including vue-crud-x)
|  +- dist/ : distribution folder for CRUD component
+- docs/ : documentation
+- example-app : an example backend application
| +- config/ : centralized config folder
|   +- certs/ : certificates for HTTPS and JWT signing
|   +- .env.<node_env>
|   +- index.js : home to your configs, can scale by adding folders and files
| +- controllers/
| +- coverage/ (auto-generated by test runner)
| +- deploy/
| +- graphql/ : graphql stuff
| +- jobs/ : message queue jobs
| +- middlewares/
| +- migrations/
| +- models/
| +- public/ : for serving static files - website
| +- routes/
| +- seeds/
| +- tests/
| +- uploads/ : for serving static files - files
| +- web/ : frontend associated to the application
| |  +- pwa/
| |  +- spa/
| |  +- ssr/
| |  +- vite/
| |  +- <your other front end here>
| +- build-app.sh [work in progress]
| +- build-web.sh [work in progress]
| +- docker-compose.yml : docker stuff, [work in progress]
| +- Dockerfile : docker stuff, [work in progress]
| +- ecosystem.config.js
| +- knexfile.js
| +- package.json
| +- README.md
+- <your other project folder here>: (you can use .gitignore in parent directory to hide this project)
+- logs/
+- .dockerignore
+- .eslintrc.json
+- app.js
+- appname.js
+- build.sh [work in progress]
+- index.js
+- jest.config.js
+- LICENCE
+- package.json
+- README.md
+- RELEASE.md

spa

Best for quick start - Please use this to try things out. Everything runs locally

Recipes for a production-ready SPA:

  • Example vue-crud-x usage
  • REST and websockets
  • Graphql (Apollo client, includes authentication, subscriptions, cache, optimistic UI, refetch queries)
  • Login
    • recaptcha
    • Local Email-password login & JWT
      • optional 2FA OTP signin with Google Authenticator
        • setup with USE_OTP=GA in environement files of both the front and backend
        • Check DB seeders for the API key to use, or you can find out how to generate your own
  • rxJs for cleaner code (auto-complete, debounce, fetch latest)
  • upload to cloud provider using signed URLs
  • Other Features
    • Image capture via webcam
    • Signature capture on canvas

backend

Recipes for a production-ready Express server used by example-app/web/spa and example-app/web/ssr:

  • ObjectionJS
    • Sample SQL DB with 1-1, 1-m, m-n use cases, transactions, migrations, seeders,
    • Supports SQLite, MySQL, MariaDB, Postgres, MSSQL
  • MongoDB
    • seeders (migration not needed)
    • watch for real-time collection & document changes
  • Authentication & Authorization
    • JWT (with RSA signatures) & 2FA OTP (using Google Authenticator), Refresh token, token in HttpOnly cookies
    • Local Login, OAuth2 Github Login, SAML ADFS login using Passport
  • CORS, proxy middleware, helmet (securing express)
  • Documentation
    • OpenAPI with JSDoc (enable for local only)
  • Key-Value Store for user token storage on server (can replace with redis in production environment)
  • Websocket (use https://www.websocket.org/echo.html & ngrok to test)
  • GraphQL (use Apollo server)
  • File uploads (to VM or to cloud storage via Signed URLs)
  • Unit Test & Integration Test
  • Logging
  • Message queues

ssr

Recipes for a production-ready Nuxt static sites. Static sites have the same advantages as SSR but are less complex to set up. The only thing to take care of is redirection of unknown dynamic routes:

  • nuxt-auth (removed, use from example-spa instead due to... lack of refresh token, and possibly lack of httponly token capability - as at time of writing 21-11-2019)
    • Social login using Github
  • nuxt-i18n (removed, the documents are more than sufficient for now)
  • SSR & pre-generated Static Web App
    • Handling of 500 and 404 errors
  • Show gotchas of SSR

IMPORTANT NOTE: we use SSR mode, WITHOUT implementing the server side features for efficient debugging of static generated sites.

pwa

  • PWA
  • Push Notifications

vite

Something new...


DOCUMENTATION

vue-crud-x library documentation can be found in docs/VueCrudX.md

Roadmap and Release notes for the library and examples can be found in Release.md

Documentation can be found starting at docs/home.md

vue-crud-x 0.2+ Article VueJS+ExpressJS CRUD & Cookbook

vue-crud-x 0.1 Article Legacy Article (For Historical Reference)

SAMPLE SCREENSHOTS

Login Screen

  • recaptcha

Screenshot

Table & Filter

  • filter
  • pagination

Screenshot

Form

  • custom form slot
  • tags and lazy-load autocomplete
  • click button to child table

Screenshot

Inline Edit

  • inline edit
  • date-picker, select and other controls

Screenshot


Configuration

Refer to example-app/config/index.js

If there are many config variables, you can split it up into other folders and files in the example-app/config folder

You can override the configuraions using .env.[NODE_ENV] files, e.g. .env.development or .env.production in example-app

Making your own backend custom app

You can create your own folder with your custom app, another-example-app-project

Use the example-app as a template

Choosing which backend custom app to run

in package.json, config.app property indicates the name of the app folder

The configuration value is passed into appname.js

The default is set to example-app you can change it to your own project name

Comments

  • Is there a tutorial?
    Is there a tutorial?

    May 13, 2019

    Hello Is there an stet by step article or tutorial for vue-crud-x?

    help wanted hacktoberfest-accepted 
    Reply
  • Question: Possible to auto-generate CRUD components from OpenAPI spec?
    Question: Possible to auto-generate CRUD components from OpenAPI spec?

    Jan 15, 2020

    Hello!

    I just stumbled upon this library, and it feels like it would be immensely helpful in my development process.

    I'm curious, though, whether there's any component of this application that can automatically generate components (or pages, or views, or whatever you call it) for each of the endpoints exposed by an OpenAPI spec document.

    I noticed that the example servers expose their own OpenAPI spec doc, but it appears that the demos use a predefined example data model that isn't automatically generated from that spec.

    Any assistance would be much appreciated!

    enhancement help wanted 
    Reply
  • [Snyk] Security upgrade selfsigned from 1.10.14 to 2.0.0
    [Snyk] Security upgrade selfsigned from 1.10.14 to 2.0.0

    Jan 13, 2022

    Snyk has created this PR to fix one or more vulnerable packages in the `npm` dependencies of this project.

    Changes included in this PR

    • Changes to the following files to upgrade the vulnerable dependencies to a fixed version:
      • js-node/expressjs/package.json

    Vulnerabilities that will be fixed

    With an upgrade:

    Severity | Priority Score (*) | Issue | Breaking Change | Exploit Maturity :-------------------------:|-------------------------|:-------------------------|:-------------------------|:------------------------- medium severity | 658/1000
    Why? Proof of Concept exploit, Recently disclosed, Has a fix available, CVSS 5.3 | Open Redirect
    SNYK-JS-NODEFORGE-2330875 | Yes | Proof of Concept medium severity | 601/1000
    Why? Recently disclosed, Has a fix available, CVSS 6.3 | Prototype Pollution
    SNYK-JS-NODEFORGE-2331908 | Yes | No Known Exploit

    (*) Note that the real score may have changed since the PR was raised.

    Commit messages
    Package name: selfsigned The new version differs by 6 commits.

    See the full diff

    Check the changes in this PR to ensure they won't cause issues with your project.


    Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

    For more information: ? View latest project report

    ? Adjust project settings

    ? Read more about Snyk's upgrade and patch logic

    Reply
  • Bump bull from 3.29.3 to 4.2.1
    Bump bull from 3.29.3 to 4.2.1

    Jan 17, 2022

    Bumps bull from 3.29.3 to 4.2.1.

    Release notes

    Sourced from bull's releases.

    v4.2.1

    4.2.1 (2022-01-17)

    Bug Fixes

    • sandbox: exit if uncaughtException (43dc2e6)

    v4.2.0

    4.2.0 (2021-12-21)

    Features

    • queue: enabled queues to share childPool instance (#2237) (16fdbe9)

    v4.1.4

    4.1.4 (2021-12-14)

    Bug Fixes

    • queue: check redisOptions is available fixes #2186 (071c51d)

    v4.1.3

    4.1.3 (2021-12-14)

    Bug Fixes

    v4.1.2

    4.1.2 (2021-12-14)

    Performance Improvements

    • speed up performance of queue.clean when called with a limit (#2205) (c20e469)

    v4.1.1

    4.1.1 (2021-11-16)

    Bug Fixes

    v4.1.0

    4.1.0 (2021-10-31)

    ... (truncated)

    Changelog

    Sourced from bull's changelog.

    4.2.1 (2022-01-17)

    Bug Fixes

    • sandbox: exit if uncaughtException (43dc2e6)

    4.2.0 (2021-12-21)

    Features

    • queue: enabled queues to share childPool instance (#2237) (16fdbe9)

    4.1.4 (2021-12-14)

    Bug Fixes

    • queue: check redisOptions is available fixes #2186 (071c51d)

    4.1.3 (2021-12-14)

    Bug Fixes

    4.1.2 (2021-12-14)

    Performance Improvements

    • speed up performance of queue.clean when called with a limit (#2205) (c20e469)

    4.1.1 (2021-11-16)

    Bug Fixes

    4.1.0 (2021-10-31)

    Features

    • emit event on job lock extend failure (7247b3b)

    4.0.0 (2021-10-27)

    ... (truncated)

    Commits
    • e394aaf chore(release): 4.2.1 [skip ci]
    • c3b3780 chore(sandbox): disable process.exit eslint rule
    • 43dc2e6 fix(sandbox): exit if uncaughtException
    • 5310cc6 docs(readme): add Bullmq and Bullmq-Pro in table
    • 9635925 chore(release): 4.2.0 [skip ci]
    • 16fdbe9 feat(queue): enabled queues to share childPool instance (#2237)
    • efbf7dc chore(release): 4.1.4 [skip ci]
    • 071c51d fix(queue): check redisOptions is available fixes #2186
    • 7d0c757 chore(release): 4.1.3 [skip ci]
    • 7e7d9cb fix: typo on url (#2195)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    Reply
  • Do you accept pull requests?
    Do you accept pull requests?

    Aug 10, 2018

    We are using your project as part of a vue web configuration, and we have made a series of changes, in appearance and logic.

    Would you be interested in taking the changes to your repository?

    Thanks.

    Reply
  • Small typo in backend/models/users.js file name
    Small typo in backend/models/users.js file name

    Oct 6, 2019

    Hi @ais-one thank-you very much for this component and the example.

    For the example-spa to work the file backend/models/user.js needed to be renamed to backend/models/User.js

    Apologies for not submitting the change myself.

    bug 
    Reply
  • Questions about quick start
    Questions about quick start

    Oct 20, 2019

    Thanks for this project. I like it. Thanks for your work.

    I did this.

      # Settings.
        dir=/srv/test
        proj=vuecrudx
    
      mkdir -p $dir
      cd $dir
      git clone https://github.com/ais-one/vue-crud-x.git $proj
      cd $proj
      cd example-spa
      
      # -------  edit .env  ---------
      cp .env-sample .env
      # -------  edit .env  ---------
    
      # -------  edit .env  ---------
      cp ../backend/.env-sample ../backend/.env
      # -------  edit .env  ---------
      
      npm i
      npm run build-rest
      npm run init-db
      npm run start
    

    It seems to work for many things. I can login and create a book, etc. I get errors in the console. See pics.


    2019-10-20 17_59_42-VueCrudX Example


    2019-10-20 19_03_30-VueCrudX Example


    Are the errors normal? Did I do something wrong?

    Why does it show the "find error. network error. failed to fetch" after about 5 minutes?

    bug 
    Reply
  • example-rest cannot be run : backend/models/user.js has wrong filename / VueCrudX cannot be loaded
    example-rest cannot be run : backend/models/user.js has wrong filename / VueCrudX cannot be loaded

    Jul 19, 2019

    Hi, I've tried to run example-rest but I found some issues

    There was a trivial one on backend project, because on your git repository ./models/User.js was committed as ./models/user.js. Backend runs after changing filename.

    I was not able to fix issue on example-rest, it seems that VueCrudX cannot be loaded

    [email protected]:~/git/vue-crud-x/example-rest$ npm run serve

    [email protected] serve /home/bedinsky/git/vue-crud-x/example-rest vue-cli-service serve

    INFO Starting development server... 98% after emitting CopyPlugin

    ERROR Failed to compile with 1 errors 15:56:33

    This dependency was not found:

    • core-js/modules/web.dom.iterable in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!../src/VueCrudX.vue?vue&type=script&lang=js&

    To install it, you can run: npm install --save core-js/modules/web.dom.iterable

    Reply
  • example spa: relative modules were not found
    example spa: relative modules were not found

    Aug 26, 2019

    Tried to follow the quick start section of README.md. Step npm start exitted with:

    ...
    [1] <s> [webpack.Progress] 94% after seal
    [1] <s> [webpack.Progress] 95% emitting
    [1] <s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
    [1] <s> [webpack.Progress] 95% emitting CopyPlugin
    [1] <s> [webpack.Progress] 98% after emitting
    [1] <s> [webpack.Progress] 98% after emitting CopyPlugin
    [1]  ERROR  Failed to compile with 2 errors18:06:26
    [1] 
    [1] These relative modules were not found:
    [1] 
    [1] * ../../cfg.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/SignIn.vue?vue&type=script&lang=js&
    [1] * ../cfg.json in ./src/firebase.js
    [1] <s> [webpack.Progress] 100% 
    [1] 
    
    bug 
    Reply
  • [QUESTION] - Other UI Libs
    [QUESTION] - Other UI Libs

    Aug 2, 2019

    @ais-one, the latest release looks pretty solid!

    I was wondering how deeply integrated is Vuetify into vue-crud-x? How easy/difficult would it be to use another component library (like iview, element, vue-ant, etc)?

    enhancement help wanted 
    Reply