Document how to setup a local environment

Author: ggrossetie

.gitignore

@@ -25,4 +25,8 @@ yarn-error.log*
 *.swp
 .idea*
 
-ui-react/package
+ui-react/package
+
+# local db
+neo4j/config/
+neo4j/data/

README.md

@@ -1,11 +1,87 @@
-# Graphgist Portal - v3
+# GraphGist Portal v3
 
-This project was started with [GRANDstack](https://grandstack.io) (GraphQL, React, Apollo, Neo4j Database). There are two components for the portal, the [`UI application`](/ui-react) (in React) and the [`API app`](/api) (GraphQL server).
+This project was started with [GRANDstack](https://grandstack.io) (GraphQL, React, Apollo, Neo4j Database).
+There are two components for the portal:
 
-## API
+- `ui-react`: the UI application in React
+- `api`: the API application (GraphQL server)
+
+### API
 
 ![GraphQL API diagram](./diagram.png)
 
+## Local install
+
+### Requirements
+
+- Node.js 12 (`lts/erbium`)
+- Docker and `docker-compose`
+
+### Run GraphGist portal
+
+Create a copy of `ui-react/.env-example` and `api/.env-example` within the same directory using the name `.env`.
+
+```
+cp ./ui-react/.env-example ./ui-react/.env
+cp ./api/.env-example ./api/.env
+```
+
+#### Using Docker Compose
+
+Using `docker-compose`:
+
+```
+docker-compose up -d
+```
+
+This will take some time on the first run.
+Once the containers have been started, you can check the log to check if the UI is up and running using:
+
+```
+docker logs -f graphgist-portal-ui
+```
+
+The `docker-compose up -d` will start 3 services:
+
+- Neo4j database with the Neo4j Browser available via HTTP at http://localhost:7474/browser/
+- Web interface available at http://localhost:3000/
+- GraphQL API available at http://localhost:4001/graphql
+
+#### Using npm
+
+```
+npm i --prefix ui-react
+npm i --prefix api
+```
+
+It's recommanded to run the database using Docker to use a compatible version with the Neo4j APOC library enabled:
+
+```
+docker-compose run --service-ports neo4j
+```
+
+Once the database is up and running, open a new terminal and execute:
+
+```
+npm run start --prefix api
+```
+
+Open a third terminal and execute:
+
+```
+npm run start --prefix ui-react
+```
+
+### Switch to admin
+
+Once you've created an account, you can manually update the associated user to become an admin using the following Cypher query:
+
+```
+MATCH (p:User {email: '[email protected]'})
+SET p.admin = true
+RETURN p
+```
+
 ## Deployment
 
 This is currently deployed to Heroku, since this repository contains both API and UI repository we need to individually push each one, to achieve that we can create a subtree branch with only that specific folder:

api/.dockerignore

@@ -1 +1,3 @@
 *~
+node_modules/
+build/

api/.env-example

@@ -1,6 +1,8 @@
-NEO4J_URI=""
+NODE_ENV=development
+
+NEO4J_URI="bolt://localhost:7687"
 NEO4J_USER=neo4j
-NEO4J_PASSWORD=""
+NEO4J_PASSWORD=secret
 
 GRAPHQL_LISTEN_PORT=4001
 GRAPHQL_URI=http://localhost:4001/graphql
@@ -11,11 +13,11 @@ AWS_ACCESS_KEY_ID=""
 AWS_SECRET_ACCESS_KEY=""
 AWS_REGION="eu-west-1"
 
-AUTH0_DOMAIN=""
-AUTH0_CLIENT_ID=""
+AUTH0_DOMAIN=ap2-tsl.auth0.com
+AUTH0_CLIENT_ID=sDiVDqggZV01En6i2PaJWDzdiFpZ9V7v
 
 SENTRY_DSN=""
 
 IMAGEKIT_PUBLIC_KEY=''
 IMAGEKIT_PRIVATE_KEY=''
-IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/ggp
+IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/ggp

api/Dockerfile

@@ -3,7 +3,7 @@ FROM node:12
 RUN mkdir -p /app
 WORKDIR /app
 
-COPY package.json .
+COPY package*.json ./
 RUN npm install
 COPY . .
 

api/package-lock.json

@@ -9,7 +9,7 @@
   "scripts": {
     "test": "jest",
     "start-dev": "./node_modules/.bin/nodemon --watch src --ext js,graphql --exec babel-node  src/index.js",
-    "build": "babel src -d build && shx cp .env-example build && shx cp src/schema.graphql build && shx cp src/graphgists/notify_admins_about_creation.ejs build/graphgists/notify_admins_about_creation.ejs",
+    "build": "babel src -d build && shx cp src/schema.graphql build && shx cp src/graphgists/notify_admins_about_creation.ejs build/graphgists/notify_admins_about_creation.ejs",
     "start": "npm run build && node build/index.js",
     "prettier": "prettier --write",
     "clean-temp-dbs": "babel-node src/clean_temp_dbs.js"
@@ -40,7 +40,7 @@
     "neo4j-driver": "^4.2.3",
     "neo4j-graphql-js": "^2.19.4",
     "neo4j-temp-db": "git+https://github.com/neo4j-contrib/neo4j-temp-db.git#v0.2.1",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.7",
     "sharp": "^0.26.1",
     "shortid": "^2.2.15",
     "slugify": "^1.4.6",

api/package.json

@@ -16,6 +16,8 @@ function getKey(header, cb) {
     if (key) {
       var signingKey = key.publicKey || key.rsaPublicKey;
       cb(null, signingKey);
+    } else {
+      cb(err, key);
     }
   });
 }
@@ -27,14 +29,18 @@ const options = {
 };
 
 export function auth0Verify(token) {
+  if (process.env.NODE_ENV === 'development' && !process.env.AUTH0_DOMAIN) {
+    return null; // authentication can be disabled in development when AUTH0_DOMAIN is empty
+  }
   return new Promise((resolve, reject) => {
     if (!token) {
       resolve(null);
     } else {
       jwt.verify(token, getKey, options, (err, decoded) => {
-        // if (err) {
-        //   return reject(err);
-        // }
+        if (err) {
+          console.error('Cannot verify the token!', err)
+          return resolve(null);
+        }
         resolve(decoded);
       });
     }

api/src/auth.js

@@ -5,11 +5,8 @@ import neo4j from "neo4j-driver";
 import { makeAugmentedSchema } from "neo4j-graphql-js";
 import { GraphQLUpload, graphqlUploadExpress } from "graphql-upload";
 import Asciidoctor from "asciidoctor";
-
 import dotenv from "dotenv";
 
-dotenv.config();
-
 import * as Sentry from "@sentry/node";
 import * as Tracing from "@sentry/tracing";
 
@@ -31,6 +28,8 @@ import * as imagesMutations from "./images/mutations";
 import * as imagesTypes from "./images/types";
 import { getGraphGistBySlug, getGraphGistByUUID } from "./graphgists/utils";
 
+dotenv.config();
+
 /*
  * Create a Neo4j driver instance to connect to the database
  * using credentials specified as environment variables
@@ -132,7 +131,7 @@ const server = new ApolloServer({
     extensions: {
       ...error.extensions,
       exception: {
-      ...error.extensions.exception,
+        ...error.extensions.exception,
         stacktrace: process.env.NODE_ENV !== "production" ? error.extensions.exception.stacktrace : undefined
       }
     }

api/src/index.js

@@ -4,43 +4,46 @@ services:
 
   neo4j:
     build: ./neo4j
+    container_name: "graphgist-portal-neo4j"
     ports:
-      - 7474:7474
-      - 7687:7687
+      - "7474:7474"
+      - "7687:7687"
     environment:
       - NEO4J_dbms_security_procedures_unrestricted=apoc.*
       - NEO4J_apoc_import_file_enabled=true
       - NEO4J_apoc_export_file_enabled=true
       - NEO4J_dbms_shell_enabled=true
+      - NEO4J_AUTH=neo4j/secret
     volumes:
       - ./neo4j/import:/var/lib/neo4j/import
       - ./neo4j/data:/var/lib/neo4j/data
       - ./neo4j/config:/var/lib/neo4j/conf
 
   api:
     build: ./api
+    container_name: "graphgist-portal-api"
     ports:
-      - 4001:4001
+      - "4001:4001"
     environment:
-      - GRAPHQL_LISTEN_PORT=4001
-      - GRAPHQL_URI=http://api:4001/graphql      
-      
+      - NEO4J_PASSWORD=secret
+      - NEO4J_URI=bolt://neo4j:7687
+    env_file:
+      - ./api/.env
     links:
     - neo4j
     depends_on:
     - neo4j
-    
-    volumes:
-      - ./api:/app
 
   ui:
     build: ./ui-react
+    container_name: "graphgist-portal-ui"
     ports:
-      - 3000:3000
+      - "3000:3000"
     environment:
       - CI=true
-      - REACT_APP_GRAPHQL_URI=/graphql
-      - PROXY=http://api:4001/graphql
+      - REACT_APP_GRAPHQL_URI=http://localhost:4001/graphql
+    env_file:
+      - ./ui-react/.env
     links:
     - api
     depends_on: