Injecting Data from Server

[Timer]

Our docs explain how to Inject Data from the Server, but this doesn't translate well to development.

I think we should expand the docs to explain what to do in development or add means of specifying these values in development mode.

Right now I just live with the error and do something like this:

if (window.ActiveDirectoryGroups === undefined) window.ActiveDirectoryGroups = ['devmode']

This will be annoying for people using this suggested method when the error dialog is merged (if they're currently ignoring the error).

[Timer]

I'm going to tag this for 0.10 just so we don't forget, but if this is unactionable that's fine too.

[evenchange4]

How about using try-catch so that we can handle it safely in development?

<script>
  try {
   window.SERVER_DATA = __SERVER_DATA__;
  } catch(e) {
    console.info('Development MODE', e)
    window.SERVER_DATA = {};
  }
</script>

[gaearon]

Retagging to clean up 0.10.

[peterbe]

Another idea is to use a script src. E.g. <script src="data.json"></script> (careful about ordering and 'async' attributes). In dev mode, that'd query http://localhost:3000/data.json which would probably 404 Not Found (unless it's proxied). In production you'd have your web server pick that up and respond something like

window.SERVER_DATA = {some: 'thing'};

Then the web server doesn't need to do some something like this:

# pseudo python server code

def render_homepage(request):
    with open('build/index.html') as f:
          html = f.read()
          html = html.replace('__SERVER_DATA__', "{some: 'thing'};")
    return response(html)

[Vadorequest]

@peterbe I guess you mean a data.js file? I doubt we can load JSON through script, never saw that before.

[leoskyrocker]

@peterbe Wouldn't that require another request to the server?

[cr101]

@leoi11 Be aware that injecting data from the server has a major drawback as it will not allow search engines to properly analyze the static HTML.

[piotr-cz]

Data injected with proposed <script> tag won't be cached with serviceworker in production and won't be available when offline.

My current approach is:

index.html

<script>
  window.APP_BUILD = {
    HASH: '__APP_BUILD_HASH__',
  }
</script>

App.js

const buildHash = !window.APP_BUILD.HASH || window.APP_BUILD.HASH === '__APP_BUILD_HASH__'
  ? undefined
  : window.APP_BUILD.HASH