feat(docker): web, backend-node

Author: karanpratapsingh

README.md

@@ -26,6 +26,9 @@ The main purpose of this repository is to provide a scalable "batteries included
 - **Includes CI** 
   CI is integral part of any project. This starterkit includes `Github Actions` by default. PR's for integration with any other providers are welcome 🙌
 
+- **Docker Support**
+  You can also use docker to develop and run your applications
+
 - **Testing Focused**
   This project uses [Jest](https://jestjs.io/) for testing framework and comes with sample tests which are easy to extend
 
@@ -167,25 +170,64 @@ yarn
 
 <i>To install dependencies for `web` and `backend` automatically, a postinstall script has been added in the main `package.json`</i>
 
+**Running web**
+
+- Docker (recommended)
+
+```
+$ cd web
+$ yarn dev
+```
+
+Once you're done working, use `yarn dev:down` command to stop the docker containers.
+
+- Locally
+
+```
+$ cd web
+$ yarn start:web
+```
+
 **Running backend**
 
+- Docker (recommended)
+
 ```
-yarn start:backend
+$ cd backend
+$ yarn dev
 ```
 
-<i>Make sure to use your own `DATABASE_URL` and not the default as provided in `.env.template` when developing your own project, as the demo database might be changed/deleted anytime</i>
+Once the container starts, you'll be inside the backend image. Now, simply migrate the db (only first time) and start the development server.
 
-**Running web**
+```
+$ yarn migrate
+$ yarn start
+```
+
+Once you're done working, exit out from the container and use `yarn dev:down` command to stop the docker containers.
+
+- Locally
+
+```
+$ cd backend
+$ yarn start
+```
+
+_Note: When running locally, you'll be required to run your own instance of postgres._
+
+**Running backend-go**
+
+If you don't have [`make`](https://en.wikipedia.org/wiki/Make_(software)) installed, commands are available in `Makefile`.
 
 ```
-yarn start:web
+$ cd backend-go
+$ make dev
 ```
 
 <i>
 Feel free to open a new issue if you're facing any problem 🙋
 </i>
 
-
 **Codegen**
 
 This starterkit uses [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator) to codegen lot of things like TypeScript types, React Apollo hooks and queries, GraphQL Schema AST etc.

backend/.dockerignore

@@ -0,0 +1 @@
+**/node_modules

backend/.env.template

@@ -1,3 +1,3 @@
 # Default environment variables for backend
 NODE_ENV=development | test | production
-DATABASE_URL=postgres://mjyjycebwtvykx:db2bd984b4ca9cdbcf23f6a504923e13564c7d91e766f4e2cc0b6475a8128f10@ec2-63-34-97-163.eu-west-1.compute.amazonaws.com:5432/dd6maefvg27ehd
+DATABASE_URL=postgres://user:password@db:5432/database

backend/Dockerfile

@@ -0,0 +1,7 @@
+# Ref: https://dev.to/karanpratapsingh/dockerize-node-application-222k
+FROM node:14.18-alpine
+WORKDIR /app
+COPY . .
+RUN yarn install
+EXPOSE 4000
+CMD tail -f /dev/null

backend/docker-compose.yml

@@ -0,0 +1,33 @@
+version: "3.8"
+
+services:
+  backend-node:
+    container_name: backend-node
+    image: backend-node
+    build:
+      context: .
+    volumes:
+      - .:/app
+      - dependencies:/app/node_modules
+    env_file:
+      - .env
+    ports:
+      - 4000:4000
+    depends_on:
+        - db
+
+  db:
+    image: postgres:12
+    container_name: db
+    environment:
+      - POSTGRES_USER=user
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=database
+    ports:
+      - 5432:5432
+    volumes:
+      - postgres:/var/lib/postgresql/data
+
+volumes:
+  dependencies:
+  postgres:

backend/package.json

@@ -18,12 +18,16 @@
     "url": "https://github.com/karanpratapsingh/fullstack-starterkit/issues"
   },
   "scripts": {
+    "dev": "docker compose up -d && yarn dev:exec",
+    "dev:exec": "docker exec -it backend-node /bin/sh",
+    "dev:down": "docker compose down",
     "start": "yarn build --watch --hot",
     "test": "yarn jest --passWithNoTests --detectOpenHandles --verbose",
-    "build": "webpack --color --progress",
+    "build": "webpack --color",
     "build:clean": "rm -rf build && yarn build",
     "generate:graphql": "yarn workspace @project-backend/graphql run generate",
     "generate:prisma": "yarn workspace @project-backend/db run generate",
+    "migrate": "yarn workspace @project-backend/db run migrate",
     "postinstall": "yarn generate:graphql && yarn generate:prisma"
   },
   "dependencies": {
@@ -38,6 +42,7 @@
     "typescript": "4.3.2"
   },
   "devDependencies": {
+    "@types/jest": "^27.0.2",
     "chalk": "4.1.1",
     "dotenv-webpack": "7.0.3",
     "esbuild-loader": "2.13.1",

backend/packages/db/package.json

@@ -21,8 +21,7 @@
     "generate": "yarn prisma generate --schema=./prisma/schema.prisma",
     "introspect": "yarn prisma introspect --schema=./prisma/schema.prisma",
     "studio": "yarn prisma studio --schema=./prisma/schema.prisma",
-    "migrate:save": "yarn prisma migrate save --schema=./prisma/schema.prisma",
-    "migrate:up": "yarn prisma migrate up --schema=./prisma/schema.prisma"
+    "migrate": "yarn prisma migrate dev --schema=./prisma/schema.prisma"
   },
   "dependencies": {
     "@prisma/client": "2.20.0",

backend/packages/db/prisma/migrations/20211104122622_initial_migration/migration.sql

@@ -0,0 +1,25 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" TEXT NOT NULL,
+    "authorId" TEXT,
+    "content" TEXT,
+    "published" BOOLEAN NOT NULL DEFAULT false,
+    "title" TEXT NOT NULL,
+
+    PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User.email_unique" ON "User"("email");
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

backend/packages/db/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

backend/yarn.lock

@@ -1563,6 +1563,17 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.2.5":
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.5.tgz#420765c052605e75686982d24b061b4cbba22132"
+  integrity sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@josephg/resolvable@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@josephg/resolvable/-/resolvable-1.0.1.tgz#69bc4db754d79e1a2f17a650d3466e038d94a5eb"
@@ -1921,6 +1932,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest@^27.0.2":
+  version "27.0.2"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.2.tgz#ac383c4d4aaddd29bbf2b916d8d105c304a5fcd7"
+  integrity sha512-4dRxkS/AFX0c5XW6IPMNOydLn2tEhNhJV7DnYK+0bjoJZ+QTmfucBlihX7aoEsh/ocYtkLC73UbnBXBXIxsULA==
+  dependencies:
+    jest-diff "^27.0.0"
+    pretty-format "^27.0.0"
+
 "@types/js-yaml@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.1.tgz#5544730b65a480b18ace6b6ce914e519cec2d43b"
@@ -2336,6 +2355,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -3529,6 +3553,11 @@ diff-sequences@^27.0.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.1.tgz#9c9801d52ed5f576ff0a20e3022a13ee6e297e7c"
   integrity sha512-XPLijkfJUh/PIBnfkcSHgvD6tlYixmcMAn3osTk6jt+H0v/mgURto1XUiD9DKuGX5NDoVS6dSlA23gd9FUaCFg==
 
+diff-sequences@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.6.tgz#3305cb2e55a033924054695cc66019fd7f8e5723"
+  integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -5071,6 +5100,16 @@ jest-config@^27.0.4:
     micromatch "^4.0.4"
     pretty-format "^27.0.2"
 
+jest-diff@^27.0.0:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.3.1.tgz#d2775fea15411f5f5aeda2a5e02c2f36440f6d55"
+  integrity sha512-PCeuAH4AWUo2O5+ksW4pL9v5xJAcIKPUPfIhZBcG1RKv/0+dvaWTQK1Nrau8d67dp65fOqbeMdoil+6PedyEPQ==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.0.6"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
+
 jest-diff@^27.0.2:
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.0.2.tgz#f315b87cee5dc134cf42c2708ab27375cc3f5a7e"
@@ -5129,6 +5168,11 @@ jest-get-type@^27.0.1:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.0.1.tgz#34951e2b08c8801eb28559d7eb732b04bbcf7815"
   integrity sha512-9Tggo9zZbu0sHKebiAijyt1NM77Z0uO4tuWOxUCujAiSeXv30Vb5D4xVF4UR4YWNapcftj+PbByU54lKD7/xMg==
 
+jest-get-type@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.3.1.tgz#a8a2b0a12b50169773099eee60a0e6dd11423eff"
+  integrity sha512-+Ilqi8hgHSAdhlQ3s12CAVNd8H96ZkQBfYoXmArzZnOfAtVAJEiPDBirjByEblvG/4LPJmkL+nBqPO3A1YJAEg==
+
 jest-haste-map@^27.0.2:
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.0.2.tgz#3f1819400c671237e48b4d4b76a80a0dbed7577f"
@@ -6417,6 +6461,16 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+pretty-format@^27.0.0, pretty-format@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.3.1.tgz#7e9486365ccdd4a502061fa761d3ab9ca1b78df5"
+  integrity sha512-DR/c+pvFc52nLimLROYjnXPtolawm+uWDxr4FjuLDLUn+ktWnSN851KoHwHzzqq6rfCOjkzN8FLgDrSub6UDuA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^27.0.2:
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.0.2.tgz#9283ff8c4f581b186b2d4da461617143dca478a4"

package.json

@@ -17,10 +17,6 @@
     "url": "https://github.com/karanpratapsingh/fullstack-starterkit/issues"
   },
   "scripts": {
-    "start:web": "cd web && yarn start",
-    "start:backend": "cd backend && yarn start",
-    "build:web": "cd web && yarn build",
-    "build:backend": "cd backend && yarn build",
     "lint": "yarn eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "yarn prettier --write . && yarn lint --fix",
     "e2e": "yarn cypress open",

web/.dockerignore

@@ -0,0 +1 @@
+**/node_modules

web/Dockerfile

@@ -0,0 +1,11 @@
+# Ref: https://dev.to/karanpratapsingh/dockerize-your-react-app-4j2e
+FROM node:14.18-alpine
+ENV NODE_ENV development
+ENV TSC_WATCHFILE UseFsEvents
+WORKDIR /app
+COPY package.json .
+COPY yarn.lock .
+RUN yarn install
+COPY . .
+EXPOSE 3000
+CMD tail -f /dev/null

web/docker-compose.yml

@@ -0,0 +1,19 @@
+version: "3.8"
+
+services:
+ web:
+    container_name: web
+    image: web
+    restart: always
+    build:
+      context: .
+    volumes:
+      - .:/app
+      - dependencies:/app/node_modules
+    env_file:
+      - .env
+    ports:
+      - 3000:3000
+
+volumes:
+  dependencies:

web/package.json

@@ -17,6 +17,8 @@
     "url": "https://github.com/karanpratapsingh/fullstack-starterkit/issues"
   },
   "scripts": {
+    "dev": "docker compose up",
+    "dev:down": "docker compose down",
     "start": "craco start",
     "build": "craco build",
     "test": "yarn test:clean && craco test --watchAll=false",