I have no idea how to explain this or what to post but maybe the easiest way is through images. Here is a look at my locally hosted website:
Simple enough right? It goes off screen if the viewport isn't wide enough for it. Now here is my heroku app:
This isn't the only issue. There are other problems too. Like images not reacting to media queries. Or when they do react they react in a different way. The ak image isn't even in the same place. And some other images are of different sizes compared to what I'm seeing.
I have tried deleting my git commit history, I have deleted my master branch and redid it. I just don't know what's left to try. Any advice would be very VERY much appreciated.
Update: I have since tried deploying to a different app. And it worked just fine! But how do I reset the heroku app that i have right now without changing the domain settings?
So I have figured it out! It was cloudflare SSL that was the issue. It was mixing cached data with non-cached data and turning the whole page into a pile of wack.
Related
I'm currently working on Vue 2 app hosted on S3 and served through CloudFront. With my routing mode set to history, things weren't working properly upon initial deployment.
However, I was able to fix that by adding redirection rules to my CF distribution:
Things were working fine, but now for whatever reason, that stopped working, I'm getting a HTTP 403 on all pages/paths I try to visit. The only difference between then and now is that my app has more pages/paths. Nothing else has changed. Here's a sample response header:
It's few and far in between, but there have been a couple of instances when I've gotten HTTP 404. The puzzling part is that the pages/paths load up fully, but not all the stylings get applied. For example, a fully bolded 12-sentence paragraph might display only 4 sentences as bolded.
Initially, I thought there was an issue with CF, but I have tried everything I could think of and talked with AWS Support, but nothing has come of that so far.
My next guess is that this may be a routing issue, but I'm not sure what to try. The routing issues I've faced in the past revolve around pages/paths not loading up at all so this is new territory for me, and I have not the slightest idea where to begin my troubleshooting efforts.
Has anyone faced a similar issue in the past? If so, how did you fix it?
So it turns out, the issue originated from the way I was setting up Tailwind.
Instead of setting things up myself, I just pointed to Tailwind's CDN and the issue was resolved.
The version of Tailwind I was using was a bit old, so it could have been a dependency issue as well.
I'm trying to build a Vue web app and a friend was using it when it froze. Refreshing the page or opening a new tab and going to the page didn't fix it, and it would just keep loading until chrome said the page was unresponsive.
I thought it might be a network issue on their side but it works fine on their phone. Then I thought maybe there was a localStorage or cookie corruption issue, but then it was still broken on a different browser(chrome & edge).
https://i.stack.imgur.com/CTLTs.png
https://i.stack.imgur.com/zbjdr.png
This site doesn't seem to show any HTML and upon reload, nothing pops up in the network tab.
https://i.stack.imgur.com/zjqrk.png
The site uses vue3, vuex, fullcalendar, fontawesome, lzutf8(compression algorithm package). It's hosted on netlify.
Honestly, I don't even know where to start debugging this since I can't reproduce the issue on my computer and it makes it worse than I don't physically have the laptop in front of me. Here are some issues I think it may be:
There is some corrupt data between chrome and edge that's causing the site to freeze
I'm using a compression algorithm package to compress the vue store into a copy/pastable string. It's possible this is causing the site to slow when vuex tries to load the getter for the compressed store, but if the localstorage is empty all it has to compress is empty arrays so I don't see how compression would cause an issue.
A firewall on the device could be blocking the website
Maybe there's a chance Netlify could be blocking the site?
Potentially there's some issue with vue or vuex that I don't know about?
Here's the github repo: https://github.com/ZombiMigz/cpp-scheduler-webapp
and the website is deployed here: https://cppscheduler.com/
Any help or ideas would be greatly appreciated
A while back I set up a heroku app for my express.js API. I set this up so that when I push to GitHub it automatically deploys to heroku. All works fine except for one thing, my secrets. I store them I a .env file and all works fine. Only problem is because they are in my .gitignore they are not pushed to the repo which causes my heroku app to malfunction. This might be a duplicate but I can't find my answer. I would appreciate your help. Thanks in advance!
assuming you checked out this stackoverflow question i would make it a bit simpler by laying out the steps as so:
head on to your project dashboard
go to settings tab from the upper menu
scroll down to config vars and show them
you will find the config input where you can place all your dotenv secrets
and it would look like this
I have only deployed a couple small apps before and I am still newer to deploying apps in general.
I created this app by following a course and have recently finished the project. The course did not provide instructions on how to deploy the app. I have used Firebase hosting a couple times and am also somewhat familiar with Heroku. Regardless, it all seems pretty straight forward after following documentation.
I first tried Firebase hosting since that is what I am most familiar with. Spent some time with that with no luck, then tried heroku, then netlify, then NOW. Every single one of them had issues without any real information on them.
NOW says deployement failed with no logs.
Firebase hosting doesn't seem to be logging any errors, it builds a blank page.
Netlify says page not found after deployment and Heroku was something similar.
I am 100% open to getting this simple app deployed using any approach at all (preferably the easiest one).
Since I am following documentation and there doesn't seem to be any errors being logged, I'm completely stumped and am not sure what to do.
I realize I might not be providing the most helpful information to solve this issue, although I do have my full repo here:
https://github.com/SIeep/austin-pizza
Would anyone be kind enough to look over my repo and see what the issue might be? Or even point me in the right direction?
Please let me know if I need to provide any additional information.
Thanks!
missing entry file or file path problem ?
Try to find out which stage the problem is at first.
Compare this and last successful Firebase Configuration（dependency path），
Compare this and the last build dist file （not detail code,just File structure）
compare webpack.config.js
（app can run well locally,so i think it wouldn't because of the problem with the app's own code）
I was wondering if anyone could point out what is causing the problem in the screenshot attached. It has happened a couple of times with different images. I can't see what is causing it.
The machine is my development machine.
I was hoping to post this on serverfault but I can't add the image I need.
Not enough info yet, so just some debugging steps.
Try uploading it to a different machine and see if you get these same messages.
Check you don't have any Javascript doing anything with image urls - to me it looks like some loop somewhere might be going 'wacko', but could be client or server side.
Use tail -F on it in the terminal and refresh the page to see if the appearance of those entries coincides with the loading of the page.
Edit: maybe also have Firebug/etc open when you refresh the page with their Network panels open to see if you really are sending those requests. Really just want to find if it's a client or server issue to begin with.