Using Netlify Deploy Preview collaboration tools

[jordanworner]

I have recently started using Netlify and was disappointed I couldn't use their Deploy Preview collaboration tools feature with Remix.

From the docs

On-demand Builders and server-side rendering. Collaboration tools are not available on sites using On-demand Builders or server-side rendering.

It seems they search for HTML files and inject a script. You can inject it yourself, I thought I would post this here as others might find it useful. Please be aware that if Netlify makes any changes this solution might break.

You need the netlify-plugin-inline-functions-env plugin because you will need some Netlify build time environment variables. Follow the plugin install instructions and add the following to your netlify.toml file

[[context.deploy-preview.plugins]] 
  package = "netlify-plugin-inline-functions-env"
  [context.deploy-preview.plugins.inputs]
  buildEvent = "onBuild"
  include = ["CONTEXT", "DEPLOY_ID", "SITE_ID"]

Add the environment vars to your root loader, they will be replaced by the plugin

export const loader = () => {
  return {
    netlify: {
      context: process.env.CONTEXT,
      deployId: process.env.DEPLOY_ID,
      siteId: process.env.SITE_ID,
    }
  };
}

Add a hook to inject the Netlify script client side

export function useDeployPreviewDrawer(params) {
  const {context, deployId, siteId, vcs = 'github'} = params;

  useEffect(() => {
    if (context !== 'deploy-preview' || !deployId || !siteId) {
      return;
    }
    const d = document.createElement('div');
    d.setAttribute('data-netlify-deploy-id', deployId);
    d.setAttribute('data-netlify-site-id', siteId);
    d.setAttribute('data-vcs', vcs);
    d.style.setProperty('position', 'fixed');
    document.body.appendChild(d);

    const s = document.createElement('script');
    s.setAttribute('src', 'https://netlify-cdp-loader.netlify.app/netlify.js');
    s.async = true;
    document.body.appendChild(s);
    
  }, [context, deployId, siteId]);
};

Finally, add it to your app

export default function App() {
  const data = useLoaderData();
  useDeployPreviewDrawer(data.netlify);
  // other stuff
}

I've only just started with Remix and Netlify so I'm sure there is a much better way to do this, if you have any improvements let me know 😃