Combining React and Express Serverless Functions into one deploy

Support
1

I’m just learning about serverless functions and what Netlify is capable off. I love the idea, but am struggling to understand exactly how you’re meant to structure your application.

I can deploy a React app to Netlify, that part I understand.

I’ve also managed to deploy an Express app using netlify-lambda build express.

So my questions are:

  1. Are you meant to be able to deploy serverless functions alongside a react app (e.g. in the netlify/functions sub-directory)
  2. Can these server-less functions use express, is this recommended, and how do you do this alongside a React app?
  3. When I run netlify-lambda build express, I notice my fairly small .js express file becomes a 308 line long file. What is happening and why is that file so large? Is it embedding dependencies?

Thanks for your help.

2

Hi @DanielFew,

Serverless functions are meant to be deployed along side your front-end in the same website. I’m not sure why you’re using netlify-lambda. You can use it, but there are better tools to get the job done.

  1. You can deploy serverless functions from any (one) folder inside your base directory. You can simply configure it like:
[functions]
  directory = "some_folder"

Netlify will automatically bundle the functions in the directory and publish it with the frontend.

  1. While I haven’t personally used Expres myself (I had no use case where I had to), I think I’ve some people use it. However, as I said, depending on your use case, chances are you might not even need it.

  2. Yes, functions are bundled and zipped - so it’s not your actual file that’s running, it your file with all the dependencies, etc. that’s running.

3

Thanks @hrishikesh

I use Express to write the backend API of the SaaS application. I could avoid it and write this in plain JavaScript, but why do this when there’s already a solid library available that makes it much cleaner and easier to manage? I avoid libraries where possible, but use them when it means cleaner and easier to maintain code, especially on something as large as an API.

So this is my scripts in package.json

  "scripts": {
    "start": "npm run start:app && npm run start:lambda",
    "start:app": "react-scripts start",
    "start:lambda": "netlify-lambda serve netlify/functions",
    "build": "npm run build:app && npm run build:lambda",
    "build:app": "react-scripts build",
    "build:lambda": "netlify-lambda build netlify/functions",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

The only way I could get express to work was to build the express app using netlify-lambda - so it packages all dependencies in each file during the build process).

Are you saying this shouldn’t be necessary? If I just put express code in files within netlify/functions, when it’s deployed it’ll automatically build them and zip dependencies?

netlify.toml

# example netlify.toml
[build]
  command = "npm run build"
  functions = "build-functions"
  publish = "build"

  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
  ## Not needed for static site generators.
  #[[redirects]]
  #  from = "/*"
  #  to = "/index.html"
  #  status = 200

  ## (optional) Settings for Netlify Dev
  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
  #[dev]
  #  command = "yarn start" # Command to start your dev server
  #  port = 3000 # Port that the dev server will be listening on
  #  publish = "dist" # Folder with the static content for _redirect file

  ## more info on configuring this file: https://www.netlify.com/docs/netlify-toml-reference/
4

Yes. That’s how Functions are deployed. You put the raw source code of your functions in your repo, Netlify does the zipping when publishing it.