/vue-database

Vue.js demonstrated as a database via the reactivity API

Primary LanguageJavaScriptMIT LicenseMIT

Vue DB

This repo demonstrates a few ways Vue.js could be used as a backend/database. This was used as the demo portion of my talk at VueToronto 2020, Unlocking the Power of Reactivity with Vue 3. You can find the slides at hhttps://slides.com/ospencer/unlocking-the-power-of-reactivity-with-vue-3.

Setup

First, install the dependencies:

npm install

This demo uses an AWS Lambda function to send tweets as Vue effects trigger. If you really want to set that up, you can follow the instructions in the next section, but I'll admit that it's a hassle. If you rather just get going sooner, then just change the Lambda calls in effects.js to console.log statements. You can use a random string for the tweetId.

AWS Lambda + Twitter Setup

  1. Create an AWS Lambda function with an API Gateway.
  2. Use the code in the lambda directory for the Lambda function. After running npm install in that directory, you can run zip -r lambda.zip lambda/ from the root directory and upload the resulting zip file to AWS.
  3. Acquire the Twitter API's consumer key and secret, along with the OAuth token and token secret for the Twitter account you plan to post from. You can learn more about that here: https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a/obtaining-user-access-tokens. You'll need to have a Twitter developer account, along with a Twitter app with consumer API keys. You can create an app here: https://developer.twitter.com/en/apps.
  4. Set the CONSUMER_KEY, CONSUMER_SECRET, OAUTH_TOKEN, and OAUTH_TOKEN_SECRET environment variables for your AWS Lambda function.
  5. Set the LAMBDA_URL environment variable for the node app.

Running the App

You can start the app by running node app.js.

To replicate the demo, you can follow these steps:

  1. POST /users with a new user, with a body resembling { "name": "Joe" }. A Vue effect should trigger, and a tweet should be sent.
  2. DELETE /users/:user with the user you previously created. An effect should trigger, and the tweet should be deleted.
  3. POST /superusers with another user, this time including { "name": "Sally", "online": false }. A tweet should be sent.
  4. PATCH /users/:user with the previous user, and set "online": true". A "background" task should be run and displayed in the console, since the user has come online.
  5. DELETE /purge. The database should be cleared, one new user should be added to the database, and a final tweet should be sent.