I am in the process of moving my team frontend to Netlify. We’ve got it all pretty much working but I have noticed an odd issue: If we visit a PR deploy preview link, it seems every file 404s:
As you can imagine this is a bit of a pain and I’m sure it’s just something we don’t have set up properly - I just haven’t seen anything related to this. Can someone enlighten me as to the difference between the URLs and how I may attempt to solve this?
I’ve triggered a preview deploy with that script commented out and still seem to be seeing that domain in the requests… Any other ideas of what could be causing that?
That’s the initiator column in dev tools and that shows what file was responsible for the resource being requested. From that, it still appears that your code it appending some scripts and those scripts are pointing somewhere weird.
I’m assuming that because of the 404 error, the script is not actually getting added to <head> (which it should according to the code in that runtime file. But apart from that I can’t comment much without seeing the source. Maybe you can enable source maps and that would show the actual cause of the problem.
I’ve pushed up a build with source maps but don’t see much there… I can download the deploy zip and it runs locally just fine (using npx lite-server). It feels like this is specific to the Netlify deploy URL since I cannot reproduce locally or in production.
Is there any resource you can point me to that may help? Does Netlify rely on any certain fields inside a package.json etc that could effect the base? We are setting the base URL to / in the head.
Here is the compiled index.html:
<!DOCTYPE html>
<html lang="en">
<head><base href="/">
<meta charset="UTF-8" />
<title>FlowPath</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Facilities Management Simplified" />
<link
rel="shortcut icon"
type="image/png"
href="https://vendorloft-tutorials.s3.us-east-2.amazonaws.com/logos/VendorLoft-Square.png"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Varela&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
<!-- PWA settings -->
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#143055" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="FlowPath" />
<link rel="apple-touch-icon" href="assets/images/pwa/apple-touch-icon.png" />
<!-- iOS Splash Screens -->
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2048-2732.jpg"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2732-2048.jpg"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1668-2388.jpg"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2388-1668.jpg"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1536-2048.jpg"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2048-1536.jpg"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1668-2224.jpg"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2224-1668.jpg"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1620-2160.jpg"
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2160-1620.jpg"
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1284-2778.jpg"
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2778-1284.jpg"
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1170-2532.jpg"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2532-1170.jpg"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1125-2436.jpg"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2436-1125.jpg"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1242-2688.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2688-1242.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-828-1792.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1792-828.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1242-2208.jpg"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-2208-1242.jpg"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-750-1334.jpg"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1334-750.jpg"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-640-1136.jpg"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="assets/images/pwa/apple-splash-1136-640.jpg"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link rel="stylesheet" href="styles.e994e0c741b0a0ee.css"></head>
<body>
<div class="app-base" id="app"></div>
<script src="runtime.8e1f85f0ecf9a466.esm.js" type="module"></script><script src="polyfills.989fe596efc47be2.esm.js" type="module"></script><script src="main.a8942a4f010534d1.esm.js" type="module"></script></body>
</html>
Yep, that does stop the error. Access to the drawer would be nice of course, but definitely not the blocker that these links were.
Looking at netlify.js I sure don’t see what could be causing this.
After a decade of Angular, this is my first React project, but afaik we are pretty much using it with the default setup. Please let me know if I can provide any more info to help debugging this.
Looks like the solution is going to be to set the deploy URL dynamically. Still not sure why I am hitting this when it seems others are not; guessing it may be due to the Monorepo setup.
For anyone else coming across this in the future, here is what I’ve added to our netlify.toml to get by this:
