feat(app): Restructures directories

docker-compose.yml

@@ -3,40 +3,42 @@ version: "3"
 services:
   backend:
     build:
-      context: ./backend
+      context: ./services/backend
     depends_on:
       - db
-    env_file: ./backend/.env
+    env_file: ./services/backend/.env
     ports:
-      - 8080:8080
+      - "8080:8080"
     restart: always
     volumes:
-      - ./backend:/backend-app
+      - ./services/backend:/usr/src/app
 
   frontend:
     build:
-      context: ./frontend
+      context: ./services/frontend
     command: yarn dev
     depends_on:
       - db
       - backend
       - authentication
     volumes:
-      - ./frontend:/frontend-app
+      - ./services/frontend:/usr/src/app
+      - "/usr/src/app/node_modules"
     ports:
       - "3000:3000"
 
   authentication:
     build:
-      context: ./authentication
+      context: ./services/authentication
     command: yarn dev
-    env_file: ./authentication/.env
+    env_file: ./services/authentication/.env
     depends_on:
       - db
     ports:
       - "3030:3030"
     volumes:
-      - ./authentication:/authentication-app
+      - ./services/authentication:/usr/src/app
+      - "/usr/src/app/node_modules"
 
   db:
     image: postgres:11.3-alpine

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-hasura-boilerplate",
-  "version": "0.0.0-development.4",
+  "version": "0.0.0-development.5",
   "description": "Tool to monitor feedback from QA",
   "keywords": [
     "feedback"
@@ -16,6 +16,7 @@
   },
   "homepage": "https://github.com/nextjs-hasura-boilerplate/nextjs-hasura-boilerplate#readme",
   "devDependencies": {
+    "@types/express": "^4.17.3",
     "cz-conventional-changelog": "3.1.0",
     "husky": "^4.2.3",
     "release-it": "^12.6.2"

services/authentication/Dockerfile

@@ -0,0 +1,20 @@
+FROM mhart/alpine-node:11.1.0
+
+# Set working directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# Install necessary packages for debugging
+RUN apk upgrade --update-cache --available && \
+  apk add openssl && \
+  rm -rf /var/cache/apk/*
+
+# Add `/usr/src/app/node_modules/.bin` to $PATH
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+
+# Install and cache app dependencies
+ADD package.json /usr/src/app/package.json
+RUN yarn install
+
+# Start app
+CMD ["yarn", "dev"]

services/backend/Dockerfile

@@ -0,0 +1,7 @@
+FROM hasura/graphql-engine:v1.1.0
+
+# Set working directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+COPY . /usr/src/app

services/frontend/Dockerfile

@@ -0,0 +1,21 @@
+FROM mhart/alpine-node:11.1.0
+
+# Set working directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# Install necessary packages for debugging
+RUN apk update && apk upgrade && apk add --no-cache bash git
+
+# Add `/usr/src/app/node_modules/.bin` to $PATH
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+
+# Install and cache app dependencies
+ADD package.json /usr/src/app/package.json
+RUN yarn install
+RUN yarn global add typescript
+
+EXPOSE 3000
+
+# Start app
+CMD ["yarn", "dev"]

frontend/components/index/index.tsx → services/frontend/components/index/index.tsx

@@ -14,11 +14,11 @@ const Index = () => {
   const { data, loading, error } = useSubscription(fetchUsersSubscription)
 
   if (loading) {
-    return <div>Loading...</div>
+    return <div>Loading1234...</div>
   }
 
   if (error) {
-    return <p>Error: {error.message}</p>
+    return <p>Error1234: {error.message}</p>
   }
 
   return (

frontend/package.json → services/frontend/package.json

@@ -4,7 +4,7 @@
   "author": "nirmalya.email@gmail.com",
   "license": "MIT",
   "scripts": {
-    "dev": "next",
+    "dev": "nodemon server.ts",
     "build:analyze": "ANALYZE=true next build && tsc --project tsconfig.server.json",
     "build": "next build && tsc --project tsconfig.server.json",
     "start": "NODE_ENV=production next start",
@@ -20,6 +20,7 @@
     "apollo-link-ws": "^1.0.19",
     "apollo-utilities": "^1.3.3",
     "dotenv-webpack": "^1.7.0",
+    "express": "^4.17.1",
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.3",
     "isomorphic-unfetch": "^3.0.0",
@@ -33,6 +34,7 @@
     "subscriptions-transport-ws": "^0.9.16"
   },
   "devDependencies": {
+    "@types/express": "^4.17.3",
     "@types/lodash": "^4.14.149",
     "@types/next": "^9.0.0",
     "@types/node": "^13.7.6",
@@ -41,6 +43,7 @@
     "cross-env": "^7.0.0",
     "husky": "^4.2.3",
     "lint-staged": "^10.0.8",
+    "nodemon": "^2.0.2",
     "prettier": "^1.19.1",
     "ts-node": "^8.6.2",
     "typescript": "^3.8.2"

frontend/pages/index.tsx → services/frontend/pages/index.tsx

@@ -8,7 +8,7 @@ const IndexPage = () => {
   return (
     <Fragment>
       <Head>
-        <title>Index Page</title>
+        <title>Index1234 Page</title>
       </Head>
       <Page />
     </Fragment>

services/frontend/server.ts

@@ -0,0 +1,26 @@
+import next from 'next'
+import express from 'express'
+import { parse } from 'url'
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app
+  .prepare()
+  .then(() => {
+    const server = express()
+    server.get('*', (req: any, res: any) => {
+      const parsedUrl = parse(req.url, true)
+
+      handle(req, res, parsedUrl)
+    })
+
+    server.listen(process.env.PORT || 3000, () => {
+      console.log('⚡️ Ready on http://localhost:3000')
+    })
+  })
+  .catch(ex => {
+    console.error(ex.stack)
+    process.exit(1)
+  })