loading...

VueJS+ExpressJS CRUD & Cookbook

aisone profile image Aaron Gong Updated on ・4 min read

Introduction

Cookbook Rule #1 - Do Not Build Up Technical Debt

As developers we create different applications. Along the way we come up with various code recipes such as using JWT, GraphQL subscriptions, working with ORMs, drawing a K-line chart, etc.

These recipes are used in actual production environments, solving real world problems.

And best of all... the recipes can be reused in other projects and applications.

Hence, it is useful to keep these recipes in your "Cookbook" to be recalled when needed. The cookbook and recipes must be continuously improved along your journey as a developer:

  • adding new useful recipes
  • keeping existing recipes updated
  • improving on existing recipes (cleaner code, applying best practices)
  • removing obsolete recipes

This article is a short introduction to a VueJS+ExpressJS Cookbook that originally began life as a CRUD Component.

If you just want to dive in, visit the vue-crud-x project.

GitHub logo ais-one / vue-crud-x

Vue+Express Cookbook & CRUD Component

npm version npm Sonarcloud Status Known Vulnerabilities MadeWithVueJs.com shield

TL;DR ExpressJS & VueJS Web App Cookbook, Customisable CRUD Library, Cloud Container Deployment

VUE-CRUD-X - WHY & WHAT

Writing same code each time you work on a new application? Trouble keeping the libraries updated? Many fixes when dependency version changes?

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!

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…


The Cookbook

Recipes

Below are two separate lists of available and planned recipes.

I shall not go through each one in detail to keep this article short. Instead, you can see how things work by building and running the code.

Available Recipes:

  • Apollo GraphQL Client
    • re-fetch queries
    • caching
    • optimistic UI
  • Authentication
    • 2FA login
    • JWT, refresh tokens
    • social logins
    • SAML
  • Multi-part forms
    • File uploads
    • Webcam
    • Canvas inputs
  • OpenAPI documentation
  • Web components
  • Firebase
    • authentication
    • cloud storage
    • firestore
  • Mongo Stitch
  • ORM & Query Builder
  • cors, body parser, helmet, connect-api-history-fallback
  • SPA, SSR, Static Site using NuxtJS

Planned Recipes:

  • Charts
  • Maps
  • Logging
  • Automated testing (to research on graphql testing, automated API generation)

Considerations

We should bear in mind the following considerations which will have impact on code quality when writing the recipes in our cookbook:

  • Reduce dependencies (especially in UI Framework)
  • Clean and maintainable code
  • Performance, stability and scalability
  • Best practices

Note For Frontend Developers.

There are 3 ways to structure your application

  • Single Page Application (SPA)
  • Server-Side Rendered (SSR)
  • Static Site

The table below shows the comparison between the 3 ways. Personally, I would prefer to use either SPA or Static Site.


The CRUD Component (Refactor)

The first iteration of the CRUD Component was developed in late 2017 due to a desire to create a better CRUD component using VueJS and Vuetify 1, This article was written about it.

The component was improved and new features were added along the way, introducing complexity and ambiguity.

With the coming release of Vuetify 2 (3Q 2019), there were many breaking changes and it was an opportunity for a code refactor to improve and do better.

One important lesson was to design the component to have as little dependency on the UI framework. Easier usage, cleaner code and better documentation were also other improvement goals.

The refactoring led to breaking changes in our CRUD component. However, the resulting code is much cleaner and has less dependencies. Let's take a quick look and explore further.

Running The CRUD Component Example

Run the following steps to clone, install and run:

git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x
cd backend
npm i
npm run i:spa
npm run i:ssr
npm run init-db
npm run dev:spa
# for SSR - npm run dev:ssr
# for static content (1) npm run dev (2) see example-ssr/README.md on generating and serving static content

You will be presented with a login screen like the one below:

Login Screenshot

Note:

  • Recaptcha and 2FA is disabled
  • There is Firebase & Mongo Stitch login available but you must sign up first.

To login to protected pages, type test for both user ID and password, then click on the Sign In button

You will then be brought to the Dashboard. Clicking the menu on the left and selecting Books will bring you to the screen below where you can try the CRUD out:

Table Screenshot

Using The CRUD Component

An example file (from vue-crud-x/example-spa/pages/Author.vue) for configuring and using the CRUD component is shown below.

Please look at the gist below and documentation on the CRUD component here, to get a better understanding on the usage.


Hope you find this cookbook, its recipes and CRUD component 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.

Posted on by:

aisone profile

Aaron Gong

@aisone

VueJS, ExpressJS, MongoDB

Discussion

markdown guide
 

"Run the following steps to clone, install and run" - this is not enough!
Can you more explain the prerequisites?

 

Hi,

Sorry give me a few days, There is some work being done on develop branch and I will merge it to master.

I am cleaning up the structure and documentation... the coming update is attempt on ease of re-use of both frontend and backend common components... so...

One can use it to build multiple applications with different business use cases.

 

That would be great. I was able to log in using Firebase login but then wasnt sure what I am suppose to do next.... I am not sure how to set up any of the dbs (like how do I configure it to use PostgreSQL, MongoDB, etc? and am I suppose to run Redis? Maybe best thing would be to put this in a Docker file and have everything ready to go?

Hi...

Documentation and update is still in progress. Please ignore the Firebase and Mongo Stitch part. The project aim is to have components that are not locked into a single vendor.

For local only install, it will use SQLite as the database. Nothing needs to be installed except Node & NPM.

I am working on deployments also, Docker, Kubernetes, Google App Engine... this is one of the missing pieces in the puzzle...