reactjsamazon-web-servicesweb-deploymentaws-amplify

React source code exposed in AWS amplify deployment


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?

enter image description here


Solution

  • 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