chore: use a different configuration depending on app env

It will be useful with Docker. Instead of cloning the project with a
different configuration, I can manage two different configuration
thanks to dotenv and some checking inside the app.

6 files changed, 54 insertions, 23 deletions

diff --git a/.env.example b/.env.example
index 479f9b1..4d98551 100644
--- a/.env.example
+++ b/.env.example
@@ -1,27 +1,39 @@
+# Without Docker: manually set app_env (staging, production)
+#APP_ENV="production"
+
+NEXT_PUBLIC_APP_ENV="$APP_ENV"
+
+# Production
+APP_PROTOCOL="https"
 APP_FRONTEND_DOMAIN="www.frontend.com"
 APP_BACKEND_DOMAIN="www.backend.com"
-APP_PROTOCOL="https"
 APP_GRAPHQL_ENDPOINT="/graphql"
+APP_DOCKER_PORT=3000
+
+NEXT_PUBLIC_APP_URL="$APP_PROTOCOL://$APP_FRONTEND_DOMAIN"
+NEXT_PUBLIC_GRAPHQL_API="https://$APP_BACKEND_DOMAIN$APP_GRAPHQL_ENDPOINT"
+
+# Staging - If running multiple instances (Docker)
+#APP_STAGING_PROTOCOL="https"
+#APP_STAGING_FRONTEND_DOMAIN="www.frontend.com"
+#APP_STAGING_BACKEND_DOMAIN="www.backend.com"
+#APP_STAGING_GRAPHQL_ENDPOINT="/graphql"
+#APP_STAGING_DOCKER_PORT=3200
+
+#NEXT_PUBLIC_STAGING_APP_URL="$APP_STAGING_PROTOCOL://$APP_STAGING_FRONTEND_DOMAIN"
+#NEXT_PUBLIC_STAGING_GRAPHQL_API="https://$APP_STAGING_BACKEND_DOMAIN$APP_STAGING_GRAPHQL_ENDPOINT"
+
+# Common
 APP_AUTHOR_NAME="Your Name"
 APP_AUTHOR_EMAIL="your@email.com"
 APP_AUTHOR_URL="https://www.yourWebsite.com/"
 APP_FEED_DESCRIPTION="What you want..."
 
-NEXT_PUBLIC_APP_DOMAIN="$APP_FRONTEND_DOMAIN"
-NEXT_PUBLIC_APP_PROTOCOL="$APP_PROTOCOL"
-NEXT_PUBLIC_GRAPHQL_API="https://$APP_BACKEND_DOMAIN$APP_GRAPHQL_ENDPOINT"
 NEXT_PUBLIC_ACKEE_DOMAIN="www.ackeeDomain.com"
 NEXT_PUBLIC_ACKEE_FILENAME="tracker.js"
 NEXT_PUBLIC_ACKEE_SITE_ID="your-id-string"
 
-# Docker configuration
-APP_DOCKER_PORT_PROD=3000
-APP_DOCKER_PORT_DEV=3200
-
 # Use this only in development mode. It prevents "unable to verify the first
 # certificate" error when using a local domain with mkcert certificate for
 # backend.
 #NODE_TLS_REJECT_UNAUTHORIZED=0
-
-# Set node environment to not install dev dependencies.
-#NODE_ENV=production
diff --git a/next-sitemap.js b/next-sitemap.js
index c9cd443..348ea0b 100644
--- a/next-sitemap.js
+++ b/next-sitemap.js
@@ -1,7 +1,11 @@
 /** @type {import('next-sitemap').IConfig} */
 
+const isStaging = process.env.APP_ENV === 'staging';
+
 module.exports = {
-  siteUrl: `${process.env.NEXT_PUBLIC_APP_PROTOCOL}://${process.env.NEXT_PUBLIC_APP_DOMAIN}`,
+  siteUrl: isStaging
+    ? process.env.NEXT_PUBLIC_STAGING_APP_URL
+    : process.env.NEXT_PUBLIC_APP_URL,
   generateRobotsTxt: true,
   changefreq: null,
   priority: null,
diff --git a/next.config.js b/next.config.js
index 077d0a0..fc35b57 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,12 @@
 const path = require('path');
 
-const backendDomain = process.env.APP_BACKEND_DOMAIN;
-const frontendDomain = process.env.APP_FRONTEND_DOMAIN;
+const isStaging = process.env.NEXT_PUBLIC_APP_ENV === 'staging';
+const backendDomain = isStaging
+  ? process.env.APP_STAGING_BACKEND_DOMAIN
+  : process.env.APP_BACKEND_DOMAIN;
+const frontendDomain = isStaging
+  ? process.env.APP_STAGING_FRONTEND_DOMAIN
+  : process.env.APP_FRONTEND_DOMAIN;
 const ackeeDomain = process.env.NEXT_PUBLIC_ACKEE_DOMAIN;
 
 const contentSecurityPolicy = `
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index 33cc89a..a5be026 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -1,8 +1,9 @@
 import { RequestType, VariablesType } from '@ts/types/app';
+import { settings } from '@utils/config';
 import { GraphQLClient } from 'graphql-request';
 
 export const getGraphQLClient = (): GraphQLClient => {
-  const apiUrl: string = process.env.NEXT_PUBLIC_GRAPHQL_API || '';
+  const apiUrl = settings.api.url;
 
   if (!apiUrl) throw new Error('API URL not defined.');
 
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 5928f02..874a24c 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,9 +1,16 @@
+const isStaging = process.env.NEXT_PUBLIC_APP_ENV === 'staging';
+
 export const settings = {
   ackee: {
     filename: process.env.NEXT_PUBLIC_ACKEE_FILENAME || 'tracker.js',
     siteId: process.env.NEXT_PUBLIC_ACKEE_SITE_ID || '',
     url: `https://${process.env.NEXT_PUBLIC_ACKEE_DOMAIN}` || '',
   },
+  api: {
+    url: isStaging
+      ? process.env.NEXT_PUBLIC_STAGING_GRAPHQL_API
+      : process.env.NEXT_PUBLIC_GRAPHQL_API,
+  },
   name: 'Armand Philippot',
   baseline: {
     en: 'Front-end developer',
@@ -20,5 +27,8 @@ export const settings = {
   },
   postsPerPage: 10,
   twitterId: '@ArmandPhilippot',
-  url: `${process.env.NEXT_PUBLIC_APP_PROTOCOL}://${process.env.NEXT_PUBLIC_APP_DOMAIN}`,
+  url:
+    (isStaging
+      ? process.env.NEXT_PUBLIC_STAGING_APP_URL
+      : process.env.NEXT_PUBLIC_APP_URL) || '',
 };
diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts
index e10c7f3..10a8e77 100644
--- a/src/utils/helpers/rss.ts
+++ b/src/utils/helpers/rss.ts
@@ -15,11 +15,10 @@ const getAllPosts = async (): Promise<ArticlePreview[]> => {
 };
 
 export const generateFeed = async () => {
-  const websiteUrl = `${process.env.NEXT_PUBLIC_APP_PROTOCOL}://${process.env.NEXT_PUBLIC_APP_DOMAIN}`;
   const author = {
     name: settings.name,
     email: process.env.APP_AUTHOR_EMAIL,
-    link: websiteUrl,
+    link: settings.url,
   };
   const copyright = `${settings.name} CC BY SA ${settings.copyright.startYear} - ${settings.copyright.endYear}`;
   const title = `${settings.name} | ${settings.baseline.fr}`;
@@ -29,13 +28,13 @@ export const generateFeed = async () => {
     copyright,
     description: process.env.APP_FEED_DESCRIPTION,
     feedLinks: {
-      json: `${websiteUrl}/feed/json`,
-      atom: `${websiteUrl}/feed/atom`,
+      json: `${settings.url}/feed/json`,
+      atom: `${settings.url}/feed/atom`,
     },
     generator: 'Feed & NextJS',
-    id: websiteUrl,
+    id: settings.url,
     language: settings.locales.defaultLocale,
-    link: websiteUrl,
+    link: settings.url,
     title,
   });
 
@@ -47,7 +46,7 @@ export const generateFeed = async () => {
       date: new Date(post.dates.publication),
       description: post.intro,
       id: post.id,
-      link: `${websiteUrl}/article/${post.slug}`,
+      link: `${settings.url}/article/${post.slug}`,
       title: post.title,
     });
   });