Added frontend

config/nginx/nginx.conf

@@ -3,18 +3,17 @@ events {
 
 http {
   server {
-    # location / {
-    #   # proxy_set_header Host $host;
-    #   # proxy_set_header X-Real-IP $remote_addr;
-    #   # proxy_pass http://frontend:3000;
-    # }
+    location / {
+      proxy_pass http://frontend:3000/;
+    }
 
     location /graphql {
-      proxy_pass http://backend;
+      # proxy_set_header Access-Control-Allow-Origin $http_origin;
+      proxy_pass http://backend/;
     }
 
     location /adminer {
-      proxy_pass http://adminer:8080;
+      proxy_pass http://adminer:8080/;
     }
   }
 }

docker-compose.yml

@@ -10,6 +10,7 @@ services:
     depends_on:
       - adminer
       - backend
+      - frontend
 
   db:
     image: postgres:alpine
@@ -68,6 +69,18 @@ services:
       - db
       - redis
 
+  frontend:
+    build:
+      context: ./docker/frontend
+      args:
+        BUILD_ENV: production
+    container_name: frontend
+    restart: always
+    networks:
+      - default
+    depends_on:
+      - backend
+
 networks:
   db:
   redis:

docker/backend/.dockerignore

@@ -4,3 +4,8 @@
 /.shards/
 *.dwarf
 .ameba.yml
+Dockerfile
+README.md
+.dockerignore
+.editorconfig
+.gitignore

docker/backend/Dockerfile

@@ -11,17 +11,14 @@ COPY --from=deps /app/shard.yml /app/shard.lock ./
 COPY --from=deps /app/lib ./lib
 COPY ./src ./src
 RUN if [ "${BUILD_ENV}" = "development" ]; then \
-  time shards build --static --verbose -s -p -t; \
+  time shards build -Ddevelopment --static --verbose -s -p -t; \
   else \
   time shards build --static --release --no-debug --verbose -s -p -t; \
   fi
 
-FROM ubuntu:latest as user
-RUN useradd -u 10001 backend
-
 FROM alpine as runner
 WORKDIR /app
-COPY --from=user /etc/passwd /etc/passwd
+RUN adduser -S backend -u 1001
 COPY --from=builder /app/bin ./bin
 COPY ./db ./db
 USER backend

docker/backend/shard.lock

@@ -80,26 +80,26 @@ shards:
     git: https://github.com/amberframework/quartz-mailer.git
     version: 0.8.0
 
+  radix:
+    git: https://github.com/luislavena/radix.git
+    version: 0.4.1
+
   redis:
     git: https://github.com/stefanwille/crystal-redis.git
     version: 2.8.3
 
+  router:
+    git: https://github.com/tbrand/router.cr.git
+    version: 0.2.8
+
   secrets-env:
     git: https://github.com/spider-gazelle/secrets-env.git
     version: 1.3.1
 
-  seg:
-    git: https://github.com/soveran/seg.git
-    version: 0.1.0+git.commit.7f1cee94fb7ed7a2ba15f1388cbaede72a85eef9
-
   senf:
     git: https://git.dergrimm.net/dergrimm/senf.git
     version: 0.1.0
 
-  toro:
-    git: https://github.com/soveran/toro.git
-    version: 0.4.3
-
   version_from_shard:
     git: https://github.com/hugopl/version_from_shard.git
     version: 1.2.5

docker/backend/shard.yml

@@ -29,8 +29,6 @@ dependencies:
   CrystalEmail:
     git: https://git.sceptique.eu/Sceptique/CrystalEmail.git
     branch: master
-  toro:
-    github: soveran/toro
   commander:
     github: mrrooijen/commander
   fancyline:
@@ -51,3 +49,5 @@ dependencies:
     github: jeromegn/kilt
   email:
     github: arcage/crystal-email
+  router:
+    github: tbrand/router.cr

docker/backend/src/backend/api/log.cr

@@ -0,0 +1,7 @@
+require "log"
+
+module Backend
+  module API
+    Log = ::Log.for(self)
+  end
+end

docker/backend/src/backend/api/run.cr

@@ -5,10 +5,7 @@ module Backend
     extend self
 
     def run : Nil
-      Server.run(80, [HTTP::LogHandler.new, HTTP::ErrorHandler.new]) do |server|
-        server.bind_tcp("0.0.0.0", 80, true)
-        server.listen
-      end
+      WebServer.new.run
     end
   end
 end

docker/backend/src/backend/api/schema/query.cr

@@ -8,6 +8,11 @@ module Backend
           true
         end
 
+        @[GraphQL::Field]
+        def version : String
+          VERSION
+        end
+
         @[GraphQL::Field]
         def me(context : Context) : User
           context.authenticated!

docker/backend/src/backend/api/server.cr

@@ -1,33 +0,0 @@
-require "toro"
-require "json"
-
-module Backend
-  module API
-    class Server < Toro::Router
-      private struct GraphQLData
-        include JSON::Serializable
-
-        property query : String
-        property variables : Hash(String, JSON::Any)?
-        property operation_name : String?
-      end
-
-      def routes
-        on "graphql" do
-          post do
-            content_type "application/json"
-
-            data = GraphQLData.from_json(context.request.body.not_nil!.gets.not_nil!)
-
-            write Schema::SCHEMA.execute(
-              data.query,
-              data.variables,
-              data.operation_name,
-              Context.new(context.request)
-            )
-          end
-        end
-      end
-    end
-  end
-end

docker/backend/src/backend/api/service.cr

@@ -0,0 +1,9 @@
+module Backend
+  module API
+    SERVICE = ->do
+      Log.info { "Starting API service..." }
+      run
+      Log.info { "API service stopped." }
+    end
+  end
+end

docker/backend/src/backend/api/webserver.cr

@@ -0,0 +1,52 @@
+require "router"
+require "http/server"
+require "json"
+
+module Backend
+  module API
+    class WebServer
+      include Router
+
+      def draw_routes : Nil
+        post "/" do |context|
+          context.response.content_type = "application/json"
+
+          data = GraphQLQueryData.from_json(context.request.body.not_nil!.gets.not_nil!)
+          context.response.puts(
+            Schema::SCHEMA.execute(
+              data.query,
+              data.variables,
+              data.operation_name,
+              Context.new(context.request)
+            )
+          )
+
+          context
+        end
+      end
+
+      def run : Nil
+        draw_routes
+
+        server = HTTP::Server.new(
+          [
+            HTTP::LogHandler.new,
+            HTTP::ErrorHandler.new,
+            HTTP::CompressHandler.new,
+            route_handler,
+          ]
+        )
+        server.bind_tcp("0.0.0.0", 80, true)
+        server.listen
+      end
+
+      private struct GraphQLQueryData
+        include JSON::Serializable
+
+        property query : String
+        property variables : Hash(String, JSON::Any)?
+        property operation_name : String?
+      end
+    end
+  end
+end

docker/backend/src/backend/log.cr

@@ -0,0 +1,5 @@
+require "log"
+
+module Backend
+  Log = ::Log.for(self)
+end

docker/backend/src/backend/run.cr

@@ -2,27 +2,21 @@ module Backend
   extend self
 
   def run : Nil
-    puts "Running backend..."
-    puts "-" * 10
+    Log.info { "Starting backend services..." }
 
-    channel = Channel(Nil).new
+    channel = Channel(Nil).new(SERVICES.size)
 
-    spawn same_thread: true do
-      puts "Starting API..."
-      API.run
-
-      channel.send(nil)
+    SERVICES.each do |service|
+      spawn do
+        service.call
+        channel.send(nil)
+      end
     end
 
-    spawn same_thread: true do
-      puts "Starting worker..."
-      Worker.run
-
-      channel.send(nil)
-    end
-
-    2.times do
+    SERVICES.size.times do
       channel.receive
     end
+    Fiber.yield
+    Log.info { "Backend services started." }
   end
 end

docker/backend/src/backend/services.cr

@@ -0,0 +1,6 @@
+module Backend
+  SERVICES = [
+    API::SERVICE,
+    Worker::SERVICE,
+  ]
+end

docker/backend/src/backend/worker/log.cr

@@ -0,0 +1,7 @@
+require "log"
+
+module Backend
+  module Worker
+    Log = ::Log.for(self)
+  end
+end

docker/backend/src/backend/worker/service.cr

@@ -0,0 +1,9 @@
+module Backend
+  module Worker
+    SERVICE = ->do
+      Log.info { "Starting worker service..." }
+      run
+      Log.info { "Worker service stopped." }
+    end
+  end
+end

docker/frontend/.dockerignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+Dockerfile
+README.md
+.dockerignore
+.editorconfig
+.gitignore

docker/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

docker/frontend/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

docker/frontend/.nvmrc

@@ -0,0 +1 @@
+v16.13.2

docker/frontend/Dockerfile

@@ -0,0 +1,42 @@
+# Install dependencies only when needed
+FROM node:14-alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:14-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM node:14-alpine AS runner
+WORKDIR /app
+
+ARG BUILD_ENV
+ENV NODE_ENV ${BUILD_ENV}
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+USER nextjs
+
+EXPOSE 3000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["yarn", "start"]

docker/frontend/lib/client.ts

@@ -0,0 +1,6 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+export const client = new ApolloClient({
+  uri: "/graphql",
+  cache: new InMemoryCache(),
+});

docker/frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docker/frontend/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

docker/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "frontend",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.5.8",
+    "graphql": "^16.3.0",
+    "next": "12.0.9",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.13",
+    "@types/react": "17.0.38",
+    "eslint": "8.8.0",
+    "eslint-config-next": "12.0.9",
+    "typescript": "4.5.5"
+  }
+}

docker/frontend/pages/_app.tsx

@@ -0,0 +1,9 @@
+import type { AppProps } from "next/app";
+
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

docker/frontend/pages/index.tsx

@@ -0,0 +1,11 @@
+import type { NextPage } from "next";
+
+const Home: NextPage = () => {
+  return (
+    <div>
+      <h1>Willkommen zur Mentorenwahl!</h1>
+    </div>
+  );
+};
+
+export default Home;

docker/frontend/pages/login.tsx

@@ -0,0 +1,61 @@
+import type { NextPage } from "next";
+import type { FormEvent } from "react";
+import { gql } from "@apollo/client";
+
+import { client } from "../lib/client";
+
+const Login: NextPage = () => {
+  async function loginUser(event: FormEvent): Promise<void> {
+    event.preventDefault();
+
+    const input = {
+      email: (event.target as HTMLFormElement).email.value,
+      password: (event.target as HTMLFormElement).password.value,
+    };
+    console.log(input);
+
+    // client
+    //   .mutate({
+    //     mutation: gql`
+    //       mutation Login($input: LoginInput!) {
+    //         login(input: $input) {
+    //           user {
+    //             id
+    //             firstname
+    //             lastname
+    //             email
+    //           }
+    //           bearer
+    //         }
+    //       }
+    //     `,
+    //   })
+    //   .then((res) => {
+    //     console.log(res);
+    //   });
+  }
+
+  return (
+    <div>
+      <h1>Login:</h1>
+      <form onSubmit={loginUser}>
+        <label htmlFor="email">Email:</label>
+        <br />
+        <input type="email" id="email" autoComplete="email" required />
+        <br />
+        <label htmlFor="password">Password:</label>
+        <br />
+        <input
+          type="password"
+          id="password"
+          autoComplete="current-password"
+          required
+        />
+        <br />
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;

docker/frontend/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

docker/frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}