Skip to content

Latest commit

 

History

History
107 lines (78 loc) · 2.68 KB

README.md

File metadata and controls

107 lines (78 loc) · 2.68 KB
Raw

SpotifyJam

Come jam with your friends with synchonized Spotify music!

Demo Build: Demo

Make sure to install Redux Dev Tools for time-travel and debugging: Chrome Dev Tools

Tools:

Frontend Development

cd /spotifyjam/

Run Local Site

  1. yarn (install)
  2. yarn dev (run)

Deploy Frontend Build

  1. npm install -g firebase-tools
  2. firebase login
  3. yarn build (production build)
  4. Remove sourcemap (two ways) either: a. delete the .map b. export GENERATE_SOURCEMAP=false
  5. firebase deploy

Backend Development

1.  Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
2.  heroku login
3.  heroku git:clone -a spotify-jam

Run Local Server

server

  1. cd spotify-jam
  2. npm install
  3. node server

client

  1. cd spotify-jam
  2. node test-client.js

Commands (use ">help" for help)

  • available
  • create test-room
  • join test-room
  • send hello!

Deploy Server with Heroku

  1. Commit and push (master)
  2. heroku logs --tail

Deploy Server with Google Cloud & Kubernetes

  1. git pull origin master
  2. export PROJECT_ID="$(gcloud config get-value project -q)"
  3. vi Dockerfile //Edit any build directives
  4. docker build -t gcr.io/${PROJECT*ID}/(docker-proj-name):(docker-tag) . *//(docker-proj-name) = spotifyjam_
  5. gcloud docker -- push gcr.io/${PROJECT*ID}/(docker-proj-name):(docker-tag) *//push docker build to gcloud_
  6. //(port-no) should match the port the server uses, (service-name) = spotifyjam-backend
    • gcloud container clusters get-credentials (service-name) --zone us-central1-a --project ${PROJECT_ID}
    • kubectl run (service-name) --image=gcr.io/${PROJECT_ID}/(docker-proj-name):(docker-tag) --port (port-no)
    • kubectl set image deployment/(service-name) (service-name)=gcr.io/${PROJECT_ID}/(docker-proj-name):(docker-tag)
  7. kubectl expose deployment (service-name) --type=LoadBalancer --port (port-no) --target-port (user-port) //(user-port) should match the port the client uses

Managing Packages

(frontend) yarn remove "package-name"

  1. rm -rf node_modules
  2. npm cache clean
  3. yarn (reinstall)

Stack

  • React
  • React-Redux
  • React-Router-Dom
  • Redux-Thunk
  • React-Router-Redux
  • Redux-Persist
  • Reselect
  • Node with OOP (User/Room Classes)
  • Socket.io
  • Socket.io Middleware
  • Spotify-Web-API-js
  • Firebase Hosting
  • Google Cloud Kubernetes
  • Ant.d UI Library