thuang-765-next-js

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.8'
+version: "3.8"
 
 services:
   database:
@@ -45,7 +45,7 @@ services:
     depends_on:
       - backend
     ports:
-      - "8000:8000"
+      - "3000:3000"
     command: ["./container_init.sh"]
     environment:
       - DEPLOYMENT_STAGE=dev

frontend/.dockerignore

@@ -58,16 +58,16 @@ typings/
 # configs
 src/configs/configs.js
 
-# gatsby files
-.cache/
-public
-
 # Mac files
 .DS_Store
 
 # Yarn
 yarn-error.log
 .pnp/
 .pnp.js
+
 # Yarn Integrity file
 .yarn-integrity
+
+# Next.js
+.next

frontend/.gitignore

@@ -1,3 +1,5 @@
+# WARNING: PLEASE MAKE SURE TO KEEP THIS FILE IN SYNC WITH `.dockerignore`
+
 # Logs
 logs
 *.log
@@ -58,16 +60,16 @@ typings/
 # configs
 src/configs/configs.js
 
-# gatsby files
-.cache/
-public
-
 # Mac files
 .DS_Store
 
 # Yarn
 yarn-error.log
 .pnp/
 .pnp.js
+
 # Yarn Integrity file
 .yarn-integrity
+
+# Next.js
+.next

frontend/.prettierignore

@@ -3,3 +3,4 @@ package.json
 package-lock.json
 public
 venv
+.next

frontend/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  plugins: [
+    [
+      "styled-components",
+      {
+        displayName: true,
+        preprocess: false,
+        ssr: true,
+      },
+    ],
+  ],
+  presets: ["next/babel"],
+};

frontend/container_init.sh

@@ -9,7 +9,7 @@ if [ ! -e ./node_modules ]; then
 fi
 ln -sf /opt/node_app/node_modules/* /opt/node_app/node_modules/.bin ./node_modules/.
 if [ ! -z "$API_URL" ]; then
-  cat src/configs/rdev.js | envsubst > src/configs/configs.js
+  cat src/configs/rdev.js | envsubst >src/configs/configs.js
 else
   cp src/configs/local.js src/configs/configs.js
 fi
@@ -21,8 +21,11 @@ fi
 
 # Build and run without dev mode in remote dev env.
 if [ "${DEPLOYMENT_STAGE}" == "dev" ]; then
-    exec gatsby develop --host 0.0.0.0
+  exec npm run dev
 else
-    npm run build
-    exec gatsby serve --host 0.0.0.0
+  # We need "-- --" because `npm run build-and-start-prod`
+  # runs `npm run build && npm run serve` under the hood,
+  # so we need to pass `-- -p 9000` to `npm run serve`, which
+  # will then call `next start -p 9000` correctly
+  exec npm run build-and-start-prod -- -- -p 9000
 fi

frontend/jest/jest-preprocess.js

@@ -1,9 +1,5 @@
 const babelOptions = {
-  presets: [
-    "@babel/preset-react",
-    "babel-preset-gatsby",
-    "@babel/preset-typescript",
-  ],
+  presets: ["@babel/preset-react", "@babel/preset-typescript"],
 };
 
 module.exports = require("babel-jest").createTransformer(babelOptions);

frontend/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

frontend/next.config.js

@@ -0,0 +1,56 @@
+const withImages = require("next-images");
+
+const configs = require(__dirname + "/src/configs/configs.js");
+const nodeEnv = require(__dirname + "/src/common/constants/nodeEnv.js");
+
+const { createSecureHeaders } = require("next-secure-headers");
+
+const isProdBuild = process.env.NODE_ENV === nodeEnv.PRODUCTION;
+
+const SCRIPT_SRC = ["'self'"];
+
+module.exports = withImages({
+  future: { webpack5: true },
+
+  headers() {
+    return [
+      {
+        headers: createSecureHeaders({
+          contentSecurityPolicy: {
+            directives: {
+              baseUri: "'self'",
+              connectSrc: [
+                "'self'",
+                "sentry.prod.si.czi.technology",
+                configs.API_URL,
+              ],
+              defaultSrc: ["'self'"],
+              fontSrc: ["'self'", "https://fonts.gstatic.com"],
+              formAction: "'self'",
+              frameAncestors: ["'none'"],
+              imgSrc: ["'self'", "data:"],
+              manifestSrc: ["'self'"],
+              mediaSrc: ["'self'"],
+              objectSrc: ["'none'"],
+              reportURI:
+                configs.SENTRY_DEPLOYMENT_ENVIRONMENT &&
+                "https://sentry.prod.si.czi.technology/api/167/security/?sentry_key=0432f3b3ceba4bc08d28dfb61fa29707&sentry_environment=" +
+                  configs.SENTRY_DEPLOYMENT_ENVIRONMENT,
+              scriptSrc: isProdBuild
+                ? SCRIPT_SRC
+                : [...SCRIPT_SRC, "'unsafe-eval'"],
+              styleSrc: [
+                "'self'",
+                "'unsafe-inline'",
+                "https://fonts.googleapis.com",
+              ],
+              upgradeInsecureRequests: true,
+              workerSrc: true,
+            },
+          },
+        }),
+        source: "/(.*)",
+      },
+    ];
+  },
+});