React source code exposed in AWS amplify deployment

Question

I am testing deployment of an app on AWS amplify. These are the steps I followed:

1. created a sample create-react-app (called deploy_test app here),
2. Pushed the code to a GitHub repo
3. AWS Amplify console > Deploy app > linked GitHub repo > used default config (as shown below)

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

The deployment works beautifully, even when I push new changes. The issue is that I can see the entire source code in the Chrome Dev Tools (as shown below). Any tips on how I can resolve this?

Answer 1

by default, create-react-app will generate full sourcemaps:

A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. https://github.com/facebook/create-react-app#whats-included

you can set GENERATE_SOURCEMAP=false before the build script:

    build:
      commands:
        - GENERATE_SOURCEMAP=false yarn run build

you can see it defined in the source code of create-react-app webpack config:

https://github.com/facebook/create-react-app/blob/0a827f69ab0d2ee3871ba9b71350031d8a81b7ae/packages/react-scripts/config/webpack.config.js#L42