Using env variables in a component

[meaghan1]

I’m trying to use env variables in a component in my project. I haven’t really been able to find a straight-forward way to do this that just lists the steps to set this up. The project is using Vercel for deployment, which is where i have my variables defined.

I’ve taken a look at How to read Environment Variables, but i didnt seem to interpret a simple conclusion from this. Is there any simple documentation on using Vercel-defined env variables in a component?

[juanma]

Hi @meaghan1

@meaghan1

but i didnt seem to interpret a simple conclusion from this.

I think there’s no simple conclusion as there are some things to be taken into account here:

• Understanding well that Frontity works with Isomorphic React apps to be able to provide SSR and optimize SEO in Frontity projects
• Understanding that Isomorphic React apps means that there will be code executed only in the Server Side, other pieces of code executed only in the Client Side and other pieces of code executed in both
• Understanding that most of the times Environment Variables will contain confidential information (like API Keys) so it’s a good practice to keep them hidden from the final user
• These enviroment variables can be used while kept hidden if they’re used only from the Server Side
• If the enviroment variables are used in some piece of code executed from the Client Side they will be part of the final bundle (ergo API keys and some other confidential information will be accesible to anyone checking the code)

That’s why, here we provided a full answer taking into account all of this

How to read Environment Variables

Hi @jeanettepranin, Regarding your question, a few considerations… Isomorphic React apps in Frontity When developing a Frontity project or package the React code (used in your custom theme) should be isomorphic (also called universal) This means that all the code in a Frontity project should be prepared to be executed both on the server-side and in the client-side. Every time we access a page the first load is rendered from the server and from there the navigation is done in the client-side …

Please, tell us which part is not clear and the specific problems you’re having when trying to use environment variables in your Frontity project

Also, in order to provide the best possible help as quickly and as efficiently as possible, please provide the info suggested here?

The more info you provide about your issue the better.
Providing a repo or code-sandbox with your code is especially helpful to find solutions of technical issues with specific code