Manage Environments in Create React App

Chapter Comments
1

Link to chapter - https://serverless-stack.com/chapters/manage-environments-in-create-react-app.html

2

Looking for a little clarity on this section. Are we supposed to run these build commands here? It’s not clear on whether you are giving an example of what to run later, or we are actually supposed to be running the build commands for dev and prod during this section.

REACT_APP_STAGE=prod npm run build
3

Good point. I’ll edit it to make it clear. It’s just an example. We use this command later in our build process.

1 Like
4

My API tests pass, but when I try to set the configuration for dev or prod on the client with the new values I’m getting 500 status codes.

GET https://api.colemars.com/dev/notes 500

The previous values still work correctly.

Passing API test:

gateway-cli-test
–username=‘admin@example.com’
–password=‘Passw0rd!’
–user-pool-id=‘us-east-1_MRRQ40XM7’
–app-client-id=‘69tve4h4s4tjnhd93052v8h3ta’
–cognito-region=‘us-east-1’
–identity-pool-id=‘us-east-1:7982caeb-8a8d-4411-8358-e12f5be8a03a’
–invoke-url=‘https://api.colemars.com/dev’
–api-gateway-region=‘us-east-1’
–path-template=‘/notes’
–method=‘POST’
–body=‘{“content”:“hello world”,“attachment”:“hello.jpg”}’

Failing client access:

const dev = {
  s3: {
    REGION: "us-east-1",
    BUCKET: "notes-app-2-api-dev-attachmentsbucket-gebtjvlj0ile"
  },
  apiGateway: {
    REGION: "us-east-1",
    URL: "https://api.colemars.com/dev"
  },
  cognito: {
    REGION: "us-east-1",
    USER_POOL_ID: "us-east-1_MRRQ40XM7",
    APP_CLIENT_ID: "69tve4h4s4tjnhd93052v8h3ta",
    IDENTITY_POOL_ID: "us-east-1:7982caeb-8a8d-4411-8358-e12f5be8a03a"
  }
};

Any idea?

5

A 500 error means that it’s getting through to your Lambda functions and then failing. I would enable logging and try seeing if that gives something.

1 Like
6

What is the most secure way to hide environment vars within a React app? I don’t really want to show my S3, Api Gateway and Cognito credentials if someone was to inspect my minified source code.

Thanks for any info.

7

So we aren’t putting out our credentials here. They are only the id’s for the resources involved. And these resources cannot be accessed without authentication.

1 Like