Skip to content

johnnyoshika/jellypic-dashboard

Repository files navigation

Jellypic Dashboard

Note: This app is outdated. The the GraphQL client here instead: https://github.com/johnnyoshika/jellypic-client

Jellypic is a sample app to demonstrate the capabilities of Progressive Web Apps, including:

  • Offline first readonly in:
    • Chrome, Firefox, Opera
    • Edge on Windows 10 1803+
    • Safari 11.1+ (iOS 11.3+ and macOS 10.13.4+)
  • Saving changes still requires device to be online, but I hope to change that soon
  • Push notifications on:
    • Chrome on Android
    • Chrome on Windows
    • Chrome on macOS

Project was bootstrapped with Create React App and uses the following technologies:

  • Service Worker
  • Push API
  • React.js
  • Redux / Rematch
  • CSS Grid

Setup

  • git clone {repository url}
  • cd into new directory
  • use Node version 8.X (e.g. 8.17.0)
  • npm install

Development

HTTPS and Facebook Login

  • Facebook only allows login from HTTPS pages.
  • To serve pages over HTTPS, start server after [setting HTTPS environment variable])https://create-react-app.dev/docs/using-https-in-development/_:
    • Windows (cmd.exe): set HTTPS=true&&npm start
    • Windows (Powershell): ($env:HTTPS = "true") -and (npm start)
    • Linux, macOS (Bash): HTTPS=true npm start
  • Server will use a self-signed certificate, so web browser will almost definitely display a warning
  • Once you log in with Facebook and proper authentication cookie has been set by our API, then you can revert back to non-secure HTTP. Remember that you need to close the shell and start a new session to clear out the env variable.

Build for Production

  • npm run build

Remote Debugging with Android Device

Deployment

Use Linux, Windows Subsystem for Linux (WSL), or Mac

Preparation:

  • Make sure lftp is installed
    • Linux or WSL:
      • $ sudo apt-get install lftp
    • Mac:
      • $ brew install lftp
  • Create deploy.sh
    • $ touch deploy.sh
    • May need to allow execute permission
      • Check:
        • $ ls -al deploy.sh
      • If change is necessary:
        • $ chmod u+x deploy.sh
  • Set content of deploy.sh to:
#!/bin/bash

npm run build

FTP_USER={user}         # example: jellypic\\johnny_ftp (note the escaped backslash)
FTP_PASSWORD={password}
FTP_HOST={host:port}    # example: www.example.com:21
FTP_DIR=/               # another example: /site/wwwroot/wwwroot

# Deploy assets first
lftp -c "open -u $FTP_USER,$FTP_PASSWORD $FTP_HOST; set ssl:verify-certificate no; mirror --exclude index.html --exclude sw.js -R build/ $FTP_DIR"

# Deploy index.html
lftp -c "open -u $FTP_USER,$FTP_PASSWORD $FTP_HOST; set ssl:verify-certificate no; put -O $FTP_DIR build/index.html"

# Deploy sw.js
lftp -c "open -u $FTP_USER,$FTP_PASSWORD $FTP_HOST; set ssl:verify-certificate no; put -O $FTP_DIR build/sw.js"
  • Make sure line endings are unix based (LF).

Deploy:

  • bash deploy.sh

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published