Cannot GET due to Content Security Policy

[curtisbarnard]

Sorry I'm new to node so perhaps I did something wrong. I followed the directions here: https://blog.surjithctly.in/neat-stack-create-a-static-website-with-netlify-cms-eleventy-alpinejs-and-tailwindcss

When I run npm run start and go to http://localhost:8080 to see the served site I'm getting "Cannot GET /" on the page with the following error in the console:

When I look in the HTML source I see it is blocking this bit of code:

I'm a bit confused as to where to look to fix the issue. Thanks for the help!

[curtisbarnard]

I had someone else on a windows machine test and they had the same result. We were able to get it working by doing the following though:

1. Open three terminals
2. 'npm run css'
3. 'npm run eleventy'
4. 'npx browser-sync start --server '_site' --files '_site' --port 8080 --no-notify --no-open'

Not sure if something in the script needs to be tweaked to allow it to run from a single terminal?

[wiredacorn]

I am not able to reproduce this issue.

Could you provide your node version, browser, and operating system? Also, your package.json would be helpful.

[curtisbarnard]

Software versions

• Node v16.15.0
• Chrome Version 101.0.4951.54
• Firefox Version 100.0
• Windows 10 Home version 21H2

package.json

{
  "scripts": {
    "start": "npm-run-all --parallel css eleventy browsersync",
    "eleventy": "eleventy --watch",
    "debug": "set DEBUG=* & eleventy",
    "css": "postcss src/static/css/tailwind.css --o _site/static/css/style.css --watch",
    "build": "cross-env NODE_ENV=production eleventy && cross-env NODE_ENV=production tailwindcss -i src/static/css/tailwind.css -o _site/static/css/style.css",
    "browsersync": "browser-sync start --server '_site' --files '_site' --port 8080 --no-notify --no-open"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.0",
    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
    "@tailwindcss/typography": "^0.5.0",
    "alpinejs": "^3.7.1",
    "browser-sync": "^2.27.7",
    "cross-env": "^7.0.3",
    "cssnano": "^5.0.15",
    "html-minifier": "^4.0.0",
    "js-yaml": "^4.1.0",
    "luxon": "^2.3.0",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^9.1.0",
    "prismjs": "^1.26.0",
    "tailwindcss": "^3.0.13"
  },
  "dependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5"
  }
}

[surjithctly]

Hello @curtisbarnard

Can you try it on the latest Node 17x? Also, try upgrading all dependencies.

[wiredacorn]

I was able to reproduce the issue. From what I can tell, it seems that browser-sync is not finding the folder for some reason and the empty page is generating a CSP warning. I was also able to reproduce the error using this simplified test without npm-run-all, tailwind, or eleventy just to help narrow the issue down.

"test": "browser-sync start --server '_site' --files '_site' --port 8080"

When running npm run test I get the "Cannot GET /" error. I had already run npm run build so there was definitely content in the _site folder.

I did find that removing the single quotes around the '_site' folder name in the browser-sync script resolved the error.

Try changing the browsersync script to this: "browsersync": "browser-sync start --server _site --files _site --port 8080 --no-notify --no-open"

The browser-sync documentation examples use single quotes, so I'm not sure why this is happening. In any case, let us know if this fixes the issue.

[curtisbarnard]

I just tried @wiredacorn suggestion of removing the single quotes from the package.json and it worked like a charm! Would you like me to open a PR to make this change?

[curtisbarnard]

@surjithctly I tried it with node 18.2.0 and still had the same issue. Again removing the ticks from _site in the package.json worked like a charm.

[surjithctly]

I see. Can you open a PR?