New to netlify. My own build deploys to local server correctly and looks as it should. If you select the expand icon on a property card (magnifying glass with plus sign) the star icons are much too large, causing the wrapping you see. The first row of stars is correct at w-5 h-5, same as the single row of stars on first pane. However the next 3 rows of stars at w-6 h-6 are the ones that are displayed incorrectly and much bigger than 6x6. Am I correct in thinking that I can help debug this by pushing my own local build up to netlify?
really appreciate you looking at this … however not sure we need to go into the browser dev tools and start directly manipulating the html just yet The code deployed to netlify functions correctly on a local server:
yarn global add serve
$ serve -s build
Also I have just deployed same project to Vercel at https://workcation-cra.vercel.app/ where all the stars are the correct size. Which I think focuses the attention on netlify, right? So new here that not sure what the next step to take is. Reading the netlify deploy docs it seems as though I can manually deploy a local build from the netlify cli … am I correct here? If so that would isolate the netlify build process from the netlify “display” process.
I must admit that this does seems rather weird - that the svg icons are displayed at the correct size everwhere else but here
I don’t know what to say. Your Vercel build has this class in the tailwind css:
The Netlify one, doesn’t:
I’d take this to be a problem of something like PurgeCSS if you’re using it.
Just to clarify, there are often differences between local and production builds and it’s not specific to deploying on Netlify. Sure it works on Vercel, but Netlify doesn’t magically manipulate your source or output, it just builds. If everything builds the way it should, I don’t see a reason for this to not work. The only difference between Netlify’s and Vercel’s build that I would guess would be the difference in the build-bot dependencies. But then, I don’t know.
Yes, you can deploy locally from CLI or even jus build locally and drag and drop the entire folder to Netlify UI, or publish the built folder to your Git repo and tell Netlify to just publish the website without building.
Again, thanks so much for your help so far! You are absolutely right about the missing “h-4” style in the netlify build as compared to the vercel build and local build (local maybe misleading as it is the yarn build that writes prod version to /build folder). So I installed netlify dev for the cli and ran the cli tools to create the build locally and then “$ netlify deploy --prod” to move the local build to netlify.
Which fixes it. “h-4” now appears in the deployed css. Stars are now the correct size. I will use this method from now on. Does it mean that there is a glitch in the netlify on-line build process?
Hi, @Mic1. In the vast majority of similar cases, the root cause is a missing configuration issue - not a glitch.
There likely is a difference between your local build environment and the build at Netlify. However, Netlify’s build system has know to what your local build environment is. We need to you tell us how to build the site.
If I’m right about the root cause, the solution is to configure your site’s build environment at Netlify to match your local builds.
In many cases, the issue is fixed just by making the Node.js versions used at Netlify match the local version (more at the URL below):
The code deployed to netlify functions correctly on a local server:
