How do you use lambda functions in a Create React App project?

Support
,
1

I have a create-react-app 3.0 project that is using Netlify functions. Everything is working great, but when I add the mysql module to a function I get errors and am unable to use it. I’ve seen a few posts on the github issues pages about webpack causing issue with these libraries. I know CRA has webpack working under the hood, but I don’t want it to touch my function files. I know tons of people use this library and there are relatively few issues reported about it, so I figure it’s an issue with how Netlify handles these or possibly even my configuration itself. I’ve tried adding a separate package.json for my functions folder but that doesn’t seem to solve the issue. I’ve been trying to fix this for days but with no success so any suggestions are greatly appreciated!

3

m-butler, can you post the errors you are seeing? That will help us quite a bit. Thanks for your patience.

4

Hi @m-butler,

While CRA does use webpack to bundle your react code, your lambda function won’t be bundled in to that React code. Also note that if the dependency won’t bundle then you don’t need to bundle it. You can deploy the function and it’s required node_modules in a zip archive. There are a few ways to accomplish this with a coupe of examples being:

5

Is there any updated tutorial on this (2022)? I don’t have errors to post because I’m not even sure where to start. The Netlify tutorial has issues that make it unusable, and tutorials I’ve found on youtube are out of date. Any pointers would be really appreciated. :sparkles: Thanks!

6

Not a tutorial per-se, but here’s a recent example of how to use Netlify Functions along with your Frontend.

I’ve used Vue, but that’s irrelevant.

7

Thank you!
I just took a look at it, and it’s different enough to create another rabbit hole for people to go down. I will still see if I can make sense of it; but I think there should be a straight forward tutorial about how to use them with create-react-app.
Would you be willing to share how you learned how to use it in the Vue project?

8

I don’t think so. Netlify Functions are framework independent. You don’t even need any framework to use them, you can use them in a vanilla JavaScript project too.

There’s nothing specific to Vue or React here. Here’s a high-level guide:

  1. Create a JavaScript / TypeScript file inside netlify/functions directory. Let’s name it abc.js for now.
  2. You write some code in it, for example:
exports.handler = async function () {
  return {
    body: JSON.stringify({
      msg: 'Hello!'
    }),
    statusCode: 200
  }
}
  1. Inside your React code (or your frontend, basically, can be in any frameworks, or vanilla JS), you can simply send a request to:
fetch('/.netlify/functions/abc')

or if you prefer axios:

axios({
  url: '/.netlify/functions/abc'
})

I’m assuming, you can handle the rest of the fetch or axios request. But that’s all the basics about adding Netlify Functions to your project. As you can see, this can nothing to do with React or Vue, or any framework for that matter.

9

Hi hrishikesh,
I was able to understand how to create the functions folder and how to write a handler.

The part I am confused about is what script to write, in order to build the functions, so that they work in a deployed app, and how to have them access API keys. (I want to use the functions so that I can make calls to an API from the client, and hide the API keys in the lambda or edge function). Do you happen to know how it is possible to do that, or where I can find out how? Perhaps it is something that is obvious to you and other developers, but I don’t know how to do it. Also netlify-cli isn’t working on my computer for some reason, so I run commands using npx netlify.

10

I have already answered your question in point 3 above.

You can access environment variables usingprocess.env.<var name>

If.you see the GitHub repo I’ve shared above, you can find out how environment variables are used and how to send a request to other APIs - it’s all done in that repo.

Netlify Functions is not too different if you already know regular JavaScript. Since you’re using React, you should be familiar with JavaScript. I’d advise you to check out some docs on the fetch API.

About CLI, you might not have installed that as a global package using the -g flag. It’s okay though, you can continue to use it with npx.

11

Hi,
Thanks for trying to explain this to me. I am not seeing the answer in point 3. When I say I don’t know what script to write, I am referring to the build command, which would be a “script” property in the package.json or the netlify.toml file.

I understand the syntax of how to access an environmental variable, generally speaking, and how to use axios. I believe there is some sort of toml file and build commands to make it all work. I get how to do the different aspects, in broad strokes, but am missing the small details that actually make it work in a deployed site.

(regarding the -g flag, it is not working, but that is an error specific to my computer/ not letting me delete files/ outside of the scope of this topic).

12

There are no extra build steps required as long as you’re deploying from a Git repo or using Netlify CLI.

If you put your function file in netlify/functions, Netlify automatically builds it for you.

The 3 steps I mentioned above are the only 3 steps required.

How about you show us what you’ve tried to deploy the functions and if you got an error or got stuck? We can explain from there.

13

@hrishikesh, Thanks.
Here is a sample repo of an attempt: GitHub - maiya-22/lambda-functions

I commented out axios in the function, to try to get it to work without the import first; but also will need to be able to import axios into the function.

The request to the function is in the /featurs/Counter.js file, and the response is logged in the console.

Here is the deployed site:

It’s returning an error. Is there something that I need to change, to make it work?

14

I’m not seeing an error. What error are you seeing?