vue-admin-dashboard

Netlify

Deploy

https://cli.vuejs.org/guide/deployment.html#netlify

In settings we can change site name

Identity

https://www.netlify.com/docs/identity/

Then on settings tab, we must change registration preferences to Invite only

To use the service in your site, you can add the Netlify Identity widget npm i -S netlify-identity-widget

When using the widget on localhost, it will prompt for your Netlify SiteURL the first time it is opened.

You can invite new Identity users to your site from the Identity tab. This will send email invitations to the addresses you enter.

Accept the invite

Get token from url

And go to http://localhost:8080/ + token address

Create password

Identity with gotrue-js

Build your own form and integrate it using gotrue-js npm i -S gotrue-js

Get Identity API endpoint

Lambda functions

https://www.netlify.com/docs/functions/

Edit settings

Create functions folder in root directory with lambda functions

Edit deploy settings

Change build command

When we push project to github, our functions will automatically deploy

Run your serverless functions locally for testing

Install netlify-lambda npm install netlify-lambda

Create netlify.toml configuration file in root directory

[build]
  functions = "./functions"

Copy functions folder with lambda functions in src directory

See example

Grab npm scripts

{
  "scripts": {
    "start:lambda": "netlify-lambda serve src/functions",
    "build:lambda": "netlify-lambda build src/functions"
  }
}

Run npm run start:lambda

Go to http://localhost:9000/hello

Troubleshooting

If your Netlify function has additional dependencies, there’s a chance that your function call may fail as a result of node modules not being imported as expected. To ensure that your serverless function has access to the correct dependencies, you can use @netlify/zip-it-and-ship-it package.

Install npm i -S @netlify/zip-it-and-ship-it

netlify/netlify-lambda#112

https://github.com/netlify/netlify-lambda#webpack-configuration

https://www.netlify.com/blog/2018/09/14/forms-and-functions/

https://medium.com/@saphidev/use-firebase-admin-with-netlify-lambda-functions-free-483d3b390e3a

And then be sure to do the following netlify/netlify-lambda#112 (comment)

//./config/webpack.functions.js
const nodeExternals = require("webpack-node-externals");

module.exports = {
  externals: [nodeExternals()]
};

{
  "scripts": {
    "start:lambda": "netlify-lambda serve src/functions --config ./config/webpack.functions.js",
    "build:lambda": "netlify-lambda build src/functions --config ./config/webpack.functions.js"
  }
}

You also need dependencies npmi -D webpack-node-externals

if you get encoding not found

Install npm i -S encoding

netlify/zip-it-and-ship-it#30

https://www.bridgestew.com/journal/how-to-indieweb-syndicate/

Other

netlify/netlify-lambda#43

https://github.com/netlify/functions

https://github.com/netlify-labs/functions-site

https://github.com/DavidWells/netlify-functions-workshop

Slack

https://api.slack.com/

Create new app

Setup permissions

In scopes section type chat and select Send messages as Your_App_Name

Then install app to your workspace

Get token

Create channel on your workspace

Send request

https://api.slack.com/methods/chat.postMessage

Google Data Studio

Create new report

Select your data source

We can change background color

Add a chart and setup

Then get embed code

Result

Make a copy because we need to change the background for the darkmod

Firebase/firestore

https://github.com/gdg-tangier/vue-firestore

// first render when component mounted
firestore() {
  return {
    traffic: {
      ref: db.collection("traffic"),
      objects: true,
      resolve: data => {
        console.log(data); // traffic
        const activeUsers = data.activeUsers; // traffic.activeUsers
      },
      reject: err => {
        console.log(err);
      }
    }
  };
}

// manually binding docs, for example we click to button and run this
this.$binding("newUsers", db.collection("traffic").doc("newUsers"))
  .then(data => {
    console.log(data); // newUsers
  })
  .catch(err => {
    console.log(err);
  });

Firebase Admin SDK

Generate new private key

Install npm i -S firebase-admin

Firestore rules

https://firebase.google.com/docs/firestore/security/rules-structure

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /traffic/{document=**} {
      allow read;
    }
  }
}

Kirill255 / vue-admin-dashboard