How can I fix vue router issue in a CloudFront environment? - amazon-s3

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.

Related

WebApplication crashes on some clients after update

I amb developing a web application with the frontent using typescript and vue, and the backend using spring. All deployed into a machine with tomcat9.
For some reason, everytime I update the application my boss calls me days later stating that the application stoped working. I then go check, but works fine for me, ask me boss to clear cache site and then it works for him to.
I dunno why, but this always happends to my boss and not me.
At first I thought this was happening cause I wasn't updating the version on the package.json file. But this doesn't solved the problem.
Any hint on what I can do to avoid this behaviour? Any workarounds would also be appreciated. As a developer I don't mind clearing the cache but our clients....

Why is my heroku app and local app different?

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.

Error deploying vue app using any type of deployment

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)

Route problem on production after build vue application

So, I'm building an application with Vuejs and after we finish her we decided to finally build for production. Everything worked just fine while building and etc, but when the application was really being hosted, we noticed some issues that we do not saw while on localhost (development and production).
I'm saying this after a lot of tests and researches about it because first, I thought that the problem was after building to production but we tested another way to host and it's not apache that is causing this issue and I really think that is not the code either. Anyway the problem is when we first access the application our login page is the first that you can see and it works just fine at the first access but if the user refreshes the page for any reason the page loses all her CSS because the route /auth/login goes to /auth/login/ and after some tests I can confirm. That bar that is added at the end of the route makes the page lose CSS.
This problem we solved by adding an exception on our .htaccess (we know that this is not that best practice but anyway) after this solved we saw another problem: when we click on a link for example /auth/login?token=12334567890 the token param simply disappear and the user is automatically redirected to /auth/login. So we think that maybe these two problems are related because when we first access and log in everything inside the application works as it should, these two problems are only occurring on our login component. My question is what is causing this problem only on this page? It's a vue-router that is causing?

Occasionally receiving 403 error on Prestashop (both frontend and admin)

So I have this problem regarding Prestashop.
I created a subdomain for an website because I wanted to upgrade from 1.4.x to 1.6.x and I wanted the original website up and running.
I made a back-up and everything, I upgraded from 1.4.x to 1.6.x, installed a new theme, made some css / jquery changes and tested it and everything was working great.
Now the problems started to appear after moving the website from the subdomain to the domain (eg: from dev.websitename.com to websitename.com). Now I occasionally receive 403 errors for basically everything (from a jquery file, to the whole page). After a few ctrl + f5's everything works fine (but I cannot keep telling a customer to hit ctrl + f5 until the website works :| )
I tried everything I could think of. I checked and double checked the permissions on files / directories (since that's what 403 is basically telling me) and I cannot find the problem.
My hair is starting to fall because of how much inconvenience this is.
Can someone help me? Or at least point me to the right direction?
Thanks in advance!
So for anyone that is interested, the solution was to increase the number of requests per page and then everything worked! Hope it helped anyone interested.
Have a good day!