I've built an app with CRA and I'm trying to prevent Chrome from loading source maps.
Here's what I've tried so far:
Build react app with the command GENERATE_SOURCEMAP=false react-scripts build.
Ensure that no .map files are present in /myprojectfolder/build/.
Delete all static files in my AWS S3 bucket.
Deploy build folder to S3 using aws s3 sync ./build s3://mybucket --profile=s3-admin.
Invalidate AWS Cloudfront using aws cloudfront create-invalidation --paths / /build /css/* /index.html /error.html /service-worker.js /manifest.json /favicon.ico.
Clear all browser cache at Chrome settings.
Hard refresh with ⇧⌘R.
But it's still showing the message Source Map detected with the exact code I wrote. Also tested on Windows Chrome with the same result. Safari seems to have stopped loading source maps, on the other hand.
Did I do anything wrong? Or is there anything else I can do (maybe reboot)?
Any advice would be appreciated. Thank you.
I had the same issue. In order to fix this, I tried removing/adding hosting multiple times. I noticed that one of the old s3 hosting buckets still has .map files. So I removed the obsolete buckets and verified the current bucket doesn't have js.map files. Now I no longer see the actual source .js files in dev. tools including individual .css files.
Related
I have a react app uploaded on aws s3, this is the command I am using to deploy it
npm i
npm run build
aws s3 sync build s3://bucket/path --acl=public-read --delete
aws cloudfront create-invalidation --distribution-id XXX --paths "/*"
Then I have many errors like
Loading chunk X failed
or
Loading CSS chunk X failed
I was thinking it was due to cache issue after deployment, bet now I didn't deploy for a week and the error rate does not decrease.
For example, the error is Loading CSS chunk 6 failed. (/static/css/6.32a7316b.chunk.css) then when I go to https://my-website.com/static/css/6.32a7316b.chunk.css the file is loaded without issue
I read many posts but can not find any solution, some were talking about CORS configuration but should not be an issue as the file are coming from the same domain
There is maybe some cache rule to define, but I do not really know which one and where.
I am also using Cloudflare between the client and S3 I do not know if it has an impact
This error is occurring because some users are getting a version of the files that not exists anymore on the server.
When you use the create-invalidation Cloudfront method and invalidate the output directory, the users with cached files will try to load a file that not exists and you will saw this kind of error happening.
A option to stop with these errors is to have an app version tracking (using AJAX and read from db or dynamic config file) and when the app detects a newer version, message the user about it and ask them to reload the page as you can see on this answer here.
Also, check the output.publicPath option in the webpack.config.js file, maybe changing the default for / or /dist can solve your issue.
I have been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
I have prototyped a ReactJS static app (no backend) on my local computer by following some tutorial. I have used create-react-app to generate my project. The next step (which is not part of the tutorial) is to upload that to S3 as a static website. I noticed that the node_modules folder is quite large (around 500 MB).
In my reading of other tutorials about static websites in AWS, some JavaScript libraries (jquery) are actually served using CDN, instead of being bundled with the app folder that is be uploaded to S3. Can that be done with node_modules as well so I can avoid uploading that?
Create react app comes with the tools necessary to develop and build your application.
develop
When you develop, you can run npm run start, it will run the project as a website and open it on the default browser.
build
When you are ready to deploy, use 'npm run build', it will produce a build directory with optimised code ready for deployment. You can copy the contents of the build directory into your S3 bucket.
https://create-react-app.dev/docs/production-build
You can also check the available commands in the scripts section of your package.json.
Then what happened to the node_modules directory
The build process is using webpack to build the project. it will only include the bare minimum files required to run your application. It will not include the entire node_modules directory.
You don't need to (and you shouldn't) upload node_modules. Your dependencies are compiled and the output file should be in your /build directory after you build your application. You just need to upload that directory to S3.
I have a ReactJS application that produces a dist folder when I perform an npm build. This can be uploaded to Amazon's S3 and everything is fine.
I'm looking to continuously deploy this application, so my thoughts were to deploy to s3://RANDOM_STRING/, producing:
RANDOM_STRING/js
RANDOM_STRING/css
RANDOM_STRING/index.html
I can't tell S3, to the best of my knowledge, to use a sub-directory as a web-root, so I looked into CloudFront and updating the origin to the directory. This takes a lot of time to update and actually can't be done through the aws-cli, so continuous deployment would be ruined.
I've looked at using file-loader to rewrite my url() calls to include the RANDOM_STRING into the deployment assets, but this feels pretty "ugly"
Does anyone have experience of this kind of deployment and could help me out?
Have you tried setting your Default Root Object? You can configure it to be a sub directory.
See here: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html
I built my polymer project and deployed it with the firebase command. I followed the instruction on the polymer site. In Chrome on my Mac it works, but on my mobile(Chrome and Safari) and Safari on my Mac it display an empty page.
Can anybody help me out?
best regards
UPDATE: the dependency problem has been fixed with v0.16.0 which deployed this evening 8/24/2016. I have kept the below workaround just for reference.
This is a known issue: https://github.com/Polymer/polymer-cli/issues/347
includeDependencies stipulated in polymer.json is not being processed.
Here's the remedy for now:
The 'polymer build' process is not including the polyfill in the build even when you include it in the polymer.json dependencies.
This polyfill is necessary for browsers which do not support web components.
Therefore until it is fixed it needs to be added manually...
After running 'polymer build':
open the app's bower_components folder
copy the webcomponentsjs folder
open the build folder
paste the webcomponentsjs folder in the bundled/bower_components and unbundled/bower_components
run firebase deploy
(Do this for all dependencies you require.)