feat: basic frontend (#29)

.github/workflows/ci.yaml

@@ -10,24 +10,38 @@ env:
   DATABASE_URL: file:./db.sqlite
   AUTH_SIGNUP_ENABLED: 1
 jobs:
-  build:
 
+  api-test:
     runs-on: ubuntu-latest
-
+    defaults:
+      run:
+        working-directory: 'api'
     steps:
       - uses: actions/checkout@v3
-
       - name: Use Node 18.14.2
         uses: actions/setup-node@v3
         with:
           node-version: 18.14.2
-
       - run: npm install
-
       - run: npx prisma db push
-
       - run: npm run typecheck
-
       - run: npm run lint
-
       - run: npm run test
+
+  frontend-test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: 'frontend'
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.14.2
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.14.2
+      - name: Install
+        run: npm install
+      - name: Lint
+        run: npm run lint
+      - name: Build
+        run: npm run build

.gitignore

@@ -13,7 +13,7 @@ node_modules
 .output
 .env
 dist
-coverage/**
+coverage
 
 # system-related
 .DS_Store

.vscode/settings.json

@@ -14,6 +14,11 @@
   },
   "eslint.validate": [
     "javascript",
-    "typescript"
+    "typescript",
+    "vue"
+  ],
+  "eslint.workingDirectories": [
+    "./api",
+    "./frontend"
   ]
 }

CONTRIBUTING.md

@@ -1,3 +1,13 @@
+### Testing structure
+
+The test suite is designed to ensure that some of the modules are fully covered by tests.
+Therefore, there're 2 runs of tests: one validates that overall code coverage is on appropriate level, another validates that the code coverage for
+a subset of modules is maximal.
+
+The coverage report will therefore contain two tables.
+
+See corresponding configs [`./api/vitest.config.ts`](./api/vitest.config.ts) and [`./api/vitest.modules.config.ts`](./api/vitest.modules.config.ts)
+
 ### Logger usage
 
 The project uses `pino` logger. This logger should be used over `console` calls.
@@ -12,23 +22,23 @@ Here's a couple of examples:
 
 1. Http logging
 
-```typescript
-  // some resolver code above
-  resolve: (_parent, _args, ctx) => {
-      ctx.apolloLogger.debug('resolver called');
-    });
-  },
+    ```typescript
+    // some resolver code above
+    resolve: (_parent, _args, ctx) => {
+        ctx.apolloLogger.debug('resolver called');
+        });
+    },
 
-```
+    ```
 
 2. Usual logger
 
-In order to maintain the logging structure and be able to filter logs by file they have been produced at the following approach has to be taken:
+    In order to maintain the logging structure and be able to filter logs by file they have been produced at the following approach has to be taken:
 
-```typescript
-import { getModuleBinding, getChildLogger } from './logger';
+    ```typescript
+    import { getModuleBinding, getChildLogger } from './logger';
 
-const logger = getChildLogger({ msgPrefix: 'PREFIX' }, { myCustomBinding: 'Funny guy' });
-```
+    const logger = getChildLogger({ msgPrefix: 'PREFIX' }, { myCustomBinding: 'Funny guy' });
+    ```
 
-If this approach is used - then it will be possible to filter the logs via providing the corresponding environment variable values. For more on this read the root [README](./README.md)
+    If this approach is used - then it will be possible to filter the logs via providing the corresponding environment variable values. For more on this read the root [README](./api/README.md)

README.md

@@ -1,89 +1,38 @@
-![Open-source API Supporting a Thriving Ecosystem of (D)apps](./banner.png)
+![Open-source API Supporting a Thriving Ecosystem of (D)apps](./.github/banner.png)
 
 [![CI](https://github.com/makerdao-ses/switchboard-boilerplate/actions/workflows/ci.yaml/badge.svg)](https://github.com/makerdao-ses/switchboard-boilerplate/actions/workflows/ci.yaml)
 [![#license AGPLv3](https://img.shields.io/badge/license-AGPLv3-purple?style=plastic)](https://www.gnu.org/licenses/agpl-3.0)
 
 # Powerhouse Switchboard
 
-Open-source API over database models made to be developer- and analyst-friendly.
+Open-source API over the [document model](https://github.com/makerdao-ses/document-model-libs) made to be developer- and analyst-friendly.
 
 ![app](./.github/app.png)
 
-## Development
+## Quick start
 
-We use TypeScript, JavaScript and Node 18 (LTS) to develop this project. Commands:
-```sh
-# Set the required environment variables
-cp .env.development .env
+1. Set up [required enviourment variables](./api/#environment-variables) for the API
+    - Default values can be copied via `cp ./api/developer.env ./api/.env`
+2. Start the project via a single docker-compose command
+    ```sh
+    docker-compose up --build --force-recreate
+    ```
+3. Open [http://localhost](http://localhost) to view the frontend
 
-# Install all required dependencies
-npm i
+## Project structure
+- [`/api`](./api) directory contains the core logic that creates the API over the database
+- [`/frontend`](./frontend) directory contains the frontend-related code
 
-# Run application in development mode
-npm run dev
+Please navigate to the respective directories to read concrete instructions on how to start them separately and develop them further.
 
-# Run application with extensive logging enabled (full ORM logging + app's logger has `debug` level on)
-npm run debug
+## Project requirements
 
-# Typechecking (via TypeScript / tsc)
-npm run typecheck
-
-# Linting (via eslint)
-npm run lint
-
-# Testing via vitest
-npm run test
-```
-
-### Logging configuration
-
-The configuration is received from the `logger.config.ts` file at the root of the project. Adjust the file parameters to control the logger behaviour.
-
-### Coding Setup
-
-To install the correct node version, we recommend that you use [nvm](https://github.com/nvm-sh/nvm). If you have `nvm` installed you can run:
-```sh
-nvm install
-nvm use
-```
-to automatically use the correct node version. The version is detected from the [.nvmrc](./.nvmrc).
-
-If you do not have a code editor setup, we recommend that you use [Visual Studio Code](https://code.visualstudio.com/) to get started. It is very beginner friendly and you can move on to something else (such as Sublime, vim, emacs, ...) down the road if you want to.
-
-Some environment variables are pre-configured for the development. You can copy them over to your `.env` file by running:
-
-```sh
-cp developer.env .env
-```
-
-### Environment variables
-
-- `DATABASE_URL` (required): path to the database file.
-- `JWT_SECRET` (required): server's jwt secret.
-- `PORT` (optional, default: 3000): port on which the server will run.
-- `AUTH_SIGNUP_ENABLED` (optional, default: `false`): if signing up mutation is allowed (i.e. user creation via endpoint is enabled)
-- `JWT_EXPIRATION_PERIOD` (optional, default: `'7d'`): how soon the signed jwt token will expire.
-- `DEBUG` (optional): if set, enables the different more explicit logging mode where debug levels are set to `debug` for the app's logger and `query` for db logger
-
-### Project-Requirements
-
-To understand bettwe that is planned, you can read and ask questions here:
+To understand what is planned you can read and ask questions here:
 - Initial Requirements: https://github.com/makerdao-ses/switchboard-boilerplate/issues/3
 - Document Model explanation: https://github.com/makerdao-ses/switchboard-boilerplate/issues/1
 
-This covers the current idea of what we strive to achieve in a first phase.
-
-
-## Database
-
-We use [Prisma ORM](prisma.io/) as an ORM for this project. It is installed when you run `npm i`. Here are some useful commands for development:
-```sh
-# Push the current database schema to the database. This will also automatically generate the prisma client
-npx prisma db push
+## Coding Setup
 
-# Create the typescript database client from the `schema.prisma` file
-npx prisma generate
+To install correct node version, we recommend that you use [nvm](https://github.com/nvm-sh/nvm). If you have `nvm` installed you can run `nvm install && nvm use` to automatically use the correct node version. The version is detected from the [.nvmrc](./.nvmrc).
 
-# Get a live-view of the database, useful for development and testing
-npx prisma studio
-```
+If you do not have a code editor setup, we recommend that you use [Visual Studio Code](https://code.visualstudio.com/) to get started. It is very beginner friendly and you can move on to something else down the road if you want to.

api/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+npm-debug*
+.nuxt
+dist
+tests
+.output

api/Dockerfile

@@ -0,0 +1,23 @@
+# see https://docs.docker.com/engine/reference/builder/#understand-how-arg-and-from-interact
+ARG NODE_VERSION=node:16.14.2
+
+FROM $NODE_VERSION AS dependency-base
+
+# create destination directory
+RUN mkdir -p /app
+WORKDIR /app
+
+# copy the app, note .dockerignore
+COPY package.json .
+COPY package-lock.json .
+RUN npm ci
+
+FROM dependency-base AS production
+
+COPY . .
+
+# Run in production mode
+ENV NODE_ENV=production
+
+# start the app
+CMD [ "npm", "run", "start" ]

api/README.md

@@ -0,0 +1,55 @@
+# Switchboard API
+
+The core of the system that wraps around the [business logic](https://github.com/makerdao-ses/document-model-libs) developed in a separate repository.
+
+## Development
+
+We use TypeScript and Node 18 (LTS) to develop this project. Commands:
+```sh
+# Set the required environment variables
+cp .env.development .env
+
+# Install all required dependencies
+npm i
+
+# Run application in development mode
+npm run dev
+
+# Typechecking (via TypeScript / tsc)
+npm run typecheck
+
+# Linting (via eslint)
+npm run lint
+
+# Testing via vitest
+npm run test
+```
+
+### Environment variables
+
+Some environment variables are pre-configured for the development. You can copy them over to your `.env` file by running `cp developer.env .env`
+
+- `DATABASE_URL` (required): path to the database file
+- `JWT_SECRET` (required): server's jwt secret
+- `PORT` (optional, default: 3000): port on which the server will run
+- `AUTH_SIGNUP_ENABLED` (optional, default: `false`): if signing up mutation is allowed (i.e. user creation via endpoint is enabled)
+- `JWT_EXPIRATION_PERIOD` (optional, default: `'7d'`): how soon the signed jwt token will expire
+- `DEBUG` (optional): if set, enables the different more explicit logging mode where debug levels are set to `debug` for the app's logger and `query` for db logger
+
+### Database
+
+We use [Prisma ORM](prisma.io/) as an ORM for this project. It is installed when you run `npm i`. Here are some useful commands for development:
+```sh
+# Push the current database schema to the database. This will also automatically generate the prisma client
+npx prisma db push
+
+# Create the typescript database client from the `schema.prisma` file
+npx prisma generate
+
+# Get a live-view of the database, useful for development and testing
+npx prisma studio
+```
+
+### Logging configuration
+
+The configuration is received from the `logger.config.ts` file at the root of the project. Adjust the file parameters to control the logger behaviour.

package.json → api/package.json

@@ -6,12 +6,13 @@
     "type": "module",
     "license": "AGPL-3",
     "scripts": {
-        "dev": "vite-node src/index.ts",
+        "dev": "vite-node -w src/index.ts",
+        "start": "NODE_ENV=production vite-node src/index.ts",
         "debug": "DEBUG=1 npm run dev",
         "postinstall": "prisma generate",
         "lint": "eslint \"./**/*.{ts,tsx}\" --max-warnings=0",
         "typecheck": "tsc --noEmit",
-        "test": "vitest run && vitest run --config ./vitest.full-coverage.config.ts",
+        "test": "vitest run && vitest run --config ./vitest.modules.config.ts",
         "watch": "vitest watch"
     },
     "dependencies": {

src/app.ts → api/src/app.ts

@@ -9,7 +9,7 @@ export const createApp = (): Express => {
   logger.debug('Creating app');
   const app = express();
 
-  app.get('/', expressPlayground({ endpoint: '/graphql' }));
+  app.get('/', expressPlayground({ endpoint: '/api/graphql' }));
 
   return app;
 };

src/server.ts → api/src/server.ts

@@ -5,7 +5,7 @@ import type express from 'express';
 import { expressMiddleware } from '@apollo/server/express4';
 import bodyParser from 'body-parser';
 import cors from 'cors';
-import { PORT, isDevelopment } from './env';
+import { PORT } from './env';
 import { schemaWithMiddleware } from './schema';
 import { Context, createContext } from './context';
 import { getChildLogger } from './logger';
@@ -28,7 +28,7 @@ function loggerPlugin(): ApolloServerPlugin<Context> {
 
 const createApolloServer = (): ApolloServer<Context> => new ApolloServer<Context>({
   schema: schemaWithMiddleware,
-  introspection: isDevelopment,
+  introspection: true,
   plugins: [loggerPlugin()],
 });
 

api/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig, UserConfig } from 'vitest/config';
+
+export const defaultConfig: UserConfig = {
+  test: {
+    coverage: {
+      enabled: true,
+      provider: 'istanbul',
+      lines: 90,
+      functions: 90,
+      statements: 90,
+    },
+    singleThread: true,
+  },
+};
+
+export default defineConfig(defaultConfig);