Ember JS: установить переменные среды в индексе. html - PullRequest
Новая
       26

Ember JS: установить переменные среды в индексе. html

0 голосов
/ 01 мая 2020

У нас есть приложение Ember (3.5). По техническим причинам нам нужно, чтобы переменные среды устанавливались при загрузке страницы, а не во время сборки. Мы пытаемся установить их в index.html следующим образом: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{content-for "head"}}
    <script type="application/javascript">
      // Object.assign polyfill
      Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e,r){"use strict";if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),n=1;n<arguments.length;n++){var o=arguments[n];if(null!=o)for(var a=Object.keys(Object(o)),c=0,b=a.length;c<b;c++){var i=a[c],l=Object.getOwnPropertyDescriptor(o,i);void 0!==l&&l.enumerable&&(t[i]=o[i])}}return t}});
      window.env = {};

      var request = new XMLHttpRequest();
      request.open('GET', '/api/frontend_settings', true);
      request.send(null);

      request.addEventListener('readystatechange', () => {
        if (request.status === 200) {
          if (request.readyState === 4) {
            Object.assign(window.env, JSON.parse(request.response).settings);
          }
        }
      }, false);
    </script>

    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/app-frontend.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    <script integrity="" src="{{rootURL}}assets/vendor.js"></script>
    <script integrity="" src="{{rootURL}}assets/app-frontend.js"></script>
  </body>
</html>

Мы добавили скрипт, который делает запрос к некоторой конечной точке (/api/frontend_env_vars) во фрагменте. Эта конечная точка отвечает JSON ключами-значениями переменных среды, которые мы затем присваиваем window.env.

Проблема, с которой мы сталкиваемся, заключается в том, что иногда скрипты Ember загружаются до того, как назначены переменные (так как мы выполнить запрос, который занимает некоторое время), что делает приложение cra sh.

Мы попробовали следующее изменение в сценарии, но оно не сработало (хотя ошибка была другой): 

<script type="application/javascript">
  // Object.assign polyfill
  Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e,r){"use strict";if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),n=1;n<arguments.length;n++){var o=arguments[n];if(null!=o)for(var a=Object.keys(Object(o)),c=0,b=a.length;c<b;c++){var i=a[c],l=Object.getOwnPropertyDescriptor(o,i);void 0!==l&&l.enumerable&&(t[i]=o[i])}}return t}});
  window.env = {};
  var request = new XMLHttpRequest();
  request.open('GET', '/api/frontend_env_vars', true);
  request.send(null);
  function loadScript(src) {
    const script = document.createElement('script');
    script.src = src;
    document.body.append(script);
  }
  request.addEventListener('readystatechange', () => {
    if (request.status === 200) {
      if (request.readyState === 4) {
        Object.assign(window.env, JSON.parse(request.response).settings);
        loadScript('assets/vendor.js');
        loadScript('assets/app-frontend.js');
      }
    }
  }, false);
</script>

1 Ответ

0 голосов
/ 05 мая 2020

Мы выполняем sh, используя ember-cli-server-variable

, что позволяет определять переменные в index.html 

<html>
  <head>
    <meta name='your-app-token' content='example:app:token'>
    <meta name='your-app-user-location' content='Denver'>
    <meta name='your-app-json-data' content='{"foo":"bar"}'>
  </head>
</html>

, а затем получить доступ к ним из приложения.

Мы строим index.html на сервере с необходимыми переменными, чтобы асин c не требовался для их извлечения.

...