If keys are missing from selected translation file default to english keys

src/app.js

@@ -9,6 +9,7 @@ import 'react-dates/initialize';
 import Helmet from 'react-helmet';
 import { BrowserRouter, StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import difference from 'lodash/difference';
 import mapValues from 'lodash/mapValues';
 import moment from 'moment';
 import { IntlProvider, addLocaleData } from 'react-intl';
@@ -17,16 +18,50 @@ import routeConfiguration from './routeConfiguration';
 import Routes from './Routes';
 import config from './config';
 
-// If you want to change the language, Change the imports to the match
-// the wanted locale.
-//
-// Remember to also change the language in the config.js file.
+// Flex template application uses English translations as default.
+import defaultMessages from './translations/en.json';
+
+// If you want to change the language, change the imports to match the wanted locale:
+//   1) Change the language in the config.js file!
+//   2) Import correct locale rules for React Intl library
+//   3) Import correct locale rules for Moment library
+//   4) Use the `messagesInLocale` import to add the correct translation file.
+
+// Step 2:
+// Import locale rules for React Intl library
 import localeData from 'react-intl/locale-data/en';
-import messages from './translations/en.json';
+
+// Step 3:
 // If you are using a non-english locale with moment library,
 // you should also import time specific formatting rules for that locale
 // e.g. for French: import 'moment/locale/fr';
 
+// Step 4:
+// If you are using a non-english locale, point `messagesInLocale` to correct .json file
+import messagesInLocale from './translations/fr.json';
+
+// If translation key is missing from `messagesInLocale` (e.g. fr.json),
+// corresponding key will be added to messages from `defaultMessages` (en.json)
+// to prevent missing translation key errors.
+const addMissingTranslations = (sourceLangTranslations, targetLangTranslations) => {
+  const sourceKeys = Object.keys(sourceLangTranslations);
+  const targetKeys = Object.keys(targetLangTranslations);
+  const missingKeys = difference(sourceKeys, targetKeys);
+
+  const addMissingTranslation = (translations, missingKey) => ({
+    ...translations,
+    [missingKey]: sourceLangTranslations[missingKey],
+  });
+
+  return missingKeys.reduce(addMissingTranslation, targetLangTranslations);
+};
+
+const isDefaultLanguageInUse = config.locale === 'en';
+
+const messages = isDefaultLanguageInUse
+  ? defaultMessages
+  : addMissingTranslations(defaultMessages, messagesInLocale);
+
 const isTestEnv = process.env.NODE_ENV === 'test';
 
 // Locale should not affect the tests. We ensure this by providing