I am creating a production build of my website with npm run build and using netlify to host it. After creating the production build the look of the website has changed dramatically and I can’t understand why.
Before
The live version is here : https://spokanepowerstroke.net
Several other aspects are different too on almost every page. I’ve had this issue before when I found that there were multiple parts of my Css that were changing the same Html tag, but I have not seen that in this code.
I have tried pretty much all day to no avail. I have had this problem before where I had duplicate rules in my css, but I have found no such rules this time.
Here is the github repo. https://github.com/Imstupidpleasehelp/spokane-power-stroke
I would love a second pair of eyes on this, any expertise you have would be greatly appreciated.
I see that you have some packages in your package.json and your index.html.
I would first remove the duplicates, e.g. react and put everything into package.json.
Then my best idea is to download the build files from Netlify, e.g. by using the Dev Tools Network tab and to compare them with the build file from your local device.
So I removed everything but the fonts and it doesn’t seem to have affected anything, so good call on those duplicates. I have since downloaded the build file, it is the same as the one I get from running npm run build locally . So the problem is not with netlify.
Thanks for your assistance.
So I deployed it manually on my webhost by just dumping the build folders into the Public_HTML folder, and still it has the same different look. So It’s something wrong with my compiler? I tried reinstalling npm and that didn’t do the trick.
I really appreciate your continued feedback, do you have anything else I can try?
Does it look different with different browsers? I would use a Chromium-based one at a not Chromium-based one, e.g. Firefix
Do you use an Adblocker?
Do you see some failing (red) connections in the Browser Network Tab? Maybe because your local server is http, but Netlify is https or something like that.
In general, I always would try to deploy as fast as possible to the internet, because serving your stuff locally is mostly a special situation (http, more connections allowed etc.). The internet-deployed version should be your single source of truth.
I’m sorry I forgot to update FCC, I managed to solve the issue with a variety of methods.
I had to manually add a bootstrap import into my css, remove my custom css rules that affected the layout, and then redo most of the pages in simpler layouts.
overall it was my fault, I made this code 2 months ago and it was a complete mess and I paid for it.
I appreciate your help awell.
