My static files are being served from Amazon S3. I am using circleci for my CI/CD to deploy my files. The files are getting added to the s3 bucket as expected, but when I go to the static website link I see a blank page with the console error "Uncaught SyntaxError: Unexpected token ILLEGAL".
Through some sleuthing (see this link as one example) I found that the issue was in the metadata. The js files get added with a content type of application/javascript instead of text/js. When I manually go into my bucket and click on the individual files, go to Properties and then Metadata, and remove the existing content type and add the line Content-Type with a value of text/js for all the js gz files, the website starts displaying as it should. The only file that isn't a js file that's getting added is the index.html and that one gets the correct metadata (text/html).
I was super excited that it worked when I switched the content type, thinking I solved the issue. However, when I redeployed the app, the same incorrect metadata was added again. I found one solution to this, which was to add the content-type tag with a value of text/js during the deploy. This did work to get the correct content type associated with the js.gz files, BUT the index.html file is also being deployed. Since the index.html file also got the text/js file, we got the error "This site can't be reached".
Does anyone have any ideas for solutions? I am working on finding a way to dynamically choose one content type or the other, but I am wondering if there's a better solution. The app is being distributed through CloudFront.
Thank you for any help!
This is the end of my circleci config.yml where the deploy is happening:
- run: sudo apt-get update && sudo apt-get install -y python-dev
- run: sudo curl -O https://bootstrap.pypa.io/get-pip.py
- run: sudo python get-pip.py
- run: sudo pip install awscli --upgrade
- run: aws --version
- run: aws s3 ls
- run: yarn run deploy
The line yarn run deploy runs this:
yarn build && aws s3 sync dist/ s3://[bucket] --delete --content-encoding gzip
The updated line that added in content-type:
yarn build && aws s3 sync dist/ s3://[bucket] --delete --content-encoding gzip --content-type text/js
Update:
I thought I found a solution by adding tags to include or exclude files by the extension, as should below.
"deploy-html": "yarn build && aws s3 sync dist/ s3://[bucket name] --exclude *.html --include *.gz --delete --content-encoding gzip --content-type text/js",
"deploy-js": "yarn build && aws s3 sync dist/ s3://[bucket name] --exclude *.js --include *.html --content-encoding gzip --content-type text/html",
"deploy": "yarn build && yarn run deploy-html && yarn run deploy-js"
However, that makes them unavailable in general so it results in the error:
Unknown options: server.js,webpack.common.js,webpack.dev.js,webpack.prod.js
I found a solution by adding everything and then updating the metadata.
package.json scripts:
"deploy": "aws s3 sync dist/ s3://dallas-website --delete --content-type text/js --content-encoding gzip",
"update-metadata": "aws s3api copy-object --bucket dallas-website --content-type text/html --copy-source dallas-website/index.html --key index.html --metadata-directive REPLACE"
config.yml steps:
- run: yarn run build
- run: yarn run deploy
- run: yarn run update-metadata