Fullstack typescript application (express, react, hasura)

Project structure #

docker-compose.yaml # development services
package.json # shared scripts
api/ # API express
client/ # React (create react application)App

General scripts #

Using npm:

package.json:

Services #

Using docker:

docker-compose.yaml:

version: "3.6"
services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
      - db_data:/var/lib/postgresql/data
    ports:
      - 54329:5432
    environment:
      POSTGRES_PASSWORD: secret

  minio:
    image: minio/minio
    command: server /data
    volumes:
      - minio:/data
    ports:
      - 9000:9000
    environment:
      MINIO_ACCESS_KEY: minio
      MINIO_SECRET_KEY: 2NVQWHvTT73XMgqapGchy6yAtwHezMZn

  graphql-engine:
    image: hasura/graphql-engine:v1.1.1
    ports:
      - "8080:8080"
    depends_on:
      - postgres
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:secret@postgres:5432/postgres
      HASURA_GRAPHQL_ENABLE_CONSOLE: "false" # we are using migrations
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      HASURA_GRAPHQL_UNAUTHORIZED_ROLE: anonymous
      HASURA_GRAPHQL_JWT_SECRET: '{"type": "HS256", "key": "2NVQWHvTT73XMgqapGchy6yAtwHezMZn"}'
      ## uncomment next line to set an admin secret
      HASURA_GRAPHQL_ADMIN_SECRET: secret

volumes:
  db_data:
  minio:

Database #

Install hasura:

mkdir database/
echo {} > package.json
npm i --save hasura-cli

Add scripts:

database/package.json:

{
  "scripts": {
    "setup": "hasura init .",
    "start": "HASURA_GRAPHQL_ADMIN_SECRET=secret hasura console"
  },
  "dependencies": {
    "hasura-cli": "^1.2.0"
  }
}

Run npm start

Squash migrations #

HASURA_GRAPHQL_ADMIN_SECRET=secret npx hasura migrate squash --name initial-version --from <migration-timestamp>

Apply migrations to the server #

HASURA_GRAPHQL_ADMIN_SECRET=<server-admin-secret> \
npx hasura migrate apply --endpoint <server-endpoint>

Remember <server-endpoint> is the URL of hasura console, not the GraphQL endpoint url.

API #

See typescript express boilerplate

Client #

See typescript create react app + antd + graphql boilerplate