/mgl-inbound-call-next

Inbound call campaign web application, much similar to Rinba but more unique features..

Primary LanguageTypeScriptMIT LicenseMIT

MGL Inbound Call Web Application

Project Structure

  • services/auth: Authentication webhook
  • services/data: Hasura GraphQL project with migrations
  • services/events: Event triggers
  • services/actions: Hasura actions
  • src: Next.js web application

Installation

brew update
brew install docker
brew install docker-machine
brew cask install virtualbox
brew install docker-compose
docker-machine create --driver virtualbox default

Verify if Docker engine is running

docker-machine ls

If for some reason, its not running, run below command

docker-machine start default

Show env variables

docker-machine env default

Set env variables show above

eval $(docker-machine env default)

Copy the IP address of the docker engine

docker-machine ip default

Database design and migration

Use Hasura CLI: https://docs.hasura.io/1.0/graphql/manual/hasura-cli/install-hasura-cli.html#install

  • Design: go to services/data, then run below command. Default Secret is hasura, use above ip address for endpoint for example: http://$(docker-machine ip default):8080
hasura console --admin-secret [secret] --endpoint [endpoint]
  • Migrate: This is already done during build command, so skip this command.
hasura migrate apply --admin-secret  [secret] --endpoint [endpoint]

How to Run

  • Copy dotenv file to .env and edit configuration if necessary

  • Copy src/dotenv file to src/.env and edit configuration if necessary. Make sure you change the NEXT_PUBLIC_DATA_DOMAIN env var to the docker engine IP address

NEXT_PUBLIC_DATA_DOMAIN=192.168.99.100:8080
  • Use Docker with docker-compose
# start development dockers
make dev
# because docker caches built images, when changing packages, we need to rebuild containers
make dev-build
  • If for some reason, you need to start from scratch. Follow the below steps to delete all docker images, containers and volumes
docker stop $(docker ps -a -q)
docker rm $(docker ps -a -q)
docker system prune -a
docker volume prune

  • Docker Cheat Sheet

  • For Test/Production environment, use docker-compose.test.yaml or docker-compose.prod.yaml config file. It requires gcplogs driver (read below), or you can remove it if using another logging services

make staging
# or
make prod

Next.js application

Prerequisites

Twilio Setup

If you haven't used Twilio before, welcome! You'll need to Sign up for a Twilio account.

We recommend you create a separate project within Twilio and install this app using that project.

Note: It is recommended that you have an upgraded Twilio account to fully experience this demo.

Configuration Variables

Before you start the install, you’ll need to collect the following variables from the Twilio Account Portal.

  • TWILIO_ACCOUNT_SID
  • TWILIO_AUTH_TOKEN
  • TWILIO_API_KEY_SID
  • TWILIO_API_KEY_SECRET

ngrok Setup

  • System Wide Install

Install project:

npm install

Copy src/dotenv to src/.env then edit your environment Set NEXT_PUBLIC_WEBSITE_URL to the ngrok url for example: http://bc6c3e0506c9.ngrok.io

Run Next.js development:

npm run dev

Run Firebase locally for testing:

npm run serve

Deploy it to the cloud with Firebase:

npm run deploy

Clean dist folder

npm run clean

Testing

Use Cypress testing framework Create new test files in cypress/integration folder Run test command:

npm test
# end to end test
npm run cy:open

Important

  • The empty placeholder.html file is so Firebase Hosting does not error on an empty public/ folder and still hosts at the Firebase project URL.
  • firebase.json outlines the catchall rewrite rule for our Cloud Function.
  • The Firebase predeploy hooks defined in firebase.json will handle linting and compiling of the next app and the functions sourceswhen firebase deploy is invoked. The only scripts you should need are dev, clean and deploy.

Learning Resources

Development tools

Advanced guidelines