Dev.Tube

This repository contains Vue.js frontend and Express.js backend for DevTube.

Table of content

• How to run DevTube locally
  • Install global dependencies
  • Firebase: Authentication
  • Firebase: Firestore
  • Firebase: Connect DevTube
  • Datastore: Download data
  • Datastore: Run emulator
  • Run backend
  • Run frontend
• How to contribute
• How to contribute content

How to run DevTube locally

Install global dependencies

Install Yarn:

npm install -g yarn

Install Google Cloud SDK:

brew cask install google-cloud-sdk

Firebase: Authentication

DevTube uses Firebase for OAuth authentication. For now, Google, Twitter, and GitHub providers are supported. For development purposes, it's enough to configure GitHub provider.

1. Create a new GitHub OAuth app. GitHub will ask you to provide Authorization callback URL.
2. Create a new Firebase account.
3. Go to Authentication and enable GitHub sign-in. Copy Authorization callback URL.
4. Go to Github and finalize app creation by providing Authorization callback URL.
5. Copy Client ID and Client Secret.
6. Go to Firebase and provide those values.

Firebase: Firestore

DevTube stores your subscriptions, favorites, and watched videos in Firestore.

1. Open your Firebase account
2. Ceate a new Firestore database
3. Provide the following database permissions:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Firebase: Connect DevTube

1. Open your Firebase account
2. Generate a new private key under Service accounts panel
3. Store downloaded credentials under devtube-web/express/firebase.json.
4. Create devtube-web/firebase.config.json file with and populate it with the content:

{
  "projectId": "<firebase projectId>",
  "apiKey": "<firebase apiKey>",
  "authDomain": "<firebase projectId>.firebaseapp.com",
  "databaseURL": "https://<firebase projectId>.firebaseio.com"
}

Datastore: Download data

DevTube data lives in Cloud Datastore. Download and unzip the following test data:

curl --create-dirs -f -o express/data/index-new.json https://storage.googleapis.com/dev-tube-index/index-test-new.json

curl --create-dirs -f -o express/data/data-test-new.zip https://storage.googleapis.com/dev-tube-index/data-test-new.zip

unzip express/data/data-test-new.zip -d "express/data/videos"

Datastore: Run emulator

# run emulator
gcloud beta emulators datastore start --project=dev-tube

# point environment variables to the emulator
$(gcloud beta emulators datastore env-init)

# populate Datastore Emulator
# From ./express directory run:
yarn
yarn run datastore-init

Run backend

You need to run backend first, because frontend relies on it.

# From ./express directory run:
yarn && yarn dev

Run frontend

# from project root directory, run:
yarn && yarn dev

🚀 DevTube front-end is now running on localhost:8080

How to contribute?

Before submitting PR, check the code for violations:

yarn lint

How to contribute content?

You can contribute channels and speakers in watch-devtube/contrib repo.