Home
Support Forums

Unclear functions flow for React build

First of all, I am a Netlify newbie so I suspect some of my questions will seem stupid but I need to ask them anyways :slight_smile:

I am trying to evaluate Netlify for our needs by building a prototype and having a hard time understanding some of the capabilities / limitations of the environment. I think it’s easiest to first outline my goal and then present the questions.

Goal:

  1. Build React front end for interacting back end service.
  2. Store a set of several thousand images in a way a user cannot access them.
  3. Build backend service that can perform image manipulation, convert stored images into binary array and upload to 3rd party service.
  4. Return image URI to specific image from back end to front end for rendering to the user.

Now, #1 is trivial and I have that working. Questions:

  • I am trying to avoid a database as I really don’t need one I don’t think. For image storage described with #2 I just need the ability to store images in a non public fashion that the back end service can access. Why the backend? I haven’t found a good way of being able to utilize image and file manipulation within the client side code that doesn’t A) violate security concerns or B) expose the full image set for the user to see. My understanding is that a function can utilize normal node.js and utilize functionality not possible with the client code.
    Is there a way to include a arbitrary image set as part of a Netlify build (lumped with function defintions?) that isn’t available to the user?
  • I have looked at some tutorials but its unclear where to define the functions location within my React project. Using the simplistic project upload of just dropping the React build directory into the GUI I don’t even see a netlify.toml file so where should I create that so it gets included in my build directory output?

Thanks in advance

Another options instead of #2 would be to have a function that can access S3 I suppose. Does anyone have experience with utilizing S3 from functions? In other words downloading a file from S3 to the function (not front end) and manipulating the file?

Hi @rustic_philosopher,

That’s a great post. Thank you for asking.

Regarding your question, yes you could definitely use Node.js libraries in Netlify Functions to perform image manipulations and return the images to the client-side (I’d recommend base64 encoding of the image in the function and decoding it the client for best results).

You could possibly try to use included_files option as explained here: File-based configuration | Netlify Docs. But if that doesn’t work, you’d have to rely on external database or something. Do note that, zipped functions have a file size limit of 50 MB, so you might not be able to store many images this way.

About adding the functions, you could add it anywhere in your repo and specify that path as the directory option explained in the link above. But yes, with Function, you’d either have to use Git-based deploys or deploy via CLI if you don’t wish to use Git. You can’t deploy functions with drag-n-drop based deploys.

Thanks for the information. Sounds like a function talking to S3 then would be the most realistic path forward then.

@hrishikesh Follow on question - one last hurdle (I think) I am struggling with is handling some of the environment variable issues. I have looked at other posts already but maybe I just being dense and not getting it but I am having a hard time visualizing how to “correctly” handle this.

So I have two main keys I need to utilize right now.

  1. In my client code I need to specify an Alchemy key used for their JS library. Locally I was using dotenv and process.env.<MY_KEY> to access the value in question. What is the correct way to deal with this? Some of the content I have seen on this basically says to not do this but the examples I see talk more about using env values for build.
  2. Related to #1, for a Netlify function (say I am accessing S3) what is the ideal way to expose env values since the function is deployed as part of the same project vs a separate site.

Thanks in advance

I personally don’t see a reason on trying to hide client-side secrets as in the end, the JS gets bundled with the secret in it. If you actually wish for some added security to the client-side key as well, you could use another function to return the key. This way, people would have to use debugger and breakpoints to get the value instead of simply checking the JS and finding the value right-away. But then yes, they could also use the Network tab, see where the request is being made and get the secret from there. So, there’s no secure way to do this. So, I personally just hardcode the client-side keys.

But if you were to use environment variables, you could definitely set the variable in the Netlify UI. React automatically injects any variables prefixed by REACT_APP_. So you won’t need dotenv. Just process.env.REACT_APP_VAR would do fine.

About the latter, you can simply use process.env.VAR in the function considering you’ve set the variable in the Netlify UI.

Thanks for the info!