Vizzuality · clementprdhomme · Jul 12, 2022
diff --git a/frontend/components/head/component.tsx b/frontend/components/head/component.tsx
@@ -5,6 +5,8 @@ import { useIntl } from 'react-intl';
 import NextHead from 'next/head';
 import { useRouter } from 'next/router';
 
+import { FRONTEND_URL } from 'vars.config';
+
 import { HeadProps } from './types';
 
 export const Head: React.FC<HeadProps> = ({
@@ -35,14 +37,10 @@ export const Head: React.FC<HeadProps> = ({
           key={locale}
           rel="alternate"
           hrefLang={locale}
-          href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/${locale}${asPath}`}
+          href={`${FRONTEND_URL}/${locale}${asPath}`}
         />
       ))}
-      <link
-        rel="alternate"
-        hrefLang="x-default"
-        href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}${asPath}`}
-      />
+      <link rel="alternate" hrefLang="x-default" href={`${FRONTEND_URL}${asPath}`} />
 
       {/* <meta name="twitter:card" content="summary" />
       <meta name="twitter:title" content={title} />

diff --git a/frontend/components/map/component.tsx b/frontend/components/map/component.tsx
@@ -9,6 +9,8 @@ import { easeCubic } from 'd3-ease';
 import { isEmpty } from 'lodash-es';
 import { useDebouncedCallback } from 'use-debounce';
 
+import { MAPBOX_API_TOKEN } from 'vars.config';
+
 import type { MapProps } from './types';
 
 export const Map: FC<MapProps> = ({
@@ -160,7 +162,7 @@ export const Map: FC<MapProps> = ({
             mapRef.current = _map.getMap();
           }
         }}
-        mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
+        mapboxApiAccessToken={MAPBOX_API_TOKEN}
         mapStyle="mapbox://styles/leticiaheco/cksxhjccb826d18mriwdgahf1"
         // CUSTOM PROPS FROM REACT MAPBOX API
         {...mapboxProps}

diff --git a/frontend/containers/discover-map/location-searcher/component.tsx b/frontend/containers/discover-map/location-searcher/component.tsx
@@ -9,6 +9,7 @@ import cx from 'classnames';
 import Script from 'next/script';
 
 import Icon from 'components/icon';
+// import { GOOGLE_MAPS_API_KEY } from 'vars.config';
 
 import SearchIcon from 'svgs/search.svg';
 import CloseIcon from 'svgs/ui/close.svg';
@@ -51,7 +52,7 @@ export const LocationSearcher: FC<LocationSearcherProps> = ({ onLocationSelected
     <div className="relative">
       <Script
         // TODO: Activate key and remove mock one
-        // src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`}
+        // src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`}
         strategy="beforeInteractive"
         src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwcOSQ6hnqoqiXX_1D1ykHOBAZZ2UorHE&amp;libraries=places"
       />

diff --git a/frontend/hooks/useLayers.ts b/frontend/hooks/useLayers.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useIntl } from 'react-intl';
 
-const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN;
+import { MAPBOX_API_TOKEN } from 'vars.config';
 
 enum LAYER_GROUPS {
   BaseLayer = 'base-layer',
@@ -63,7 +63,7 @@ export const useLayers = () => {
             source: {
               type: 'raster',
               tiles: [
-                `https://api.mapbox.com/v4/leticiaheco.1d0el4j0/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`,
+                `https://api.mapbox.com/v4/leticiaheco.1d0el4j0/{z}/{x}/{y}.png?access_token=${MAPBOX_API_TOKEN}`,
               ],
             },
           },
@@ -78,7 +78,7 @@ export const useLayers = () => {
             source: {
               type: 'raster',
               tiles: [
-                `https://api.mapbox.com/v4/leticiaheco.59zi3at4/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`,
+                `https://api.mapbox.com/v4/leticiaheco.59zi3at4/{z}/{x}/{y}.png?access_token=${MAPBOX_API_TOKEN}`,
               ],
             },
           },
@@ -96,7 +96,7 @@ export const useLayers = () => {
             source: {
               type: 'raster',
               tiles: [
-                `https://api.mapbox.com/v4/leticiaheco.77lko5p2/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`,
+                `https://api.mapbox.com/v4/leticiaheco.77lko5p2/{z}/{x}/{y}.png?access_token=${MAPBOX_API_TOKEN}`,
               ],
             },
           },
@@ -111,7 +111,7 @@ export const useLayers = () => {
             source: {
               type: 'raster',
               tiles: [
-                `https://api.mapbox.com/v4/leticiaheco.3cokqqf5/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`,
+                `https://api.mapbox.com/v4/leticiaheco.3cokqqf5/{z}/{x}/{y}.png?access_token=${MAPBOX_API_TOKEN}`,
               ],
             },
           },
@@ -167,7 +167,7 @@ export const useLayers = () => {
             source: {
               type: 'raster',
               tiles: [
-                `https://api.mapbox.com/v4/leticiaheco.0lg4uw9f/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`,
+                `https://api.mapbox.com/v4/leticiaheco.0lg4uw9f/{z}/{x}/{y}.png?access_token=${MAPBOX_API_TOKEN}`,
               ],
             },
           },
@@ -295,7 +295,7 @@ export const useLayers = () => {
             source: {
               type: 'raster',
               tiles: [
-                `https://api.mapbox.com/v4/leticiaheco.99uihxi8/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`,
+                `https://api.mapbox.com/v4/leticiaheco.99uihxi8/{z}/{x}/{y}.png?access_token=${MAPBOX_API_TOKEN}`,
               ],
             },
           },

diff --git a/frontend/lib/analytics/ga.ts b/frontend/lib/analytics/ga.ts
@@ -1,4 +1,6 @@
-export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;
+import { GOOGLE_ANALYTICS } from 'vars.config';
+
+export const GA_TRACKING_ID = GOOGLE_ANALYTICS;
 
 // log the pageview with their URL
 export const GAPage = (url: string): void => {

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -13,6 +13,7 @@ import { Hydrate } from 'react-query/hydration';
 import StaticPageLayout from 'layouts/static-page';
 import store from 'store';
 import { LayoutStaticProp } from 'types';
+import { NODE_ENV } from 'vars.config';
 
 import 'styles/globals.css';
 
@@ -55,7 +56,7 @@ const HeCoApp: React.FC<AppProps> = ({ Component, pageProps }: Props) => {
         // Nevertheless, the translations aren't pulled until the application is deployed in
         // production mode. For this reason, the message is removed during development.
         if (
-          process.env.NODE_ENV === 'production' ||
+          NODE_ENV === 'production' ||
           !error.message.startsWith('[@formatjs/intl Error MISSING_TRANSLATION]')
         ) {
           console.error(error);

diff --git a/frontend/services/api.ts b/frontend/services/api.ts
@@ -3,17 +3,19 @@ import Jsona from 'jsona';
 
 import { getCookie } from 'helpers/cookies';
 
+import { BACKEND_URL, FRONTEND_URL, PROXY_BACKEND } from 'vars.config';
+
 import { ErrorResponse } from './types';
 
 const { locales } = require('locales.config.json');
 
 const dataFormatter = new Jsona();
 
 export const apiBaseUrl =
-  process.env.NEXT_PUBLIC_PROXY_BACKEND === 'true'
+  PROXY_BACKEND === 'true'
     ? // This path must correspond to the one stored in `next.config.js` in the `rewrites` function
-      `${process.env.NEXT_PUBLIC_FRONTEND_URL}/backend`
-    : process.env.NEXT_PUBLIC_BACKEND_URL;
+      `${FRONTEND_URL}/backend`
+    : BACKEND_URL;
 
 const API = axios.create({
   baseURL: apiBaseUrl,

diff --git a/frontend/store/index.ts b/frontend/store/index.ts
@@ -1,6 +1,8 @@
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import type { ReducersMapObject } from '@reduxjs/toolkit';
 
+import { NODE_ENV } from 'vars.config';
+
 const staticReducers = {};
 
 const asyncReducers = {};
@@ -13,7 +15,7 @@ const createReducer = (reducers: ReducersMapObject) =>
 
 const store = configureStore({
   reducer: createReducer(asyncReducers),
-  devTools: process.env.NODE_ENV !== 'production',
+  devTools: NODE_ENV !== 'production',
 });
 
 // Infer the `RootState` and `AppDispatch` types from the store itself

diff --git a/frontend/vars.config.js b/frontend/vars.config.js
@@ -0,0 +1,12 @@
+export const NODE_ENV = process.env.NODE_ENV;
+
+export const FRONTEND_URL =
+  process.env.NEXT_PUBLIC_VERCEL_ENV !== undefined
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : process.env.NEXT_PUBLIC_FRONTEND_URL;
+export const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
+export const PROXY_BACKEND = process.env.NEXT_PUBLIC_PROXY_BACKEND;
+
+export const MAPBOX_API_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN;
+export const GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY;
+export const GOOGLE_ANALYTICS = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;