add docker, docker-compose, setup github action for build & push to d…

…ocker hub & update readme

.dockerignore

@@ -0,0 +1,28 @@
+# dependencies
+node_modules
+
+# next.js
+.next
+
+# vercel
+.vercel
+
+# 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
+
+# docker file
+Dockerfile
+docker-compose.yml
+kubernetes-deployment.yml

.github/workflows/main.yml

@@ -0,0 +1,62 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI to Docker Hub
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Check Out Repo
+        uses: actions/[email protected]
+
+      # Set up cache for the builder
+      - name: Cache Docker layers
+        uses: actions/[email protected]
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      # Login to docker
+      - name:  Docker Login
+        uses: docker/[email protected]
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+
+      # Set up docker buildx
+      - name: Docker Setup Buildx
+        uses: docker/[email protected]
+
+      # Build and push docker images
+      - name: Build and push Docker images
+        uses: docker/[email protected]
+        with:
+          context: ./
+          file: ./Dockerfile
+          builder: ${{ steps.buildx.outputs.name }}
+          push: true
+          tags:  danangekal/next-typescript-pwa-starter:latest
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}

Dockerfile

@@ -0,0 +1,26 @@
+# Set image from base on offical node lts alpine
+ARG VERSION=lts-alpine
+FROM node:$VERSION
+
+# Set label maintainer, version & description
+LABEL maintainer="[email protected]"
+LABEL version="0.1.0"
+LABEL description="Unofficial Next.js + Typescript + PWA starter with a latest package"
+
+# Set working directory
+WORKDIR /app
+
+# Copy all files
+COPY . .
+
+# Install dependencies
+RUN yarn install --frozen-lockfile
+
+# Build app
+RUN yarn build
+
+# Expose the listening port
+EXPOSE 3000
+
+# Run yarb start script when container starts
+CMD yarn start

README.md

@@ -33,6 +33,28 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+#### Docker Build
+```bash
+docker build -t next-typescript-pwa-starter .
+```
+
+#### Docker Run
+```bash
+docker run --rm -it -p 3000:3000 next-typescript-pwa-starter
+```
+
+#### Docker Compose
+```bash
+docker-compose up
+```
+
+#### Docker Images
+You can use images available on docker hub [next-typescript-pwa-starter](https://hub.docker.com/r/danangekal/next-typescript-pwa-starter).
+
+```bash
+docker pull danangekal/next-typescript-pwa-starter
+```
+
 ## Features
 
 - [React.js 17](https://reactjs.org/blog/2020/10/20/react-v17.html) - Blog introduce React v17.0.
@@ -41,8 +63,9 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
 - [Eslint 7](https://eslint.org/docs/user-guide/getting-started) - Documentation of Eslint.
 - [Prettier 2](https://prettier.io/docs/en/index.html) - Documentation of Prettier.
 - [Husky 5](https://typicode.github.io/husky/#/) - Documentation of Husky.
-- [lint-staged 10](https://github.com/okonet/lint-staged) - Documentation of lint-staged.
+- [Lint Staged 10](https://github.com/okonet/lint-staged) - Documentation of Lint Staged.
 - [Next PWA 5](https://www.npmjs.com/package/next-pwa) - Documentation of Next PWA.
+- [Docker](https://docs.docker.com/) - Documentation of Docker.
 
 ## Learn More
 

docker-compose.yml

@@ -0,0 +1,6 @@
+version: "3.9"
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"