Merge pull request #17 from vevcom/refactor/prisma-docker

Refactor/prisma docker

.dockerignore

@@ -3,6 +3,9 @@ npm-debug.log
 build
 .next
 
-/src/prisma
-!/src/prisma/schema.prisma
-!/src/prisma/index.js
+#you should be explicit in docker-compose about what env-vars should be loaded into a container
+.env 
+default.env
+
+# prisma
+src/prisma/migrations

Dockerfile

@@ -1,12 +1,24 @@
-FROM node:18-alpine
-
+FROM node:18-alpine AS base
 WORKDIR /usr/src/app
 
-# Install node modules
 COPY package*.json ./
 RUN npm ci
 
-COPY ./ ./
+RUN mkdir -p src/prisma
+COPY src/prisma/schema.prisma ./src/prisma/
+RUN npx prisma generate
+
+COPY . .
+############################################################
+FROM node:18-alpine AS prod
+WORKDIR /usr/src/app
+COPY --from=base /usr/src/app/ .
 
 RUN npm run build
-CMD ["npm", "run", "docker:migrate:dev"]
+CMD ["npm", "run", "start"]
+############################################################
+FROM node:18-alpine AS dev
+WORKDIR /usr/src/app
+COPY --from=base /usr/src/app/ .
+
+CMD ["npm", "run", "dev"]

README.md

@@ -1,23 +1,49 @@
 ## Config
+
 You need a .env file (this file is gitignored). You can find default values in default.env.
 Either copy theese to ./.env file or use the --env-file default.env flag when building
 
 ## Development
-You have to run veven alongside this project to get access to the api and database. So have veven running in its docker-containers.
 
-Then run:
+Have the docker deamon running, then run:
+
 ```bash
 docker-compose -f docker-compose.dev.yml up --build
 ```
 
+#### Working with the DB
+
+To remigrate the db, just rerun the prisma container
+To regenerate the client-libary from the schema file run:
+
+```bash
+npx prisma generate
+```
+
+in the projectnext container
+
+#### Reinstalling node_modules
+
+Since we are using volumes in dev, the dev container should keep itself up to date with your working directory. But you will need to reinstall packages manually in projectnext upon changing package.json. Run:
+
+```bash
+npm ci
+```
+
+inside projectnext-container
+
 ## Production
+
 This project is not meant to be deployed, but a build can be made by running
+
 ```bash
 docker-compose up --build
 ```
 
 ## Lint
+
 To lint the project run
+
 ```bash
 npm run lint
 ```

default.env

@@ -2,5 +2,3 @@ GOOGLE_MAPS_API_KEY=HMMMMMMMMM
 DB_NAME=devdb
 DB_USERNAME=user
 DB_PASSWORD=password
-
-DB_URI="postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}"

docker-compose.dev.yml

@@ -4,17 +4,22 @@ services:
   projectnext:
     build: 
       context: ./
-      dockerfile: ./Dockerfile.dev
+      dockerfile: ./Dockerfile
+      target: dev
     ports:
       - 3000:3000
     volumes:
       - ./src:/usr/src/app/src
+      - ./package.json:/usr/src/app/package.json
+      - ./package-lock.json:/usr/src/app/package-lock.json
+      - ./src/prisma/schema.prisma:/usr/src/app/src/prisma/schema.prisma
     environment:
-      DB_URI: ${DB_URI}
+      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
       GOOGLE_MAPS_API_KEY: ${GOOGLE_MAPS_API_KEY}
       NODE_ENV: development
     depends_on:
       - db
+      - prisma
     links:
       - db
 
@@ -29,6 +34,26 @@ services:
       POSTGRES_PASSWORD: ${DB_PASSWORD}
     volumes:
       - devdb:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "sh -c 'pg_isready -U ${DB_USERNAME} -d ${DB_NAME}'"]
+      interval: 3s
+      timeout: 3s
+      retries: 10
+
+  prisma:
+    build: 
+      context: ./src/prisma
+      dockerfile: ./Dockerfile
+      target: dev
+    environment:
+      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
+    volumes:
+      - ./src/prisma/schema.prisma:/usr/src/app/schema.prisma
+    depends_on:
+      db:
+        condition: service_healthy
+    links:
+      - db
 
 volumes:
   devdb:

docker-compose.yml

@@ -5,12 +5,18 @@ services:
     build:
       context: ./
       dockerfile: ./Dockerfile
+      target: prod
     ports:
       - 3000:3000
     environment:
-      DB_URI: ${DB_URI}
+      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
       GOOGLE_MAPS_API_KEY: ${GOOGLE_MAPS_API_KEY}
       NODE_ENV: production
+    depends_on:
+      - db
+      - prisma
+    links:
+      - db
 
   db:
     image: postgres:16.0-alpine
@@ -23,6 +29,24 @@ services:
       POSTGRES_PASSWORD: ${DB_PASSWORD}
     volumes:
       - proddb:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "sh -c 'pg_isready -U ${DB_USERNAME} -d ${DB_NAME}'"]
+      interval: 3s
+      timeout: 3s
+      retries: 10
+
+  prisma:
+    build: 
+      context: ./src/prisma
+      dockerfile: ./Dockerfile
+      target: prod
+    environment:
+      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
+    depends_on:
+      db:
+        condition: service_healthy
+    links:
+      - db
 
 volumes:
   proddb:

next.config.js

@@ -2,15 +2,6 @@
 const path = require('path')
 
 const nextConfig = { 
-    //Add some random config because of some issue with hot reload of next in docker
-    //This config might not be neccessary on later next releases
-    webpackDevMiddleware: config => {
-      config.watchOptions = {
-        poll: 800,
-        aggregateTimeout: 300,
-      }
-      return config
-    },
     sassOptions: {
       includePaths: [path.join(__dirname, 'src/styles')],
     },

package.json

@@ -6,11 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "docker:migrate:dev": "npx prisma migrate dev --name init && next dev"
+    "lint": "next lint"
   },
   "prisma": {
-    "schema": "src/prisma/schema.prisma"
+    "schema": "src/prisma/schema.prisma",
+    "seed": "node src/prisma/seed.js"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",

src/app/api/users/route.js

@@ -32,8 +32,11 @@ export async function POST(req) {
         if (
             error instanceof Prisma.PrismaClientKnownRequestError &&
             error.code === 'P2002'
-        ) {
+        ) 
+        {
             return Response.json({}, { status: 409 })
-        }       
+        }
+
+        throw error
     }   
 }

src/app/components/Loader/Loader.js

@@ -0,0 +1,13 @@
+import styles from './Loader.module.scss'
+import logo from '@/images/logo_simple.png'
+import Image from 'next/image'
+
+function Loader() {
+    return (
+        <div className={styles.Loader}>
+            <Image src={logo} />
+        </div>
+    )
+}
+
+export default Loader

src/app/components/Loader/Loader.module.scss

@@ -0,0 +1,5 @@
+@use '@/styles/ohma';
+
+.Loader {
+
+}

src/app/layout.js

@@ -1,6 +1,4 @@
 import { Inter } from 'next/font/google'
-import Head from 'next/head'
-import { v4 as uuid } from 'uuid'
 
 import NavBar from '@/components/NavBar/NavBar'
 import MobileNavBar from '@/components/NavBar/MobileNavBar'
@@ -18,24 +16,13 @@ const inter = Inter({ subsets: ['latin'] })
 export const metadata = {
   title: 'projectnext',
   description: '',
+  charset: 'utf-8',
 }
 
 export default function RootLayout({ children }) {
 
   return (
     <html lang="en">
-      <Head>
-        <meta key={uuid()} charset="utf-8" />
-        <meta key={uuid()} http-equiv="x-ua-compatible" content="ie=edge" />
-        <meta key={uuid()} name="viewport" content="width=device-width, initial-scale=1" />
-
-        <meta key={uuid()} property="og:title" content="Sanctus Omega Broderskab" />
-        <meta key={uuid()} property="og:image" content="../images/Omegamai.jpeg" />
-        <meta key={uuid()} property="og:description" content="Linjeforeningen for Elektronisk Systemdesign og Innovasjon (MTELSYS) og Kybernetikk og Robotikk (MTTK) ved Norges Tekniske-Naturvitenskapelige Universitet (NTNU)" />
-        <meta key={uuid()} property="twitter:title" content="Sanctus Omega Broderskab" />
-        <meta key={uuid()} property="twitter:image" content="../images/Omegamai.jpeg" />
-        <meta key={uuid()} property="twitter:description" content="Linjeforeningen for Elektronisk Systemdesign og Innovasjon (MTELSYS) og Kybernetikk og Robotikk (MTTK) ved Norges Tekniske-Naturvitenskapelige Universitet (NTNU)" />
-      </Head>
       <body className={inter.className}>
         <div className={styles.wrapper}>
           <div className={styles.navBar}>

src/prisma/Dockerfile

@@ -0,0 +1,26 @@
+#This container is responisble for running migrations
+FROM node:18-alpine AS base
+WORKDIR /usr/src/app
+RUN npm init es6
+RUN npm i prisma
+RUN npx prisma init
+COPY schema.prisma ./
+
+########################################################
+FROM node:18-alpine AS prod
+WORKDIR /usr/src/app
+COPY --from=base /usr/src/app .
+
+#DEPLOY NOT IMPLEMENTED YET: should be npy prisma migrate deploy.
+CMD ["npx", "prisma", "migrate", "dev", "--name" , "docker-migration", "--skip-generate"]
+
+########################################################
+FROM node:18-alpine AS dev
+WORKDIR /usr/src/app
+COPY --from=base /usr/src/app .
+
+RUN npm install @prisma/client
+RUN npx prisma generate
+COPY seed.js ./
+
+CMD ["/bin/sh", "-c", "npx prisma migrate dev --name docker-migration --skip-generate; node seed.js"]

src/prisma/schema.prisma

@@ -1,6 +1,3 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
 generator client {
   provider = "prisma-client-js"
 }
@@ -17,4 +14,4 @@ model User {
   email     String    @unique
 
   @@map("users")
-}
+}

src/prisma/seed.js

@@ -0,0 +1,27 @@
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
+
+console.log("seed starting...")
+async function main() {
+  const harambe = await prisma.user.upsert({
+    where: {
+        email: '[email protected]'
+    },
+    update: {
+
+    },
+    create: {
+        firstname: "Harambe",
+        lastname: "Harambesen",
+        email: '[email protected]',
+    },
+  })
+  console.log({ harambe })
+}
+main().then(async () => {
+    await prisma.$disconnect()
+}).catch(async (e) => {
+    console.error(e)
+    await prisma.$disconnect()
+    process.exit(1)
+})