Merge pull request #681 from CodeForAfrica/feature/vpn-manager-setup

Feature/vpn manager setup

.gitignore

@@ -54,3 +54,9 @@ apps/promisetracker/public/data/**
 storybook-static
 
 mongo-keyfile
+
+#Google credentials
+credentials.json
+
+# Sentry Config File
+.sentryclirc

Dockerfile.vpnmanager

@@ -0,0 +1,68 @@
+FROM node:18-alpine as node-alpine
+
+# Always install security updated e.g. https://pythonspeed.com/articles/security-updates-in-docker/
+# Update local cache so that other stages don't need to update cache
+RUN apk update \
+    && apk upgrade
+
+
+FROM node-alpine as base
+
+RUN apk add --no-cache libc6-compat
+
+ARG PNPM_VERSION=8.5.0
+
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
+
+WORKDIR /workspace
+
+COPY pnpm-lock.yaml .
+
+RUN pnpm fetch
+
+
+FROM base as builder
+
+
+WORKDIR /workspace
+
+COPY *.yaml *.json ./
+COPY packages ./packages
+COPY apps/vpnmanager ./apps/vpnmanager
+
+# Use virtual store: https://pnpm.io/cli/fetch#usage-scenario
+RUN pnpm install --recursive --offline --frozen-lockfile
+
+# NOTE: ARG values are only available **after** ARG statement & hence we need
+#       to separate NEXT_PUBLIC_APP_URL and PAYLOAD_PUBLIC_APP_URL into
+#       multiple ARG statements so that PAYLOAD can use the value defined
+#       in NEXT.
+ARG PORT=3000 \
+    # Sentry config for source maps upload (needed at build time only)
+    SENTRY_AUTH_TOKEN="" \
+    SENTRY_ENV="local" \
+    SENTRY_ORG="" \
+    SENTRY_PROJECT="" \
+    SENTRY_DSN=""
+RUN pnpm build --filter=vpnmanager
+
+FROM builder as runner
+
+RUN rm -rf /var/cache/apk/*
+
+ARG PORT \
+    SENTRY_ENV
+
+ENV NODE_ENV=production \
+    PORT=${PORT} \
+    SENTRY_ENV=${SENTRY_ENV} \
+    SENTRY_DSN=${SENTRY_DSN} \
+    SENTRY_ORG=${SENTRY_ORG} \
+    SENTRY_PROJECT=${SENTRY_PROJECT} \
+    SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}
+
+WORKDIR /workspace/apps/vpnmanager
+
+EXPOSE ${PORT}
+
+CMD [ "pnpm", "run", "start" ]

Makefile

@@ -1,10 +1,13 @@
 # Makefile
 
-.PHONY: charterafrica mongodb mongodb-keyfile
+.PHONY: charterafrica mongodb mongodb-keyfile vpnmanager
 
 charterafrica:
 	docker compose --env-file apps/charterafrica/.env.local up charterafrica --build -d
 
+vpnmanager:
+	docker compose --env-file apps/vpnmanager/.env.local up vpnmanager --build -d
+
 mongodb:
 	docker compose --env-file apps/charterafrica/.env.local up --wait mongodb
 

apps/vpnmanager/.env.template

@@ -0,0 +1,6 @@
+NEXT_APP_GOOGLE_CREDENTIALS=/path/to/credentials.json
+NEXT_APP_GOOGLE_SHEET_ID=
+NEXT_APP_GOOGLE_SHEET_RANGE=New Hires!A:Z
+NEXT_APP_VPN_API_URL=
+SENTRY_AUTH_TOKEN=
+SENTRY_DSN=

apps/vpnmanager/README.md

@@ -0,0 +1,45 @@
+# VPN Manager
+
+This is the cfa Outline VPN Manager
+
+### Development
+
+## Getting Started
+
+First create `.env.local` file in the root directory of the project.
+
+```bash
+cp  env.template .env.local
+```
+
+and modify the `.env.local` file according to your needs.
+
+#### Note
+
+The default `.env` file is for the 'Publicly' visible environment variables.
+
+## Script
+
+```bash
+ pnpm process-new-hires
+```
+
+## Web
+
+Run the development server:
+
+```bash
+pnpm  dev
+```
+
+### Deployment.
+
+```bash
+ docker-compose up --build vpnmanager
+```
+
+or
+
+```bash
+make vpnmanager
+```

apps/vpnmanager/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/vpnmanager/next.config.mjs

@@ -0,0 +1,38 @@
+import { withSentryConfig } from "@sentry/nextjs";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@commons-ui/core", "@commons-ui/next"],
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  webpack: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.svg$/i,
+        type: "asset",
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+      {
+        test: /\.md$/,
+        loader: "frontmatter-markdown-loader",
+      },
+    );
+    config.experiments = { ...config.experiments, topLevelAwait: true }; // eslint-disable-line no-param-reassign
+    return config;
+  },
+};
+
+export default withSentryConfig(nextConfig, {
+  silent: true,
+  hideSourceMaps: true,
+  org: process.env.SENTRY_ORG,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  project: process.env.SENTRY_PROJECT,
+});

apps/vpnmanager/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "vpnmanager",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "pnpm run build-ts && next build",
+    "start": "next start",
+    "build-ts": "tsc --project tsconfig.server.json && tsc-alias -p tsconfig.server.json",
+    "process-new-hires": "node dist/src/lib/processNewHires.js"
+  },
+  "dependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@commons-ui/core": "workspace:*",
+    "@commons-ui/next": "workspace:*",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.20",
+    "@mui/utils": "^5.14.20",
+    "@sentry/nextjs": "^7.105.0",
+    "@svgr/webpack": "^8.1.0",
+    "@types/jest": "^29.5.12",
+    "googleapis": "^133.0.0",
+    "jest": "^29.7.0",
+    "next": "14.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsc-alias": "^1.8.8",
+    "tsconfig-paths": "^4.2.0"
+  },
+  "devDependencies": {
+    "@commons-ui/testing-library": "workspace:*",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8.55.0",
+    "eslint-config-commons-ui": "workspace:*",
+    "eslint-import-resolver-webpack": "^0.13.8",
+    "eslint-plugin-import": "^2.29.0",
+    "typescript": "^5"
+  }
+}

apps/vpnmanager/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

apps/vpnmanager/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Code for Africa",
+  "short_name": "CfA",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/vpnmanager/sentry.client.config.ts

@@ -0,0 +1,16 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  tracesSampleRate: 1,
+  environment: process.env.SENTRY_ENV,
+  debug: false,
+  replaysOnErrorSampleRate: 1.0,
+  replaysSessionSampleRate: 0.1,
+  integrations: [
+    Sentry.replayIntegration({
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

apps/vpnmanager/sentry.edge.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  environment: process.env.SENTRY_ENV,
+  tracesSampleRate: 1,
+  debug: false,
+});

apps/vpnmanager/sentry.server.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  environment: process.env.SENTRY_ENV,
+  tracesSampleRate: 1,
+  debug: false,
+});