Migrated skillwallet landing page to nextjs and adopted original desi…

.dockerignore

@@ -0,0 +1,12 @@
+.git/
+.gitignore
+**/.gitkeep
+**/.DS_Store
+.next/
+.dockerignore
+Dockerfile
+docker-compose.yml
+node_modules/
+nginx/
+deprecated/
+README.md

.gitignore

@@ -4,7 +4,9 @@
 /node_modules
 /.pnp
 .pnp.js
-
+.next
+.docz
+out
 # testing
 /coverage
 
@@ -17,9 +19,27 @@
 .env.development.local
 .env.test.local
 .env.production.local
-.env
 
+# Packages have their independent repo
+/packages
+
+# ignore log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.idea/
+.vscode/
+node_modules/
+build
+.DS_Store
+*.tgz
+my-app*
+template/src/__tests__/__snapshots__/
+lerna-debug.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.env.local
+/.changelog
+.npm/
+.vercel
+.firebase

Dockerfile

@@ -1,4 +1,43 @@
-FROM nginx:alpine
-COPY default.conf /etc/nginx/conf.d/default.conf
-COPY index.html /usr/share/nginx/html/index.html
-COPY /assets /usr/share/nginx/html/assets
+FROM node:alpine as builder
+
+
+WORKDIR /usr/app
+
+ENV NODE_OPTIONS=--openssl-legacy-provider
+
+RUN apk --update --no-cache \
+    add  \
+    automake \
+    g++ \
+    make \
+    bash \
+    git \
+    alpine-sdk  \
+    nasm  \
+    autoconf  \
+    build-base \
+    zlib \
+    zlib-dev \
+    libpng \
+    libpng-dev\
+    libwebp \
+    libwebp-dev \
+    libjpeg-turbo \
+    libjpeg-turbo-dev \
+    &&  rm -fr /var/cache/apk/*
+
+COPY ./package*.json ./
+
+RUN npm install --global pm2
+RUN npm install
+
+COPY ./ ./
+
+RUN npm run build
+RUN chmod -R 777 /usr/app
+# PORT 3000 is used internally by nginx (see /nginx/default.conf)
+EXPOSE 3000
+USER node
+
+# Launch app with PM2
+CMD [ "pm2-runtime", "start", "npm", "--", "start" ]

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  const presets = ['next/babel'];
+  const plugins = [['styled-components']];
+
+  return {
+    presets,
+    plugins,
+  };
+};

deprecated/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx:alpine
+COPY default.conf /etc/nginx/conf.d/default.conf
+COPY index.html /usr/share/nginx/html/index.html
+COPY /assets /usr/share/nginx/html/assets

assets/css/theme.css → deprecated/assets/css/theme.css

@@ -86,6 +86,7 @@ Updated   :  05/05/2021
   align-items: center;
   justify-content: center;
 }
+
 .values .border-bottom-v {
   border-bottom: 2px solid #f4f4f6;
 }

docker-compose.yml

@@ -0,0 +1,16 @@
+version: '3.9'
+services:
+  # container name is used in /nginx/default.conf as skillwallet_landing:3000;
+  # whereas PORT=3000 is defined in main Dockerfile so that nginx can communicate with pm2
+  skillwallet_landing_web: 
+    container_name: skillwallet_landing_web
+    build: ./
+
+  skillwallet_landing_nginx: 
+    container_name: skillwallet_landing_nginx
+    build: ./nginx
+    ports:
+      - 3001:80
+
+networks:
+  skillwallet_landing:

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

next.config.js

@@ -0,0 +1,9 @@
+const withPlugins = require('next-compose-plugins');
+
+const nextConfig = {
+  images: {
+    domains: [],
+  },
+};
+
+module.exports = withPlugins([], nextConfig);

nginx/Dockerfile

@@ -0,0 +1,14 @@
+FROM nginx:alpine
+
+# Remove any existing config files
+RUN rm /etc/nginx/conf.d/*
+
+# Copy config files
+# *.conf files in "conf.d/" dir get included in main config
+COPY ./default.conf /etc/nginx/conf.d/
+
+# Expose the listening port
+EXPOSE 80
+
+# Launch NGINX
+CMD [ "nginx", "-g", "daemon off;" ]

nginx/default.conf

@@ -0,0 +1,48 @@
+# Cache zone
+proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;
+
+upstream nextjs {
+  server skillwallet_landing_web:3000;
+}
+
+server {
+  listen 80 default_server;
+
+  server_name _;
+
+  server_tokens off;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_comp_level 4;
+  gzip_types text/css application/javascript image/svg+xml;
+
+  proxy_http_version 1.1;
+  proxy_set_header Upgrade $http_upgrade;
+  proxy_set_header Connection 'upgrade';
+  proxy_set_header Host $host;
+  proxy_cache_bypass $http_upgrade;
+
+  # BUILT ASSETS (E.G. JS BUNDLES)
+  # Browser cache - max cache headers from Next.js as build id in url
+  # Server cache - valid forever (cleared after cache "inactive" period)
+  location /_next/static {
+    proxy_cache STATIC;
+    proxy_pass http://nextjs;
+  }
+
+  # STATIC ASSETS (E.G. IMAGES)
+  # Browser cache - "no-cache" headers from Next.js as no build id in url
+  # Server cache - refresh regularly in case of changes
+  location /static {
+    proxy_cache STATIC;
+    proxy_ignore_headers Cache-Control;
+    proxy_cache_valid 60m;
+    proxy_pass http://nextjs;
+  }
+
+  # DYNAMIC ASSETS - NO CACHE
+  location / {
+    proxy_pass http://nextjs;
+  }
+}