nap icon indicating copy to clipboard operation
nap copied to clipboard

[Deprecated] NextJS + Apollo + PassportJS

Commitizen friendly

nap

[WIP] NextJS/ApolloJS/PassportJS Build in Next JS for SSR, Apollo Client for GraphQL, Passport JS for authentication, Docker for development and production.

Overview

○ Docker
├─ ○ NodeJS
│  ├─ ○ NextJS
│  │  ├─ ./pages      : /usr/app/pages
│  │  ├─ ./components : /usr/app/components
│  │  ├─ ./lib        : /usr/app/lib
│  │  ├─ ./routes     : /usr/app/routes
│  │  └─ ./server     : /usr/app/server
│  │
│  ├─ ○ Apollo
│  │  └─ ./graphql    : /usr/app/graphql
│  │
│  └─ ○ PassportJS
│     └─ ./providers  : /usr/app/providers
│
├─ ○ Redis            : redis://redis
│  └─ data            : /data
│
└─ ○ MongoDB          : mongodb://mongo/graphql
   └─ data            : /data/db

Stacks

  • [x] next for SSR React.
  • [x] apollo for GraphQL client.
  • [x] passport for Express authentication.

Extras


Configurations

Copy from .env.example template and .env as you wish

cp .env.example .env

Develop

# Will build and run then attach with docker compose (it take sometime for first build)
npm run up-dev

# Try modify files and see the HMR result
open http://localhost:3000

# Try modify file in ./graphql and see the result via GraphiQL
open http://localhost:3000/graphql

Debug

  • Server side : Use VSCode and press F5 to attach with nodejs
  • Client side : Use Chrome Dev Tool

Addition

# Will kill all and tear down
npm run down

# Will dive into container
npm run in

Production

# Will pull image and run with docker compose (won't build)
npm run up

Test

# Will need to run server for integration test (WIP)
npm run up-dev

# To test all with Jest
npm run test

# To see coverage
npm run cover

Passport (cookie)

  • [x] Facebook : http://localhost:3000/auth/facebook/
  • [x] Github : http://localhost:3000/auth/github/
  • [x] Twitter : http://localhost:3000/auth/twitter/
  • [x] Google : http://localhost:3000/auth/google/
  • [x] Local : With email/password

Passport (token via GraphQL)


Client example

  • [x] Login/Logout with Facebook from React Native.
  • [x] Login/Logout with Facebook from NextJS.

DOING

  • [ ] Optional asking for user from facebook graph query.
  • [ ] Link facebook-token with auth/facebook user.
  • [ ] Link facebook-token with auth/email user.
  • [ ] Unlink Facebook via React web.
  • [ ] Handle cookies via React Native

TODO

  • [ ] Add HOC to nap-react-native
  • [ ] Create doc separated from this README as github page.
  • [ ] Add Swarm mode stack
  • [ ] Gracefully shutdown : https://github.com/heroku-examples/node-articles-nlp/blob/master/lib/server.js#L31
  • [ ] Gracefully shutdown : https://github.com/sebhildebrandt/http-graceful-shutdown
  • [ ] Don't run as root : https://github.com/jdleesmiller/docker-chat-demo/blob/master/Dockerfile
  • [ ] Don't run as root : https://github.com/davidbarton/docker-node-tini/blob/master/Dockerfile#L34
  • [ ] Separated Dockerfile : https://docs.docker.com/compose/compose-file/#build
  • [ ] More secure with lusca
  • [ ] Securing a Containerized Instance of MongoDB : http://rancher.com/securing-containerized-instance-mongodb/
  • [ ] Docker Secrets : https://semaphoreci.com/community/tutorials/managing-secrets-in-docker-swarm

TOTEST

  • [ ] Redis fail test.
  • [ ] MongoDB fail test.
  • [ ] HTTP fail test.
  • [ ] HTTPS fail test.
  • [ ] Unit test graphql-compose.
  • [ ] Basic signin test.
  • [ ] Passport test.
  • [ ] Sessions expire test.
  • [ ] Chaos testing with pumba

TOCUSTOM

  • [ ] Custom MongoDB replication docker exec -it node1 mongo --eval "rs.initiate()"
  • [ ] Run Multiple Docker Environments (qa, stage, prod) from the Same docker-compose File.
  • [ ] HTTPS with https://github.com/expressjs/session#cookiesecure
  • [ ] Production vs Development. docker-compose -f docker-compose.yml -f production.yml up -d
  • [ ] Container config e.g. restart policy, limits CPU/RAM.
  • [ ] Docker multi-stage build : https://codefresh.io/blog/node_docker_multistage/

TOHAVE