chiubaca/vue-netlify-fauna-starter-kit

A serverless stack for building CRUD applications with authentication baked in.

Vue - Netlify - Fauna

A serverless stack with authentication ready to go!

This serverless stack uses Vue for the front-end, Netlify for APIs (via Netlify Functions) and Fauna for persistent data storage.

At the time of publishing this, Netlify and Fauna offer generous free tiers which means anyone can get started, deploy and host this completely free.

Prerequisite project setup

Don't skip these steps ❗❗

1. If you don't have a Fauna account yet, sign up here. Create your first db and generate a server key in just few clicks.

2. With your server key ready, you can easily clone this repo and deploy this app in a few seconds by clicking this button:

3. Enable Identity on your newly deployed Netlify site otherwise signups and logins wont work. Also remember to enable Google as an External Provider. This is can found in "Settings & Usage" in the Idenity tab, then scroll down to "External Providers" and select Google in the add providers drop down.

It will only take a few moments for Netlify to deploy the site, once ready, click on your assigned URL and you have an fully functioning CRUD application with persistent storage and a login system all ready to go!

Demo site

Further development setup

npm install

Compiles and hot-reloads for development via Netlify Dev. (Make sure you have Netlify Dev installed with npm install netlify-cli -g)

npm start

Builds the app and deploys to Netlify on a preview URL

npm run deploy:preview

Builds the app and deploys to Netlify on your master URL

npm run deploy:prod

Runs unit tests with Jest

npm run test:unit

Breakdown

I wrote a blog explaining how everything works:

• https://dev.to/chiubaca/build-a-serverless-crud-app-using-vue-js-netlify-and-faunadb-5dno

Why This Exists

I built this template because pretty much all my side projects need persistent data storage and a login system. It was also a great opportunity to learn more about the Netlify eco system including Netlify Functions, Identity and Netlify Dev. Full credits need to go to the following repos which I have effectively mashed together.

• https://github.com/shortdiv/gotruejs-in-vue
• https://github.com/fauna/netlify-faunadb-todomvc
• https://github.com/netlify/netlify-faunadb-example

vue-netlify-fauna-starter-kit's Issues

Netlify CLI 2.48 is breaking dev environment

Issues appears to be related to netlify/cli#850
npm start is failing with

Error: "port" and "targetPort" options cannot have same values. Please consult the documentation for more details: https://cli.netlify.com/netlify-dev#netlifytoml-dev-block
    at module.exports.serverSettings (C:/Users/alexc/AppData/Roaming/npm/node_modules/netlify-cli/src/utils/detect-server.js:108:13)
    at DevCommand.run (C:/Users/alexc/AppData/Roaming/npm/node_modules/netlify-cli/src/commands/dev/index.js:413:26)    at async DevCommand._run (C:/Users/alexc/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/@oclif/command/lib/command.js:43:20)
    at async Config.runCommand (C:/Users/alexc/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/@oclif/config/lib/config.js:172:9)
    at async Main.run (C:/Users/alexc/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/@oclif/command/lib/main.js:22:9)
    at async Main._run (C:/Users/alexc/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/@oclif/command/lib/command.js:43:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `netlify dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\alexc\AppData\Roaming\npm-cache\_logs\2020-05-02T14_12_46_890Z-debug.log

Updating user account is throwing a Vuex Error

Repro steps

1. go to Profile
2. update user account with a new password
3. inspect console and there is a large stack trace

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>) vue.runtime.esm.js:619
Error: "[vuex] do not mutate vuex store state outside mutation handlers."
    assert vuex.esm.js:90
    enableStrictMode vuex.esm.js:789
    VueJS 4
    _saveUserData user.js:140
    update user.js:53
vue.runtime.esm.js:1888
    VueJS 7
    _saveUserData user.js:140
    update user.js:53

Cause
Not 100% sure, but running GoTrue.update in the auth vuex module is probably udpating the GoTrueAuth instance directly and not via Vuex mutation.

Solution
Might have to make another instance of GoTrue, capture the results of GoTrue.update, then push that result back into Vuex state via a mutation

Update Readme to inlclude link to blog post

Changing user accounts is a bit buggy

Issue:
if logged in already and signing in with another account the previous users journals still persist.

Solution
perhaps should create a mutation to clear out the existing the user state if there is any data in there.

edit
Thinking about this some more, this is an issue which can be resolved with better UI and some simple route guards in vue-router.

• once logged in, you should not be able to able access the signup/login page.
• you must have to explicitly logout, before you can sign-in or create a new user.
• if you are already logged in you should be routed to the journal page
• if you are not logged in, route to the login/signup page

injecting faunadb secret as env var via .toml build command

This is just a quick change to keep faunadb secret out of any files in repository; easing Netlify's github-to-netlify continuous integration.

(can do a pull request if you like as well)

Steps are below, but for reference: Netlify docs on injecting environment variables

Step 1/4 - netlify.toml

in netlify.toml
change
[build] command = "npm run build

to

[build] command = "sed -i s/FAUNADB_SERVER_SECRET/$FAUNADB_SERVER_SECRET/g netlify.toml && npm run build"

then also in netlify.toml change
[template.environment] FAUNADB_SERVER_SECRET = "your FaunaDB server secret"
to
[template.environment] FAUNADB_SERVER_SECRET = ""

Step 2/4 - .env

in local environment add a .env with
FAUNADB_SERVER_SECRET=youractualkeyfromfauna

(i suppose this could be part of template as a file like template.env.txt that has FAUNADB_SERVER_SECRET=yourkeygoeshere and instructions to rename it, etc.)

Step 3/4 - .gitignore

in .gitignore add .env to the # local env files block

Step 4/4 - Netlify UI

in Netlify UI go to Settings>Build and Deploy>Environment
and a variable with key FAUNADB_SERVER_SECRET and value of your key from Faunadb.

After that

All appears to be working as intended for both local dev, npm start, and for the github linked deploy.
Cheers, hope it's useful.

ESLint/Prettier Terror

Major problems compiling locally due to ESLint/Prettier errors, but I couldn't find the usual config files in this repo. Any guidance?

Thanks for doing this helpful tutorial

dest.end is not a function

Hi, I'm trying to run this demo locally but getting this error:

$ npm start           
Recreating fauna-starter ... done
Attaching to fauna-starter
fauna-starter | 
fauna-starter | > [email protected] start /srv/app
fauna-starter | > netlify dev
fauna-starter | 
fauna-starter | ◈ Netlify Dev ◈
fauna-starter | ◈ Starting Netlify Dev with vue-cli
fauna-starter | Waiting for localhost:3000.
fauna-starter | ◈ Functions server is listening on 34567
fauna-starter | /usr/local/lib/node_modules/netlify-cli/node_modules/netlify-redirector/lib/redirects.js:116
fauna-starter |       throw ex;
fauna-starter |       ^
fauna-starter | 
fauna-starter | TypeError: dest.end is not a function
fauna-starter |     at ReadStream.onend (_stream_readable.js:679:10)
fauna-starter |     at Object.onceWrapper (events.js:420:28)
fauna-starter |     at ReadStream.emit (events.js:326:22)
fauna-starter |     at endReadableNT (_stream_readable.js:1226:12)
fauna-starter |     at processTicksAndRejections (interna

I'm generally following the instructions (using [email protected] for instance), except that I'm running under docker.

I'm not sure where to begin looking for the problem. When searching for the error, I see other people have got it, but the solutions don't seem applicable.

Use Netlify FaunaDB Addon

see https://docs.fauna.com/fauna/current/start/netlify

using netlify addons:create fauna as part of the inital setup could improve the inital bootstrapping of the project...

Form Verification Rules

There needs to be some better form verification before a user can submit form in various parts of the app.

1. Sign up Form

• Username cant be empty
• Password cant be empty

2. Update User Account

• username cant be empty
• if password is empty, note to user that the password will not be changed

Bootstrap db on inital deployment - further improvements

• currently if you mess up the fauna db schemas e.g delete one by mistake, the bootstrap-db script isnt that intelligent and doesnt know how to rebuild the missing schemas

• adding in new schema to the script wont be detected, unless you delete all of the existing schemas from fauna and and redeploy the app.

JWT storage

Another question for you Alex (feel free to move/delete from here if more appropriate): Can you say a few words about how the auth JWT tokens are being stored with this approach? localStorage, regular cookie, HttpOnly? Any security matters to be conscious of if using this approach in production?

Email verification not working when user is already signed on

Repro steps:

1. signup/ login via google and check there is a user object
2. signup via email
3. click on verifiation email
4. email verification script does not kick in, no errors in console

Workaround

• clear localstorage then refresh page, verification logic kicks in.

Solutions
unsure, likely to be an issue in src\helpers\authorise-tokens.js

Problems unit testing auth vuex module

Getting an error : TypeError: Cannot read property 'getters' of undefined

Readme Improvements

1. need to explain how to get faunaDB server key

2. need to explain how to enable netlify identity

`npm run deploy` not working

Running npm run deploy does not work in a dev environment. The CLIfails with the error -

"Attempting to create the DB schemas...
Required 'FAUNADB_SERVER_SECRET' environment variable not found."

Likely becasue it is not in a Netlify context so it cant get FAUNADB_SERVER_SECRET. User might need to set the FAUNADB_SERVER_SECRET with with export in mac/linux or set if in windows first,

Cant create new Journal and Posts

When creating a post or journal it returns the error message "invalid expression" .

This appears to be change with FuanaDB API . This line is no longer returning a valid reference to the FaunaDB user object - https://github.com/chiubaca/vue-netlify-fauna-starter-kit/blob/master/src/models/JournalsModel.js#L4

if I update the line for the ref to use a specfic user ID like so q.Ref("collections/users/258705296760766996") we can post again.

I have raised a new ticket with FuanaDB asking if they have made any changes to make

const me = q.Select("ref", q.Get(q.Ref("classes/users/self")));

no longer valid and what the alternative of getting self is

Issue Logging out

Repro Steps

1. Sign into the app
2. Refresh the browser
3. Go to Profile and click Logout. nothing happens. In the console there is the following error

TypeError: "state.GoTrueAuth.currentUser(...) is null"
    attemptLogout auth.js:202
    wrappedActionHandler vuex.esm.js:747
    dispatch vuex.esm.js:438
    boundDispatch vuex.esm.js:332
    dispatch vuex.esm.js:675
    mappedAction vuex.esm.js:962
    click Profile.vue:39
    VueJS 3

Cause
This seems to uncover a wider problem with the way the Gotrue instance is being restored back into vuex on app refresh. It doesnt appear to be "signed in" behind the scenes as the currentUser() method is lost or not available.

Potential Solution

1. could prompt the user to sign in again. But its seems very counter intuitive for the user to have to login in again to then sign out.

2. Need a way to programatically sign the user in again if a user object has been cached . This potentially means thats the user should opt in to having their login user details cached by local storage.

FaunaDB token not getting updated when changing users

Repro steps:

1. signin with email add a new journal
2. signin in with a different account
3. You will see journals from from the previous user session
4. clicking into the journal will result in a permissions denied error in the console

Workaround

• hard refresh CTRL+F5

Solutions
This is a problem in src\models\PostsModel.js. the faunadb client needs to be reinitialised when chaning users. when changing user the current client is till cached in memory.

Need to move this logic out:

const dbToken = store.getters["auth/currentUser"].app_metadata.db_token

/* configure faunaDB Client with our secret */
const q = faunadb.query
const client = new faunadb.Client({
  secret: dbToken
})

The faunaDB client should update whenever the Vuex currentUser object has updated.

Add image of logos to project