Hi, I am new to Netlify and just deployed my second project. The first one was relatively simple and worked fine, but with my second one, the deploy process runs through, but the site doesn’t seem to find some of the CSS, fonts, and JS.
The project runs well locally and I have checked case sensitivity and still have a lot of issues.
https://cryptobirdies.netlify.app/
Deploy log:
1:25:28 PM: Build ready to start
1:25:30 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
1:25:30 PM: build-image tag: v3.4.1
1:25:30 PM: buildbot version: 19f1164460e8d8241255cf2a71abc5e0e454118e
1:25:30 PM: Fetching cached dependencies
1:25:30 PM: Starting to download cache of 248.6MB
1:25:34 PM: Finished downloading cache in 4.058355086s
1:25:34 PM: Starting to extract cache
1:25:36 PM: Finished extracting cache in 1.846216764s
1:25:36 PM: Finished fetching cache in 5.96495436s
1:25:36 PM: Starting to prepare the repo for build
1:25:36 PM: Preparing Git Reference refs/heads/master
1:25:38 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'client' versus 'client/' in the Netlify UI
1:25:38 PM: No build command found, continuing to publishing
1:25:38 PM: Starting to deploy site from 'client'
1:25:38 PM: Creating deploy tree
1:25:38 PM: Creating deploy upload records
1:25:38 PM: 0 new files to upload
1:25:38 PM: 0 new functions to upload
1:25:38 PM: Starting post processing
1:25:38 PM: Post processing - HTML
1:25:38 PM: Post processing - header rules
1:25:38 PM: Post processing - redirect rules
1:25:38 PM: Post processing done
1:25:38 PM: Site is live ✨
1:25:54 PM: Finished processing build request in 23.733468378s
I guess the problem is your deploy path. Are you sure it’s client?
Because when I tried accessing the URLs that were returning 404, for example https://cryptobirdies.netlify.app/client/assets/media/nature.webp. It loads fine when I remove clients from the link making it: https://cryptobirdies.netlify.app/assets/media/nature.webp. Either your deploy path is wrong or you have not used relative URLs properly. My first guess would have been wrong use of relative URLs, but, since you say it works fine locally, something else must be wrong. Is it possible for use to see the repository so we can confirm?
Oh yeah, this makes it easier. So, I see, you’re not really ‘building’ the website. You’re just deploying a pre-build website from the folder ‘client’. Is that right?
So, I don’t know how you got this to work locally, but the paths are relative to the root of the repository and not the root of the domain. Your paths are starting with /client/ and since for browser yourdomain.com/client' doesn’t exist, thus the 404.
If my opening statement of this reply is incorrect, would it be possible to explain about your workflow a bit, that is how do you have this set-up locally and are testing/building it?
Also, not related to the problem, but, recommended: I noticed that some of your paths don’t start with /, for example in index.html - line 25: <a class="navbar-brand" href="#"><img id="logo" height="50" src="assets/media/Birdy.jpg"> Crypto Birdies </a>. The src is relative to the folder and not the domain. So, if by chance this index.html file would be moved to some other directory, this will also start returning a 404.
Yes, I am building from the client folder. I just updated all paths to reflect that fully.
My code works locally through the VS Code Live server. The frontend is mainly JS and I have a blockchain side to it that runs on the Ropsten Testnet written in Solidity all that code is under contracts. My website connects with a crypto wallet to manage the transactions of the users.
The site mainly shows how NFTs can be created and safely transfered, how a site is build using various safety measures on the blockchain side such as Checks/Effects/Interactions, SafeMath and Pausing the contract.
And I don’t know why you mention the 404. I don’t see a 404 when I deploy through Netlify. All I see as a version of my frontend that loads some of the code (mainly the HTML), but not the rest of it (JS, CSS, background, etc.). Please advise what you mean by ‘building’ the website.
Thanks for you help!
By that, I mean, there’s nothing in your website for Netlify to ‘build’. It’s just taking the code from your repository and deploying it as it is (with asset optimization, forms, etc. if enabled).
Check your browser’s console. Here’s what I can see:
I repeat, all your paths are relative to your repository and not the domain. The paths should not start with /client/ in your case. For example:
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/client/assets/media/favicons/apple-touch-icon.png"> should be <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/assets/media/favicons/apple-touch-icon.png">. Give it a try.
@hrishikesh: Everything works now. I had to change the static font and background to dynamic load from the internet. Thanks for your help!
2 Likes
