How to read env var from a React component

Get Help and Help Others
1

Hi all,

I’m working on adding file upload capabilities to my app using Filestack, as described in the example-blog project. I configured the API Key with apikey={process.env.FILESTACK_API_KEY} and I got to a point where file upload is working fine locally, but when I push to Netlify I get an error saying that Error: An apikey is required to initialize the Filestack client. I did set the env var in Netlify correctly (I’ve checked a million times), but no luck.

I’ve googled this issue and everything seems to point to a missing Webpack config. I wanted first to check here if there’s a cleaner way to do this, or maybe there’s something I’ve missed.

FWIW, I started out with Redwood 3.x and have since upgraded to the latest (4.0).

Any help is appreciated.

Thanks,
Daniel

2

I’d start by trying to console.log the variable, maybe also the other one like the database_url from the tutorial.

Maybe it’s also related to this: https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5 I guess this is what you already found

2 Likes
3

@danvalencia Did you implement similarly to the Blog Example per the use in these two files?

index.js

[edit: removed – this file referenced Auth example. Not Filestack.]

postForm.js

4

@thedavid Yes, this is what I’m doing in my component:

      <ReactFilestack
        apikey={process.env.FILESTACK_API_KEY}
        onSuccess={onFileUpload}
        componentDisplayMode={{
          type: 'button',
          customText: 'Upload Image',
          customClass: classes.submit,
        }}
        actionOptions={{
          fromSources: ['local_file_system', 'url'],
        }}
      />

I’ve added the FILESTACK_API_KEY in my .env and .env.default (just in case) files.

I noticed that RW already uses dotenv-webpack and it’s configured in the base @redwoodjs package like so:

new Dotenv({
    path: path.resolve(redwoodPaths.base, '.env'),
    silent: true,
}),

This looks correct to me, however I’m not sure if Netlify will create a .env file based on the configured ENVIRONMENT, maybe that’s the problem ?

5

Hmm, to confirm, you have create the Env Vars in Netflify deploy settings, correct? Here’s what ours looks like for the Example Blog (note: DB_HOST is the same thing as DATABASE_URL):

Screen Shot 2020-04-11 at 12.19.43 PM
Screen Shot 2020-04-11 at 12.19.43 PM638×864 36.2 KB

6

Yes, here’s mine:

image

7

@rob did you run into this issue with using env vars on Netlify?

8

I don’t know that we actually used the file uploaded in production…the blog posts that are there come from the database seeds. It’s possible that the ENV var doesn’t work in production either. :grimacing:

9

Ok, I just created a new site from scratch to make sure I didn’t introduce any unintended side effects, and I see the same issue.

Code for the page used to test this:

And deployed site: https://sleepy-easley-4f077f.netlify.com/

Looking at the dotenv-webpack documentation, it seems like if we were to set the systemvars config to true (it defaults to false) it should fix the problem. The downside of this approach is that all system env vars would be available during the build process, which IMO is an OK tradeoff. What do you guys think ?

1 Like
10

Oh, this just got super interesting! (yay/boo @danvalencia – this means you just found something not working that’s going to help us improve Redwood, but it’s a bit painful for you until we do. Thanks in advance for hanging in there along the way! :muscle:)

Looping in @peterp

Testing: Include Env Vars via Build using Webpack

@danvalencia Could you try setting the systemvars config to true and see if that works? Redwood Webpack config instructions doc is here.

Reference & Research

As Daniel mentioned, Netlify has access to Env Vars at build time but does not do anything further to include in App unless explicitly configured to do so. From this topic on Netlify Forum:

So now you have the variables set and available to your build process, great! But, unless your build pipeline DOES something with the environment variable - it’s not going to be much use in the code that gets published and served to the browser - which doesn’t understand $API_ENDPOINT - that’s just a string to the browser and to our CDN.

React Documentation: Env Var Referencing

Referencing Env Vars in HTML

Gatsby Use Case:

Gatsby has specific configuration to handle adding env vars to site during build, which could be a good implementation reference

Webpack

The Gatsby env var documentation references Webpack DefinePlugin

1 Like
11

That’s 100% the problem. We don’t want the web side of things to have access to your ENV VARS unless you specifically define them - This was an oversight on our part.

This is great, we can use EnvironmentPlugin | webpack, which adds a bit of syntactic sugar on top of the define plugin.

We just need a place to define them, maybe redwood.toml?

2 Likes
12

:+1: for redwood.toml

I need to hit the :sleeping_bed:Could you create an Issue for this and link back here for reference? Quick read of docs looks like we can knock this out fast and/or get some community help to turn it around.

:rocket:

13

Done and done: Support ENV vars in webpack projects · Issue #427 · redwoodjs/redwood · GitHub

1 Like
14

I just tackled this yesterday for a Redwood project. I’d be happy to open a PR for it if nobody else has jumped on it (it would be my first).

3 Likes
15

That would be amazing!

16

PR: https://github.com/redwoodjs/redwood/pull/430

2 Likes
17

#430 has been merged :tada: into ‘master’. However, it is not including in the v0.5.0 release published yesterday.

If anyone is able to help test the setup and process, we’d appreciate the help!

18

@thedavid I can help out later today.

I can test locally, but the real test will be deploying a sample app to Netlify. Is there anything in place to have RW npm packages automatically published on merge to master to some “snapshot” registry ? Otherwise I can probably setup a private GH Packages registry to do this. Any ideas are welcome.

19

We don’t have a process/setup in place for a ‘snapshot’ registry (although this is a very interesting idea).

In this case, the changes are all Webpack specific. See the PR changed files here. So you might be able to just copy over the config to your App’s Webpack (documentation here).

1 Like
20

Alright, this seems to be working! :rocket:

I tested adding the env var to web.includeEnvironmentVariables in the redwood.toml file, as well as using an env var with the REDWOOD_ENV_ prefix, both worked well locally and in Netlify.

If anyone is curious, this is what I did: https://github.com/danvalencia/redwoodblog/commit/bc91ef079bdd7a4af31b913a8ba7059d1d42eb0b

Thank to all involved for your help!

2 Likes