Seeking solutions for a blank page upon deployement with %PUBLIC_URL% errors

[M-lakshan]

This is the deployment: https://main--securetech-vote.netlify.app/

GitHub Repository: ‘https://github.com/M-lakshan/REACT_sample-voting-webpage’

Deploy Config (untouched):

Runtime:                 -not set-
Base directory:          frontend
Package directory:       -not set-
Build command:           npm run build
Publish directory:       frontend/build
Functions directory:     frontend/netlify/functions
Deploy log visibility:   Logs are public
Build status:            Active

**

---

Project builds & runs locally with no issues but when added to the deployment, I’m facing following errors.

• not sure why am I getting a ‘main - -’ keyword right after the ‘https://’ in my URL. (while the Netlify provided URL being: securetech-vote.netlify.app)
• even though the deployment navigated to the index.html (HTML title is visible) my webpage appearing as a blank page.
• no console errors shown by Opera & Firefox but with Chrome I get the following

(have no idea about fixing this console error)

---

Here is the latest deployment log from Netlify:

12:51:15 PM: Waiting for other deploys from your team to complete. Check the queue: Netlify App
12:51:35 PM: build-image version: 0143b4617dd9b5b3faed2aefa29c54a846e69aae (focal)
12:51:35 PM: buildbot version: 0143b4617dd9b5b3faed2aefa29c54a846e69aae
12:51:35 PM: Fetching cached dependencies
12:51:35 PM: Starting to download cache of 101.7MB
12:51:36 PM: Finished downloading cache in 964ms
12:51:36 PM: Starting to extract cache
12:51:37 PM: Finished extracting cache in 900ms
12:51:37 PM: Finished fetching cache in 1.91s
12:51:37 PM: Starting to prepare the repo for build
12:51:37 PM: Preparing Git Reference refs/heads/main
12:51:38 PM: Custom publish path detected. Proceeding with the specified path: “frontend/public”
12:51:38 PM: Starting to install dependencies
12:51:38 PM: Python version set to 3.8
12:51:39 PM: Attempting Ruby version 2.7.2, read from environment
12:51:39 PM: Using Ruby version 2.7.2
12:51:40 PM: Started restoring cached go cache
12:51:40 PM: Finished restoring cached go cache
12:51:40 PM: go version go1.19.13 linux/amd64
12:51:40 PM: Using PHP version 8.0
12:51:41 PM: Started restoring cached Node.js version
12:51:41 PM: Finished restoring cached Node.js version
12:51:42 PM: v18.18.0 is already installed.
12:51:42 PM: Now using node v18.18.0 (npm v9.8.1)
12:51:42 PM: Enabling Node.js Corepack
12:51:42 PM: Started restoring cached build plugins
12:51:42 PM: Finished restoring cached build plugins
12:51:42 PM: Started restoring cached corepack dependencies
12:51:42 PM: Finished restoring cached corepack dependencies
12:51:42 PM: No npm workspaces detected
12:51:42 PM: Started restoring cached node modules
12:51:42 PM: Finished restoring cached node modules
12:51:42 PM: Installing npm packages using npm version 9.8.1
12:51:48 PM: npm WARN deprecated babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-private-methods instead.
12:51:48 PM: npm WARN deprecated babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-private-property-in-object instead.
12:51:48 PM: npm WARN deprecated babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-optional-chaining instead.
12:51:48 PM: npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: Array.prototype.sort() - JavaScript | MDN
12:51:48 PM: npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use rollup/plugin-terser
12:51:48 PM: npm WARN deprecated w3c-hr-time@1.0.2: Use your platform"s native performance.now() and performance.timeOrigin.
npm WARN deprecated sourcemap-codec@1.4.8: Please use jridgewell/sourcemap-codec instead
12:51:48 PM: npm WARN deprecated babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-numeric-separator instead.
12:51:48 PM: npm WARN deprecated babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-class-properties instead.
12:51:48 PM: npm WARN deprecated babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-nullish-coalescing-operator instead.
12:51:49 PM: npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
12:51:49 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
12:51:52 PM: added 1530 packages, and audited 1531 packages in 9s
12:51:52 PM: 245 packages are looking for funding
12:51:52 PM: run npm fund for details
12:51:52 PM: 6 high severity vulnerabilities
12:51:52 PM: To address all issues (including breaking changes), run:
12:51:52 PM: npm audit fix --force
12:51:52 PM: Run npm audit for details.
12:51:52 PM: npm packages installed
12:51:53 PM: Site is live
12:51:53 PM: Post processing - redirect rules
12:51:53 PM: Post processing done
12:51:53 PM: Section completed: postprocessing
12:51:53 PM: Starting post processing
12:51:53 PM: Skipping HTML post processing
12:51:53 PM: Post processing - header rules
12:51:53 PM: Install dependencies script success
12:51:53 PM: No build steps found, continuing to publishing
12:51:53 PM: Starting to deploy site from “frontend/public”
12:51:53 PM: Calculating files to upload
12:51:53 PM: 0 new files to upload
12:51:53 PM: 0 new functions to upload
12:51:53 PM: Section completed: deploying
12:51:53 PM: Section completed: building
12:51:54 PM: Uploading Cache of size 101.7MB
12:51:55 PM: Section completed: cleanup
12:51:55 PM: Finished processing build request in 20.113s

---

[Melvin]

Hi @M-lakshan,

Thanks for reaching out and welcome to Netlify’s Support Forums!

main is shows as you’re using the URL from the production deploy. You’ll want to use this URL instead:

SecureTech® Pvt Ltd | vote

Or you can add a custom domain to the site here:

Netlify App

What framework are you using? Such as React, Gatsby.js, Next.js (for examples). Looks like it may be React, in which case you’ll want to use build commands mentioned here:

Framework integrations

Let us know if you have any questions.

[M-lakshan]

tnx for ur response Mr. @Melvin,
- Yes I’m using React for this. so with ur help, I have included the “npm run build” command to the Deploy-Config & now its navigating through the correct URL.

but still I’m getting the blank page with %PUBLIC_URL% errors in console (as I hv shown in my post) & don’t know how to deal with them.

[M-lakshan]

IDK if this is a proper solution or not, my webpage is alive after doing this.

i) First I removed the ‘%PUBLIC_URL%’ keyword from my link tags inside the index.html in public folder.
ii) Then I restructured the path as a relevant-path to the src.

---

** the only drawback was my URL changed back to ‘https://main–’. re-arranging the deploy configs didn’t help to recover the URL but its appearing time to time. (still need some help to figure out why its back ~ thanks in advance ~) **

[Melvin]

Hi @M-lakshan,

Thanks for the follow-up.

main--securetech-vote.netlify.app is the URL you see when you click on Production in the Deploy log. It’s your product branch URL. Your Netlify domain is securetech-vote.netlify.app.

Visiting that URL you’ll see your site (no longer seeing the Page Not Found). I’m also not seeing the %PUBLIC_URL%’ error in the Dev console, however I do see http://localhost:3001/ net::ERR_CONNECTION_REFUSED. I found a similar Forum post here:

Problem with my site after deploy

Hey everyone im new here, I did a chat app project in react and socket io that I writing a name and room id and I can talk with someone that write the same room id like me. In my localhost its working perfectly but in netlify app its not working (the page is ok but the functionality not working) I noticed I got this message in the console: GET http://localhost:3001/socket.io/?EIO=4&transport=polling&t=OIGAjw- net::ERR_CONNECTION_REFUSED Please help

Please read that post and see if it helps you resolve the issue. Thanks!

[M-lakshan]

good narration Mr. @Melvin . So, as in summary from the forum post u shared, my conclusion is: ` to replace the “http://localhost:3001” with “https://securetech-vote.netlify.app:3001” ? is it or smthing else?

sry this is the first attempt to deploy a prj with a backend-part.

[hrishikesh]

Duplicate of: Problem with my site after deploy - #12 by M-lakshan