Fix asset CDN to get fonts from fonts CDN

.env

@@ -7,4 +7,5 @@ SENTRY_KEY_CLIENT=
 SENTRY_KEY_SERVER=
 # Quran.com - development app, no need to worry!
 FACEBOOK_APP_ID=1599019233731707
+ASSET_HOST=//assets-1f14.kxcdn.com
 FONTS_URL=//quran-1f14.kxcdn.com

docker-compose.production.yml

@@ -11,13 +11,15 @@ services:
       - PUBLIC_API_URL=http://api.quran.com
       - INTERNAL_API_URL=http://api.quran.com
       #- INTERNAL_API_URL=http://api:3000
+      # - SEGMENTS_KEY=
       # - SENTRY_KEY_CLIENT=https://app.getsentry.com
       # - SENTRY_KEY_SERVER=https://app.getsentry.com
       - FACEBOOK_APP_ID=appid
       - ONE_QURAN_URL=https://one.quran.com
       - PORT=8000
-      - ASSET_HOST=localhost:8000
-      #- ASSET_HOST=assets-1f14.kxcdn.com
+      #- ASSET_HOST=//localhost:8000
+      - ASSET_HOST=//assets-1f14.kxcdn.com
+      - FONTS_URL=//quran-1f14.kxcdn.com
     ports:
       - "8000:8000"
 

docker-compose.yml

@@ -14,13 +14,14 @@ services:
     environment:
       - PUBLIC_API_URL=http://localhost:3000
       - INTERNAL_API_URL=http://api:3000
+      # - SEGMENTS_KEY=
       # - SENTRY_KEY_CLIENT=https://app.getsentry.com
       # - SENTRY_KEY_SERVER=https://app.getsentry.com
       - FACEBOOK_APP_ID=appid
       - ONE_QURAN_URL=https://one.quran.com
       - PORT=8000
-      - ASSET_HOST=localhost:8000
-      #- ASSET_HOST=assets-1f14.kxcdn.com
-      # TODO get all vars from .env (and remove dotenv module?)
+      - ASSET_HOST=//localhost:8000
+      #- ASSET_HOST=//assets-1f14.kxcdn.com
+      - FONTS_URL=//quran-1f14.kxcdn.com
 
 

src/config.js

@@ -49,6 +49,7 @@ const config = {
   sentryClient: process.env.SENTRY_KEY_CLIENT,
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
+  assetHost: process.env.ASSET_HOST,
   fontsURL: process.env.FONTS_URL,
   locales,
   defaultLocale: 'en',
@@ -303,7 +304,7 @@ const config = {
         },
         {
           rel: 'preconnect',
-          href: process.env.ASSET_HOST,
+          href: process.env.FONTS_URL,
           crossOrigin: ''
         },
         {

src/helpers/buildFontFaces.js

@@ -1,12 +1,10 @@
 /* eslint-disable max-len */
 
-const assetHost = process.env.ASSET_HOST;
-
 export const fontFaceStyle = fontClassName => (
   `@font-face {font-family: '${fontClassName}';
-  src: url('//${assetHost}/fonts/compressed/eot/${fontClassName}.eot?#iefix') format('embedded-opentype'),
-  url('//${assetHost}/fonts/ttf/${fontClassName}.ttf') format('truetype'),
-  url('//${assetHost}/fonts/woff/${fontClassName}.woff?-snx2rh') format('woff');}
+  src: url('${config.fontsURL}/fonts/compressed/eot/${fontClassName}.eot?#iefix') format('embedded-opentype'),
+  url('${config.fontsURL}/fonts/ttf/${fontClassName}.ttf') format('truetype'),
+  url('${config.fontsURL}/fonts/woff/${fontClassName}.woff?-snx2rh') format('woff');}
   .${fontClassName} {font-family: '${fontClassName}';}
   .${fontClassName} {display: none;}`
 );
@@ -27,9 +25,9 @@ export function createFontFacesArray(verses) {
       fontFaces.push(font);
       fontFacesArray.push(
         `@font-face {font-family: '${font}';
-        src: url('//${assetHost}/fonts/compressed/eot/${font}.eot?#iefix') format('embedded-opentype'),
-        url('//${assetHost}/fonts/ttf/${font}.ttf') format('truetype'),
-        url('//${assetHost}/fonts/woff/${font}.woff?-snx2rh') format('woff');}
+        src: url('${config.fontsURL}/fonts/compressed/eot/${font}.eot?#iefix') format('embedded-opentype'),
+        url('${config.fontsURL}/fonts/ttf/${font}.ttf') format('truetype'),
+        url('${config.fontsURL}/fonts/woff/${font}.woff?-snx2rh') format('woff');}
         .${font} {font-family: '${font}';}`
       );
     }

src/server/config/express.js

@@ -93,6 +93,6 @@ export default (server) => {
   support(server);
 
   server.get(/^\/(images|fonts)\/.*/, (req, res) => {
-    res.redirect(301, `//${process.env.ASSET_HOST}${req.path}`);
+    res.redirect(301, `${config.fontsURL}${req.path}`);
   });
 };