refactor(server): use proxy mechanisms to remove server_url config

client/next.config.js

@@ -15,6 +15,19 @@ const nextConfig = {
     domains: ['www.gravatar.com'],
   },
 
+  async rewrites() {
+    if (process.env.NODE_ENV === 'development') {
+      return [
+        {
+          source: '/api/:path*',
+          destination: 'http://localhost:3100/api/:path*',
+        },
+      ];
+    }
+
+    return [];
+  },
+
   // Hack to make Tailwind darkMode 'class' strategy with CSS Modules
   // Ref: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-968368156
   webpack: (config) => {

client/pages/r/[shortId].tsx

@@ -16,7 +16,7 @@ import Page from '@/components/build/Center/Page';
 import { ServerError } from '@/services/axios';
 import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
 import { fetchResumeByShortId } from '@/services/resume';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { useAppDispatch } from '@/store/hooks';
 import { setResume } from '@/store/resume/resumeSlice';
 import styles from '@/styles/pages/Preview.module.scss';
 
@@ -26,34 +26,18 @@ type QueryParams = {
 
 type Props = {
   shortId: string;
-  resume?: Resume;
 };
 
 export const getServerSideProps: GetServerSideProps<Props> = async ({ query, locale = 'en' }) => {
   const { shortId } = query as QueryParams;
 
-  try {
-    const resume = await fetchResumeByShortId({ shortId });
-
-    return { props: { shortId, resume, ...(await serverSideTranslations(locale, ['common'])) } };
-  } catch {
-    return { props: { shortId, ...(await serverSideTranslations(locale, ['common'])) } };
-  }
+  return { props: { shortId, ...(await serverSideTranslations(locale, ['common'])) } };
 };
 
-const Preview: NextPage<Props> = ({ shortId, resume: initialData }) => {
+const Preview: NextPage<Props> = ({ shortId }) => {
   const dispatch = useAppDispatch();
 
-  const resume = useAppSelector((state) => state.resume);
-
-  useEffect(() => {
-    if (initialData && !isEmpty(initialData)) {
-      dispatch(setResume(initialData));
-    }
-  }, [dispatch, initialData]);
-
-  useQuery<Resume>(`resume/${shortId}`, () => fetchResumeByShortId({ shortId }), {
-    initialData,
+  const { data: resume } = useQuery<Resume>(`resume/${shortId}`, () => fetchResumeByShortId({ shortId }), {
     refetchOnMount: false,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
@@ -64,7 +48,11 @@ const Preview: NextPage<Props> = ({ shortId, resume: initialData }) => {
 
   const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf);
 
-  if (isEmpty(resume)) return null;
+  useEffect(() => {
+    if (resume) dispatch(setResume(resume));
+  }, [resume, dispatch]);
+
+  if (!resume || isEmpty(resume)) return null;
 
   const layout: string[][][] = get(resume, 'metadata.layout', []);
 

client/services/axios.ts

@@ -1,4 +1,3 @@
-import env from '@beam-australia/react-env';
 import _axios, { AxiosError } from 'axios';
 import Router from 'next/router';
 
@@ -13,13 +12,7 @@ export type ServerError = {
   path: string;
 };
 
-const axios = _axios.create({
-  baseURL: `${env('SERVER_URL')}/api`,
-});
-
-export const uninterceptedAxios = _axios.create({
-  baseURL: `${env('SERVER_URL')}/api`,
-});
+const axios = _axios.create({ baseURL: '/api' });
 
 axios.interceptors.request.use((config) => {
   const { accessToken } = store.getState().auth;

client/services/resume.ts

@@ -2,6 +2,8 @@ import { Resume } from '@reactive-resume/schema';
 import { AxiosResponse } from 'axios';
 import isEmpty from 'lodash/isEmpty';
 
+import isBrowser from '@/utils/isBrowser';
+
 import axios from './axios';
 
 export type CreateResumeParams = {
@@ -69,9 +71,10 @@ export const fetchResumeByIdentifier = async ({
   slug,
   options = { secretKey: '' },
 }: FetchResumeByIdentifierParams) => {
+  const prefix = !isBrowser && process.env.NODE_ENV === 'development' ? 'http://localhost:3100/api' : '';
   const requestOptions = isEmpty(options.secretKey) ? {} : { params: { secretKey: options.secretKey } };
 
-  return axios.get<Resume>(`/resume/${username}/${slug}`, requestOptions).then((res) => res.data);
+  return axios.get<Resume>(`${prefix}/resume/${username}/${slug}`, requestOptions).then((res) => res.data);
 };
 
 export const createResume = (createResumeParams: CreateResumeParams) =>

client/utils/getResumeUrl.ts

@@ -1,3 +1,4 @@
+import env from '@beam-australia/react-env';
 import { Resume } from '@reactive-resume/schema';
 import get from 'lodash/get';
 
@@ -19,7 +20,7 @@ const getResumeUrl = (resume: Resume, options: Options = defaultOptions): string
   const slug: string = get(resume, 'slug');
 
   let url = '';
-  let hostname = '';
+  let hostname = env('URL');
 
   if (typeof window !== 'undefined') {
     hostname = window.location.origin;