Question about third party scripts

[adailey14]

Quick question for you. Where is the best place to put third party scripts and css? I will show you some of the places I am using in my current project for some javascript, maybe you can tell me which one is preferred? Or tell me if there is a better way.

I am passing the assets option to webpageServer like below. So this is just for the webpacked javascript (and maybe css in production?). Would it make sense to include third party javascript or css here?

    assets: (ignore, { store }) => {
      // retrieves asset chunk file names
      // (which is output by client side Webpack build)
      const result = global.clone(parameters.chunks());

      // Webpack entry point (code splitting)
      result.entry = 'main';

      // clear Webpack require() cache for hot reload in development mode
      if (__DEVELOPMENT__) {
        delete require.cache[require.resolve('../../assets/images/favicons/favicon.ico')];
      }

      const state = store.getState();
      const partner = getActivePartner(state) || {};
      const faviconUrl = (partner.attributes || {}).favicon_url;

      if (faviconUrl) {
        result.icon = faviconUrl;
      } else {
        result.icon = '/favicon-check.png';
      }
      return result;
    },

Then in my root react component I am including some scripts like this (so these end up in the body):

          <span>
            <script type="text/javascript" dangerouslySetInnerHTML={{ __html: newRelicScript }}></script>
            <script src="https://cdn.optimizely.com/js/281523179.js"></script>
            [...other scripts as well]
          </span>

I am also using the "html head" parameter like this to insert a script (so this ends up in the head):

    html:
    {
      // Will be inserted into server rendered webpage <head/>
      // (this `head()` function is optional and is not required)
      // (its gonna work with or without this `head()` parameter)
      head: (url) => {
        const elements = [];

        if (__DEVELOPMENT__) {
          const script = devtools({ ...parameters, entry: 'main' });
          elements.push(
            <script key="mainjs" dangerouslySetInnerHTML={{ __html: script }} />
          );
        }
        elements.push(
          <script key="fontawesome" src="https://use.fontawesome.com/0d4417303a.js" async />
        );
        return elements;
      }
    },

[catamphetamine]

Yeah, I would insert scripts into <head/>, for example, and I wouldn't pass them as part of the assets because assets are conceptually meant for Webpack.
If you're concerned with page loading speeds then they recommend moving all <scripts/> to the end of the body.
Currently the corresponding setting is settings.html.body_end which could be renamed to camelCase maybe if anyone used it at all.

[adailey14]

Ok great, thanks for the advice. Maybe renaming assets to webpack_assets could prevent confusion in the future. I had missed the body_end setting, I think that's what I want to use.

[adailey14]

Hi Again. Maybe you saw this request coming... Is it possible to add the store as a parameter to the head, body_end, body_start functions? That way I can include different scripts based on some information in the store.

[catamphetamine]

Try react-isomorphic-render@7.1.17.
I haven't checked it because my testing project is currently being refactored, but you can see if it works.

[adailey14]

Ok I updated and tested and it's working great. Thanks!