Access token as environment variable

[tomekrozalski]

That is really impressive how readable and easy Remix Storyblok integration looks :) I wonder only about one issue: how to replace "your-preview-token" by environment variable? The script works on back- and front-end so we cannot do just process.env.STORYBLOK_TOKEN. Any thoughts @fgiuliani ?

storyblokInit({
  accessToken: "your-preview-token",
  use: [apiPlugin],
  components,
});

[fgiuliani]

Hey @tomekrozalski thanks for your message and your words! 😃

Have you taken a look at this page in the official Remix documentation? https://remix.run/docs/en/v1/guides/envvars

[tomekrozalski]

Yes, from the documentation I understand that we can access envs only in loader() function, but storyblokInit() function stands outside loader so that is not easy :(

[dohomi]

Is it best practice to only load with the preview token? Should the app not determine based on the inside or outside visual composer to either take preview or public token?

[m0t0r]

@fgiuliani are there any plans to improve storyblokInit API so accessToken can be configured via an env var ?

[fgiuliani]

hey @tomekrozalski @dohomi @m0t0r sorry for the late response. The DevRel team at Storyblok was pretty busy these last weeks with conferences and events and we didn't have the chance to focus on other tasks.

Let me discuss with the team about this scenario, and what would be a good approach to manage it.

@dohomi as you say, the preview token should be used when working inside the Visual Editor, while the public token is the recommended one for the production environment, the site that the users will visit.

@m0t0r we will evaluate a good approach to take here. Do you have any recommendations on how to face this scenario? Considering the limitation of using env var only on the server-side is not defined by Storyblok SDK itself.

[fgiuliani]

I asked Kent C. Dodds on Twitter about this topic:

https://twitter.com/facundozurdo/status/1540008887298019329

He shared this link with information on how to manage environment variables client-side: https://remix.run/docs/en/v1/guides/envvars#browser-environment-variables

And how he is doing on his personal website:

On my own site I actually do something kinda clever by making a global ENV variable on both server (global) and client (window) and make the TS defs happy with a global ENV so it works in components if needed. I should write about it.

[alexadark]

I've just published the last part of the Remix Ultimate tutorial, and this is explained there: https://www.storyblok.com/tp/create-a-preview-environment-for-your-remix-website