I also have one more question. Why are environment variables not working in the function? I did

this.addDefaultFunctionEnv({
      FRONTEND_URL: webStatic.url,
      API_URL: api.url,
    });

but

const allowedOrigins = [process.env.FRONTEND_URL, "<http://localhost:3000>"];

shows

[ undefined, '<http://localhost:3000>' ]

Can you restart the dev server? env variables need a server restart to load.

@manitej Restarted a couple of times. Nothing has changed

Can I see your stack? How you're passing the variables.

Full stack:

import * as sst from "@serverless-stack/resources";
import { TableFieldType } from "@serverless-stack/resources";
import path from "path";

export default class CoreStack extends sst.Stack {
  constructor(scope: <http://sst.App|sst.App>, id: string, props?: sst.StackProps) {
    super(scope, id, props);

    const usersTable = new sst.Table(this, "UsersTable", {
      fields: {
        email: TableFieldType.STRING,
      },
      primaryIndex: { partitionKey: "email" },
    });

    const linksTable = new sst.Table(this, "LinksTable", {
      fields: {
        id: TableFieldType.STRING,
      },
      primaryIndex: { partitionKey: "id" },
    });

    const api = new sst.Api(this, "Api", {
      cors: false,
      defaultFunctionProps: {
        // See /esbuild.js. This is necessary to support decorators
        bundle: {
          esbuildConfig: {
            plugins: "esbuild-decorators-plugin.js",
          },
        },
        environment: {
          GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID || "",
          GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET || "",
          USERS_TABLE_NAME: usersTable.tableName,
          LINKS_TABLE_NAME: linksTable.tableName,
        },
        permissions: [usersTable, linksTable],
      },
      routes: {
        "GET /{id}": "src/functions/_id/get/handler.main",
        "DELETE /links/{id}": "src/functions/links/_id/delete/handler.main",
        "GET /links/{id}": "src/functions/links/_id/get/handler.main",
        "PUT /links/{id}": "src/functions/links/_id/put/handler.main",
        "POST /links/create": "src/functions/links/create/handler.main",
        "GET /links/list": "src/functions/links/list/handler.main",
        "GET /users/authRedirect":
          "src/functions/users/authRedirect/handler.main",
        "GET /users/me": "src/functions/users/me/handler.main",
      },
    });

    const webStatic = new sst.ReactStaticSite(this, "WebStatic", {
      path: path.resolve(__dirname, "../../frontend"),
      environment: {
        REACT_APP_API_URL: api.url,
      },
      cfDistribution: {
        comment: "Distribution for React website",
      },
    });

    this.addDefaultFunctionEnv({
      FRONTEND_URL: webStatic.url,
      API_URL: api.url,
    });

    this.addOutputs({
      ApiEndpoint: api.url,
      WebEndpoint: webStatic.url,
    });
  }
}

why did you added

this.addDefaultFunctionEnv({
      FRONTEND_URL: webStatic.url,
      API_URL: api.url,
    });

seperately?

I can't add

API_URL

inside

environment

object

where do you want to use it? on frontend?

Nope. On the backend.

addDefaultFunctionEnv

should add an environment variable only for lambda functions, therefore I cannot use it on the frontend

How are you doing it right now? you’re redirecting from the backend?

I send the URL for the redirect to the frontend, make a redirect using

document.location

and after the second redirect from OAuth, I make a redirect to the frontend

Okay got it, which URL are you missing right now? You have the access to the first redirect URL and the for the second redirect google handles it.

Both,

FRONTEND_URL

and

API_URL

are undefined. So my request to Google is useless

you can access the API url in frontend using

REACT_APP_API_URL

But why can't I access the variables from

addDefaultFunctionEnv

?

If you want to pass environment variables to front-end, then pass in the

ReactStaticSite

. Construct

On the contrary, I want the backend to know everything, not the frontend

@Artemiy Davydov

addDefaultFunctionEnv

is meant to affect functions created after the call was made.

For some reason, I don't get anything in response other than this. (see attachments) For the test, I rewrote the function to this

export const main = async (
  event: APIGatewayProxyEventV2
): Promise<APIGatewayProxyResultV2> => {
  return {
    statusCode: 200,
    body: JSON.stringify([process.env.WEB_URL, process.env.API_URL]),
  };
};

And it returns

{
  "message": "Internal Server Error"
}

without any output to the console or console.serverless-stack.com Also, the hot reload doesn't seem to be working