0

This is my first time trying to deploy a React application. I use Heroku and I added the create-react-app build pack to my settings in Heroku. The application is deploying fine except that when I go to inspect the application with Chrome's developer tools, all of the code is readable. Nothing is minimized and the deployment read out is stating that its about 64MB in size which is pretty sizeable considering this is a simple minesweeper game I wrote as I am currently learning React.

I see that I can run yarn build locally for production files but Heroku should be doing that (and it claims to be doing it) in the deployment process. Here is the full deployment log (and the url to application is at the bottom of the log if you want to see for yourself that the code isn't compressed at all.

Also, I have both the heroku/nodejs and create-react-app build packs added.

Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 447 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:        
remote: -----> Restoring cache
remote:        - yarn cache
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        Done in 24.67s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.27 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.16 KB  build/static/css/2.266e55a5.chunk.css
remote:          7.28 KB   build/static/js/main.85808fae.chunk.js
remote:          922 B     build/static/css/main.1b212574.chunk.css
remote:          772 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          <removed url because stack overflow complained>
remote:        
remote:        Done in 30.84s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.24s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_HOME=/tmp/build_8f502a2ec1527c68927f7b22b403c03a/.heroku/node
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:         !     node_modules checked into source control
remote:               https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:        
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        Done in 49.98s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.27 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.16 KB  build/static/css/2.266e55a5.chunk.css
remote:          7.28 KB   build/static/js/main.85808fae.chunk.js
remote:          922 B     build/static/css/main.1b212574.chunk.css
remote:          772 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          <removed url because stackoverflow complained>
remote:        
remote:        Done in 31.08s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.34s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Writing `static.json` to support create-react-app
remote:        Enabling runtime environment variables
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
remote:                                  Dload  Upload   Total   Spent    Left  Speed
remote: 100  838k  100  838k    0     0  14.3M      0 --:--:-- --:--:-- --:--:-- 14.1M
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 65M
remote: -----> Launching...
remote:        Released v5
remote:        https://still-headland-77198.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/still-headland-77198.git
   28ed634..60391e2  master -> master

EDIT: below is a photo of what I'm seeing when I inspect the web site:

enter image description here

EDIT #2: So it looks like the static files are being sent correctly, but its the source maps that are viewable through the browser developer tools.

When I do a full page reload, this is what heroku logs output I get:

2019-10-15T13:22:09.316671+00:00 heroku[router]: at=info method=GET path="/" host=still-headland-77198.herokuapp.com request_id=27e961ec-3a0a-48dd-a23f-19347df72d65 fwd="67.166.153.94" dyno=web.1 connect=0ms service=5ms status=200 bytes=1147 protocol=https
2019-10-15T13:22:09.589611+00:00 heroku[router]: at=info method=GET path="/static/js/bundle.js" host=still-headland-77198.herokuapp.com request_id=ebe2c750-2783-4558-8f40-d92d70b7b05e fwd="67.166.153.94" dyno=web.1 connect=0ms service=19ms status=200 bytes=6709 protocol=https
2019-10-15T13:22:09.788537+00:00 heroku[router]: at=info method=GET path="/static/js/main.chunk.js" host=still-headland-77198.herokuapp.com request_id=e2c77a25-0b40-4f02-a24f-ab64c4fd588d fwd="67.166.153.94" dyno=web.1 connect=0ms service=29ms status=200 bytes=14484 protocol=https
2019-10-15T13:22:10.04068+00:00 heroku[router]: at=info method=GET path="/static/js/0.chunk.js" host=still-headland-77198.herokuapp.com request_id=c9554914-d290-4d3e-a3fd-df18f0cc6869 fwd="67.166.153.94" dyno=web.1 connect=0ms service=288ms status=200 bytes=590301 protocol=https
2019-10-15T13:22:10.852381+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=still-headland-77198.herokuapp.com request_id=4b503f0b-7ab5-4d40-8c9f-4b3564efc05c fwd="67.166.153.94" dyno=web.1 connect=0ms service=15ms status=200 bytes=1936 protocol=https
2019-10-15T13:22:10.857839+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=still-headland-77198.herokuapp.com request_id=1e33ae5e-8909-44a9-b1b2-4672c75e8293 fwd="67.166.153.94" dyno=web.1 connect=0ms service=15ms status=200 bytes=1936 protocol=https
2019-10-15T13:22:10.880865+00:00 heroku[router]: at=info method=GET path="/sockjs-node/info?t=1571145724205" host=still-headland-77198.herokuapp.com request_id=a19d69ab-9d04-46a6-9bff-9914734597e0 fwd="67.166.153.94" dyno=web.1 connect=0ms service=4ms status=200 bytes=363 protocol=https

EDIT #3 (Full sanity check with logs): (btw gits is just an alias for git status I use.

 react-minesweeper ruby-2.6.3 git:(master) gits
On branch master
Your branch is up-to-date with 'origin/master'.

nothing to commit, working directory clean
 react-minesweeper ruby-2.6.3 git:(master) git commit --allow-empty
[master d86dc63] Another test for deploying.
 react-minesweeper ruby-2.6.3 git:(master) gits
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working directory clean
 react-minesweeper ruby-2.6.3 git:(master) heroku maintenance:on 
Enabling maintenance mode for ⬢ still-headland-77198... done
 react-minesweeper ruby-2.6.3 git:(master) git push heroku master
Counting objects: 1, done.
Writing objects: 100% (1/1), 194 bytes | 0 bytes/s, done.
Total 1 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        Done in 45.13s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ GENERATE_SOURCEMAP=false react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.22 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.12 KB  build/static/css/2.56d65a16.chunk.css
remote:          7.21 KB   build/static/js/main.507a084d.chunk.js
remote:          882 B     build/static/css/main.edf481ed.chunk.css
remote:          728 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          
remote:        
remote:        Done in 29.10s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.39s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Using existing `static.json`
remote:        Enabling runtime environment variables
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
remote:                                  Dload  Upload   Total   Spent    Left  Speed
remote: 100  838k  100  838k    0     0  9983k      0 --:--:-- --:--:-- --:--:-- 9983k
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:         !     node_modules checked into source control
remote:               https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:        
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        Done in 48.75s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ GENERATE_SOURCEMAP=false react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.22 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.12 KB  build/static/css/2.56d65a16.chunk.css
remote:          7.21 KB   build/static/js/main.507a084d.chunk.js
remote:          882 B     build/static/css/main.edf481ed.chunk.css
remote:          728 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:         
remote:        
remote:        Done in 29.96s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
remote:        warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > [email protected]" has incorrect peer dependency "[email protected]".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.38s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 64.6M
remote: -----> Launching...
remote:        Released v11
remote:        https://still-headland-77198.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/still-headland-77198.git
   a654077..d86dc63  master -> master
 react-minesweeper ruby-2.6.3 git:(master) heroku maintenance:off
Disabling maintenance mode for ⬢ still-headland-77198... done
8
  • Does it work as you want when you run yarn build locally ? Commented Oct 13, 2019 at 7:30
  • @giuseppedeponte I ran yarn build locally and under the build directory, I have a static and a src folder. The src folder looks like my code (including Typescript files) but the static folder looks like it has compressed js/css files in it. Do you think its possible my app is running the production files but the src folder is left over after the compression? Why isn't that folder being deleted after the build? Commented Oct 13, 2019 at 23:45
  • Judging from the console output, I don't think your src folder is being deployed. Only the build folder is normally deployed as it contains the transpiled and browser-understandable version of your code. Anyway, you can verify that in your browser inspector while on the online page. You will have the list of all the files your app use. Commented Oct 14, 2019 at 5:43
  • Also you can check out these docs to see if everything is fine with your deployment: github.com/mars/create-react-app-buildpack & blog.heroku.com/deploying-react-with-zero-configuration Commented Oct 14, 2019 at 5:45
  • I'm following the steps taken by the buildpack documentation and if you inspect the project, you can see the code isn't minimized and easily readable. Here, you can see the project I created from scratch using the Quick Guide: heroku-deploy-test-01.herokuapp.com Use Chrome developer tools, go to the Sources tab and view the files under static/js you will see both App.js and index.js aren't compressed at all. Commented Oct 14, 2019 at 17:36

1 Answer 1

3

By default Create-React-App has GENERATE_SOURCEMAP flag set to TRUE. It means that creating production build will generate additional source maps to your js files = you can see non-compiled code in Chrome's developer tools.

To fix that you should add GENERATE_SOURCEMAP=false to your envs on Heroku or add into package.json:

"scripts": {    
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
}

If it comes to deploying on Heroku then just make sure that your static.json (in root directory) looks something like this: https://github.com/mars/create-react-app-buildpack#web-server

{
  "root": "build/",
}

More information about this buildpack that you use: https://github.com/mars/create-react-app-buildpack

Done: 65M - this is a size of your deployment bundle along with Node.js and your small code. I think you shouldn't bother about that as this is normal situation.

Edit: If the solutions above don't work then please make sure that you serve the newest index.html with hashes in js imports. This article might be helpful: How to deploy a production react app to heroku

Sign up to request clarification or add additional context in comments.

11 Comments

At first you said to set GENERATE_SOUREMAP=true in my heroku env vars but then in the package.json file you have it set to false. I used your package.json example as my solution and added a static.json file into the root directory. Despite all of this, I'm still seeing the development source files. I can edit my post and show a screen cap of what I'm seeing.
You're right. It should be false. I've edited my answer.
@aarona please, make sure again that GENERATE_SOURCEMAP is set to false.
ok here's my build script: "build": "GENERATE_SOURCEMAP=false react-scripts build" and the contents of my /static.json file: { "root": "build/" }. Also, I'm deploying right now to test and this is in the logs: $ GENERATE_SOURCEMAP=false react-scripts build. However, it seems that I'm still getting those source maps. I tried viewing this with Firefox in case I just had some cached files but it looks like FF also has a webpack section with lists of files including the node_modules folder. See my second post edit. And also, thank very much for helping me with this. I appreciate it
You're right! Also, as soon as I read your comment, it confirmed someone else's advice when I posted this as an issue on the create-react-app github. Ok, found this: medium.com/jeremy-gottfrieds-tech-blog/… . This worked! I'm going to +1 and mark your answer as correct, but it would be great if you could edit your answer with the needed info or possible the url for anyone who finds this question that's dealing with this same issue.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.