/vue-netlify-fauna-starter-kit

Primary LanguageVue

Netlify Status

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.

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

  2. Enable Identity on your newly deployed Netlify site otherwise signups and logins won't 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.

Enable Netlify Identity

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

Docker development

[From Paul Rosen]

To run under docker, start it the first time with:

FAUNADB_SERVER_SECRET=my-secret
export FAUNADB_SERVER_SECRET   
FAUNADB_SERVER_SECRET=$FAUNADB_SERVER_SECRET npm run start

That will error out but it will initialize the DB.

From then on, just start with:

FAUNADB_SERVER_SECRET=$FAUNADB_SERVER_SECRET CMD="run serve2" docker-compose up

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:

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.