fix(printer): fix issue with printer service, locating the right URL of the server

.env.example

@@ -4,6 +4,7 @@ SECRET_KEY=change-me
 
 # URLs
 PUBLIC_URL=http://localhost:3000
+PUBLIC_SERVER_URL=http://localhost:3100
 
 # Database
 POSTGRES_HOST=localhost

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Debug: Server",
+      "port": 9229,
+      "restart": true,
+      "stopOnEntry": false,
+      "protocol": "inspector"
+    },
+    {
+      "name": "Debug: Client",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm run dev:client",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

README.md

@@ -116,7 +116,7 @@ Reactive Resume would be nothing without the folks who supported me and kept the
 - DigitalOcean, infrastructure provider
 - Crowdin, translation management platform
 
-<a href="https://www.digitalocean.com/">
+<a href="https://pillai.xyz/digitalocean">
   <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px" />
 </a>
 

client/Dockerfile

@@ -36,13 +36,14 @@ RUN apk add --no-cache curl \
 
 COPY --from=builder /app/pnpm-*.yaml ./
 COPY --from=builder /app/package.json ./
+COPY --from=builder /app/client/package.json ./client/package.json
+
+RUN pnpm install -F client --frozen-lockfile --prod
+
 COPY --from=builder /app/client/.next ./client/.next
 COPY --from=builder /app/client/public ./client/public
 COPY --from=builder /app/client/next.config.js ./client/next.config.js
 COPY --from=builder /app/client/next-i18next.config.js ./client/next-i18next.config.js
-COPY --from=builder /app/client/package.json ./client/package.json
-
-RUN pnpm install -F client --frozen-lockfile --prod
 
 EXPOSE 3000
 

client/components/build/Center/ArtboardController.tsx

@@ -62,7 +62,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
     const url = await mutateAsync({ username, slug });
 
-    download(url);
+    download(`/api${url}`);
   };
 
   return (

client/components/build/RightSidebar/sections/Export.tsx

@@ -47,7 +47,7 @@ const Export = () => {
 
     const url = await mutateAsync({ username, slug });
 
-    download(url);
+    download(`/api${url}`);
   };
 
   return (

client/pages/[username]/[slug]/index.tsx

@@ -90,7 +90,7 @@ const Preview: NextPage<Props> = ({ username, slug, resume: initialData }) => {
     try {
       const url = await mutateAsync({ username, slug });
 
-      download(url);
+      download(`/api${url}`);
     } catch {
       toast.error('Something went wrong, please try again later.');
     }

client/pages/index.tsx

@@ -162,7 +162,7 @@ const Home: NextPage = () => {
       </section>
 
       <section className={styles.section}>
-        <a href="https://www.digitalocean.com/" target="_blank" rel="noreferrer">
+        <a href="https://pillai.xyz/digitalocean" target="_blank" rel="noreferrer">
           <Image src="/images/sponsors/digitalocean.svg" alt="Powered By DigitalOcean" width={200} height={40} />
         </a>
       </section>

client/pages/r/[shortId].tsx

@@ -60,7 +60,7 @@ const Preview: NextPage<Props> = ({ shortId }) => {
     try {
       const url = await mutateAsync({ username: resume.user.username, slug: resume.slug });
 
-      download(url);
+      download(`/api${url}`);
     } catch {
       toast.error('Something went wrong, please try again later.');
     }

client/services/resume.ts

@@ -1,6 +1,6 @@
+import env from '@beam-australia/react-env';
 import { Resume } from '@reactive-resume/schema';
-import { AxiosResponse } from 'axios';
-import isEmpty from 'lodash/isEmpty';
+import _axios, { AxiosResponse } from 'axios';
 
 import isBrowser from '@/utils/isBrowser';
 
@@ -22,9 +22,6 @@ export type FetchResumeByIdentifierParams = {
 
 export type FetchResumeByShortIdParams = {
   shortId: string;
-  options?: {
-    secretKey?: string;
-  };
 };
 
 export type RenameResumeParams = {
@@ -60,23 +57,26 @@ export type DeleteResumeParams = {
 
 export const fetchResumes = () => axios.get<Resume[]>('/resume').then((res) => res.data);
 
-export const fetchResumeByShortId = async ({ shortId, options = { secretKey: '' } }: FetchResumeByShortIdParams) => {
-  const requestOptions = isEmpty(options.secretKey) ? {} : { params: { secretKey: options.secretKey } };
-
-  return axios.get<Resume>(`/resume/short/${shortId}`, requestOptions).then((res) => res.data);
-};
-
 export const fetchResumeByIdentifier = async ({
   username,
   slug,
   options = { secretKey: '' },
 }: FetchResumeByIdentifierParams) => {
-  const prefix = !isBrowser && process.env.NODE_ENV === 'development' ? 'http://localhost:3100' : '';
-  const requestOptions = isEmpty(options.secretKey) ? {} : { params: { secretKey: options.secretKey } };
+  if (!isBrowser) {
+    const serverUrl = env('SERVER_URL');
+    const secretKey = options.secretKey;
 
-  return axios.get<Resume>(`${prefix}/resume/${username}/${slug}`, requestOptions).then((res) => res.data);
+    return _axios
+      .get<Resume>(`${serverUrl}/resume/${username}/${slug}`, { params: { secretKey } })
+      .then((res) => res.data);
+  }
+
+  return axios.get<Resume>(`/resume/${username}/${slug}`).then((res) => res.data);
 };
 
+export const fetchResumeByShortId = async ({ shortId }: FetchResumeByShortIdParams) =>
+  axios.get<Resume>(`/resume/short/${shortId}`).then((res) => res.data);
+
 export const createResume = (createResumeParams: CreateResumeParams) =>
   axios.post<Resume, AxiosResponse<Resume>, CreateResumeParams>('/resume', createResumeParams).then((res) => res.data);
 

docker-compose.yml

@@ -22,6 +22,7 @@ services:
     container_name: server
     env_file: .env
     environment:
+      - PUBLIC_URL=http://client:3000
       - POSTGRES_HOST=postgres
     ports:
       - 3100:3100
@@ -38,6 +39,8 @@ services:
       dockerfile: client/Dockerfile
     container_name: client
     env_file: .env
+    environment:
+      - PUBLIC_SERVER_URL=http://server:3100
     ports:
       - 3000:3000
     depends_on:

package.json

@@ -17,7 +17,7 @@
     "lint": "eslint --fix --ext .js,.ts,.tsx .",
     "format": "prettier --write \"./**/*.{js,ts,tsx,json}\"",
     "dev:schema": "pnpm -F schema dev",
-    "dev:server": "pnpm -F server start:dev",
+    "dev:server": "pnpm -F server start:debugc",
     "dev:client": "pnpm -F client dev",
     "dev": "env-cmd --silent concurrently --kill-others \"pnpm run dev:*\"",
     "build:schema": "pnpm -F schema build",

server/Dockerfile

@@ -31,15 +31,18 @@ FROM mcr.microsoft.com/playwright:focal as production
 
 WORKDIR /app
 
-RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+RUN apt-get update \
+  && apt-get install -y curl \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
 
 COPY --from=builder /app/pnpm-*.yaml ./
 COPY --from=builder /app/package.json ./
-COPY --from=builder /app/server/dist ./server/dist
 COPY --from=builder /app/server/package.json ./server/package.json
 
 RUN pnpm install -F server --frozen-lockfile --prod
 
+COPY --from=builder /app/server/dist ./server/dist
+
 EXPOSE 3100
 
 ENV PORT 3100

server/src/main.ts

@@ -10,6 +10,7 @@ const bootstrap = async () => {
   const app = await NestFactory.create<NestExpressApplication>(AppModule);
 
   // Middleware
+  app.enableCors({ credentials: true });
   app.enableShutdownHooks();
   app.use(cookieParser());
 

server/src/printer/printer.service.ts

@@ -7,7 +7,7 @@ import { join } from 'path';
 import { PDFDocument } from 'pdf-lib';
 import { Browser, chromium } from 'playwright-chromium';
 
-export const DELETION_TIME = 10 * 1000; // 10 seconds
+export const DELETION_TIME = 10 * 1000 * 1000; // 10 seconds
 
 @Injectable()
 export class PrinterService implements OnModuleInit, OnModuleDestroy {