Skip to content

Latest commit

 

History

History
229 lines (164 loc) · 4.55 KB

README.md

File metadata and controls

229 lines (164 loc) · 4.55 KB
Raw

Email Sender Upgraded

Build Status

Upgraded version of a email promotion and monitor system based on Stephergrinder's email sender. Solely to practice the cutting edge tech stack.

Features

Client

Tech perspective:

  • React-redux version
  • React-hooks version
  • Use Webpack-dev-server to proxy all api services and websocket connection.
  • Use express as static file server in production and handle websocket connection.

API

Tech perspective:

  • A express project in company with graphql+socket.io
  • A express project in company with apollo-server+socket.io
  • Separate Express 'app' and 'server'.
  • Update api service file structure from technical role to self-contained components.
  • Refractor api service from common.js to ES6 import syntax

Prerequisite

  • Node v10.16
  • npm v6.9

Client

# ./client/.env

STRIPE_PUB_KEY_DEV=<Stripe Public Key>
STRIPE_PUB_KEY_PROD=<Stripe Public Key>
CLIENT_HOST=localhost
CLIENT_PORT=8080
SOCKETIO_HOST=localhost
SOCKETIO_PORT=5001
API_HOST=localhost
API_PORT=5000
API_VER=v1
DOCKER=false

API

# ./api/.env

PORT=5000
CLIENT_ID_DEV=<Google OAuth 2 Client Id>
CLIENT_ID_PROD=<Google OAuth 2 Client Id>
CLIENT_SECRET_DEV=<Google OAuth 2 Secret>
CLIENT_SECRET_PROD=<Google OAuth 2 Secret>
CALLBACK_URI=/auth/google/callback
COOKIE_KEY_DEV=<Define your own cookie key>
COOKIE_KEY_PROD=<Define your own cookie key>
DATABASE_URL_DEV=<MongoDB Altas full Url>
DATABASE_URL_PROD=<MongoDB Altas full Url>
STRIPE_PUB_KEY=<Stripe Public Key>
STRIPE_SECRET_KEY=<Stripe Secret Key>
SENDGRID_KEY=<Sengrid Key>
REDIRECT_DOMAIN=http://localhost:8080
SOCKETIO_PORT=5001

Start Project

Method 1: docker-compose

This method is easy. Open browser and go to http://localhost:3050. You can see the dashboard.

Method 2: npm script

If you want to do it with purely npm command, there are more additional setup:

  1. Install Dependence of services
# ./ @project root
# ./client
# ./api

npm i
  1. Start Project
# ./ @project root
npm start
  1. Check result

Open browser and go to http://localhost:8080.

More Slient Start Script

# ./client @project root
# with JSON Mock server (only get data is available )
npm run start:jsonserver

# with other server on same localhost but port
# Need to start server first
npm run start:dev

Build Project and Run Production version

You also have two ways to run production version:

# Method 1. In project root (Highly Recommonded)
docker-compose -f docker-compose-stage.yml up

# Method 2. In project root
(TODO)See below details

Method 1: docker-compose

This method is easy. Open browser and go to http://localhost:3060. You can see the dashboard.

Method 2: npm script

  1. Run Production Bbuild
# ./ @project root
# Use Babel to complie import syntax to require
npm run build
  1. Run Production Server
# ./ @project root
# Use Babel to complie import syntax to require
npm run prod
  1. Check result

Open browser and go to http://localhost:8080.

More Client Build Script

# ./client
# with other localhost API server in different port
npm run build:dev

# stage as API server
npm run build:stage

# production as API server
npm run build:prod

Run Test

Test GraphQL Server

npm run test

TechStacks

Client

  • Webpack 4 custom scaffold
  • Babel 7
  • React 16 with hooks
  • Redux-thunk
  • React-Router 4
  • React Hot loader
  • React-Loadable for async loading page
  • Redux with module pattern
  • (TODO) Jest+puppeteer for unit test
  • WebSocket by Socket.io client
  • Husky+Lint-stage
  • ESlint+Prettier
  • Sensitive data handler: dotenv

API

  • Babel node for compiling ES6 syntax
  • Express.js
  • Restful API
  • WebSocket by Socket.io
  • GraphQL by express-graphql or apollo-server
  • Mocha+Chi for unit test to express-graphql
  • Mocha+Chi for unit test to RESTFul API
  • Mongoose
  • MongoDB Altas
  • Sensitive data handler: dotenv

Dev-Ops

  • Docker
  • Docker-compose
  • Nginx as reverse-proxy
  • Bash 5 for development

Cloud - Heroku with Docker

  • (TODO)Heroku

History

  • origin/initial: Initial full-stack version with docker.
  • origin/hooks: Modify /client component to function component and implement hooks
  • origin/rolebased: Modify /api file structure from technical role to self-contained components.
  • origin/master: Final full-stack project with dev-ops pipeline.

License