Feat: Dockerizing using nginx reverse proxy (#280)

* minor docker fixes

* eslint config changes

* dockerfile changes to backend and frontend

* oauth enabled env flag

* sentry enabled env flag

* build: get alternatives for environment variables and static file storage

* build: automatically generate random secret key if not provided

* build: update docker compose for next url env add channels to requirements for asgi server and save files in local machine for docker environment

* build: update nginx conf for backend base url update backend dockerfile to make way for static file uploads

* feat: create a default user with given values else default values

* chore: update docker python version and other dependency version in docker

* build: update local settings file to run it in docker

* fix: update script to run in default production setting

* fix: env variable changes and env setup shell script added

* Added Single Dockerfile to run the Entire plane application

* docs build fixes

---------

Co-authored-by: Narayana <narayana.vadapalli1996@gmail.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>

apps/app/.env.example

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_API_BASE_URL = "localhost/"
+NEXT_PUBLIC_GOOGLE_CLIENTID="<-- google client id -->"
+NEXT_PUBLIC_GITHUB_ID="<-- github client id -->"
+NEXT_PUBLIC_SENTRY_DSN="<-- sentry dns -->"
+NEXT_PUBLIC_ENABLE_OAUTH=0
+NEXT_PUBLIC_ENABLE_SENTRY=0

apps/app/.eslintrc.js

@@ -1 +1,4 @@
-module.exports = require("config/.eslintrc");
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};

apps/app/Dockerfile.dev

@@ -0,0 +1,12 @@
+FROM node:18-alpine
+RUN apk add --no-cache libc6-compat
+RUN apk update
+# Set working directory
+WORKDIR /app
+
+
+COPY . .
+RUN yarn global add turbo
+RUN yarn install
+EXPOSE 3000
+CMD ["yarn","dev"]

apps/app/Dockerfile.web

@@ -4,33 +4,14 @@ RUN apk update
 # Set working directory
 WORKDIR /app
 
-RUN apk add curl
+RUN yarn global add turbo
+COPY . .
 
-
-RUN curl -fsSL "https://github.com/pnpm/pnpm/releases/latest/download/pnpm-linuxstatic-x64" -o /bin/pnpm; chmod +x /bin/pnpm;
-
-ENV PNPM_HOME="pnpm"
-ENV PATH="${PATH}:./pnpm"
-
-COPY ./apps ./apps
-COPY ./package.json ./package.json
-COPY ./.eslintrc.js ./.eslintrc.js
-COPY ./turbo.json ./turbo.json
-COPY ./pnpm-workspace.yaml ./pnpm-workspace.yaml
-COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
-
-RUN pnpm add -g turbo
 RUN turbo prune --scope=app --docker
 
 # Add lockfile and package.json's of isolated subworkspace
 FROM node:18-alpine AS installer
 
-RUN apk add curl
-
-RUN curl -fsSL "https://github.com/pnpm/pnpm/releases/latest/download/pnpm-linuxstatic-x64" -o /bin/pnpm; chmod +x /bin/pnpm;
-
-ENV PNPM_HOME="pnpm"
-ENV PATH="${PATH}:./pnpm"
 
 RUN apk add --no-cache libc6-compat
 RUN apk update
@@ -39,14 +20,14 @@ WORKDIR /app
 # First install the dependencies (as they change less often)
 COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
-RUN pnpm install
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install
 
 # Build the project
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
 
-RUN pnpm turbo run build --filter=app...
+RUN yarn turbo run build --filter=app
 
 FROM node:18-alpine AS runner
 WORKDIR /app
@@ -62,8 +43,9 @@ COPY --from=installer /app/apps/app/package.json .
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=installer --chown=captain:plane /app/apps/app/.next/standalone ./
+# COPY --from=installer --chown=captain:plane /app/apps/app/.next/standalone/node_modules ./apps/app/node_modules
 COPY --from=installer --chown=captain:plane /app/apps/app/.next/static ./apps/app/.next/static
 
-EXPOSE 3000
+ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD node apps/app/server.js
+EXPOSE 3000

apps/app/next.config.js

@@ -12,9 +12,13 @@ const nextConfig = {
     ],
   },
   output: "standalone",
+  experimental: {
+    // this includes files from the monorepo base two directories up
+    outputFileTracingRoot: path.join(__dirname, "../../"),
+  },
 };
 
-if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+if (process.env.NEXT_PUBLIC_ENABLE_SENTRY) {
   module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
 } else {
   module.exports = nextConfig;

apps/app/package.json

@@ -46,12 +46,12 @@
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "autoprefixer": "^10.4.7",
-    "config": "workspace:*",
+    "eslint-config-custom": "*",
     "eslint": "^8.31.0",
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.6",
-    "tsconfig": "workspace:*",
+    "tsconfig": "*",
     "typescript": "4.7.4"
   }
 }

apps/app/pages/signin.tsx

@@ -11,7 +11,12 @@ import authenticationService from "services/authentication.service";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // social button
-import { GoogleLoginButton, GithubLoginButton, EmailSignInForm } from "components/account";
+import {
+  GoogleLoginButton,
+  GithubLoginButton,
+  EmailSignInForm,
+  EmailPasswordForm,
+} from "components/account";
 // ui
 import { Spinner } from "components/ui";
 // icons
@@ -19,8 +24,6 @@ import Logo from "public/logo-with-text.png";
 // types
 import type { NextPage } from "next";
 
-const { NEXT_PUBLIC_GITHUB_ID } = process.env;
-
 const SignInPage: NextPage = () => {
   // router
   const router = useRouter();
@@ -69,7 +72,7 @@ const SignInPage: NextPage = () => {
         .socialAuth({
           medium: "github",
           credential,
-          clientId: NEXT_PUBLIC_GITHUB_ID,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
         })
         .then(async () => {
           await onSignInSuccess();
@@ -109,15 +112,25 @@ const SignInPage: NextPage = () => {
               Sign in to your account
             </h2>
             <div className="mt-16 bg-white py-8 px-4 sm:rounded-lg sm:px-10">
-              <div className="mb-4">
-                <EmailSignInForm handleSuccess={onSignInSuccess} />
-              </div>
-              <div className="mb-4">
-                <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-              </div>
-              <div className="mb-4">
-                <GithubLoginButton handleSignIn={handleGithubSignIn} />
-              </div>
+              {Boolean(process.env.NEXT_PUBLIC_ENABLE_OAUTH) ? (
+                <>
+                  <div className="mb-4">
+                    <EmailSignInForm handleSuccess={onSignInSuccess} />
+                  </div>
+                  <div className="mb-4">
+                    <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                  </div>
+                  <div className="mb-4">
+                    <GithubLoginButton handleSignIn={handleGithubSignIn} />
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="mb-4">
+                    <EmailPasswordForm onSuccess={onSignInSuccess} />
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>

apps/app/postcss.config.js

@@ -1,7 +1,4 @@
-const defaultConfig = require("config/postcss.config");
-
 module.exports = {
-  ...defaultConfig,
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

apps/app/tailwind.config.js

@@ -1,9 +1,4 @@
-/** @type {import('tailwindcss').Config} */
-
-const defaultConfig = require("config/tailwind.config");
-
 module.exports = {
-  ...defaultConfig,
   content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
   theme: {
     extend: {

apps/app/tsconfig.json

@@ -1,27 +1,3 @@
-// {
-//   "compilerOptions": {
-//     "baseUrl": ".",
-//     "target": "es5",
-//     "lib": ["dom", "dom.iterable", "esnext"],
-//     "allowJs": true,
-//     "skipLibCheck": true,
-//     "strict": true,
-//     "forceConsistentCasingInFileNames": true,
-//     "noEmit": true,
-//     "esModuleInterop": true,
-//     "module": "esnext",
-//     "moduleResolution": "node",
-//     "resolveJsonModule": true,
-//     "isolatedModules": true,
-//     "jsx": "preserve",
-//     "paths": {
-//       "@styles/*": ["styles/*"],
-//     },
-//     "incremental": true
-//   },
-//   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-//   "exclude": ["node_modules"]
-// }
 {
   "extends": "tsconfig/nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

apps/docs/.eslintrc.js

@@ -1 +1,4 @@
-module.exports = require('config/.eslintrc')
+module.exports = {
+  root: true,
+  extends: ['custom'],
+}

apps/docs/package.json

@@ -38,6 +38,7 @@
     "zustand": "^4.1.4"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
     "eslint": "8.26.0",
     "eslint-config-next": "13.0.2",
     "prettier": "^2.7.1",

apps/docs/src/pages/index.mdx

@@ -2,6 +2,7 @@ import { Guides } from '@/components/Guides'
 import { Resources } from '@/components/Resources'
 import { HeroPattern } from '@/components/HeroPattern'
 import { Heading } from '@/components/Heading'
+import { Button } from '@/components/Button'
 
 export const description = '.'
 

apps/docs/src/pages/projects.mdx

@@ -1,4 +1,5 @@
 import { Heading } from '@/components/Heading'
+import { Note } from '@/components/mdx'
 
 # Project setup
 

apps/docs/src/pages/quick-start.mdx

@@ -1,3 +1,5 @@
+import { Note } from '@/components/mdx'
+
 # Get Started
 
 This section of the Plane docs helps you get comfortable with the product and find your way around more effectively.

apps/docs/src/pages/self-hosting.mdx

@@ -1,6 +1,7 @@
 # Self Hosting Plane
 
 import { Heading } from '@/components/Heading'
+import { Note } from '@/components/mdx'
 
 <Note>
   Plane is still in its early days, not everything will be perfect yet, and
@@ -79,4 +80,4 @@ import { Heading } from '@/components/Heading'
 
 6. Visit
    1. [http://localhost:3000](http://localhost:3000) - (Frontend)
-   2. [http://localhost:8000](http://localhost:8000) - (Backend)
+   2. [http://localhost:8000](http://localhost:8000) - (Backend)

apps/docs/src/pages/workspace.mdx

@@ -1,4 +1,5 @@
 import { Heading } from '@/components/Heading'
+import { Note } from '@/components/mdx'
 
 # Workspace setup