I have a Vue app that uses Vue router. Now I'm supposed to make a website for a client where one part is "secret" and can only be accessed through a direct link.
In other words, I want users to be able to navigate to myamplifyapp.com/mysecretpage just by entering this in the address bar.
I heard this works with Vue router history mode, set it up locally (apache) and everything is working well, but when I'm deploying it on Amplify, I can't access this page directly through a link, instead it just goes to index.html. Is there any way I can configure Amplify to make this work?
You can add a redirect to point users to index.html.
Something like this should work:
/<*> /index.html 200.
You'll probably want js/css files to not be redirected. For that you can try the reg exp from the link.
Related
I am developing a simple app using Django REST framework for the backend and with a Vue multi-page app as a front end. I use axios to make requests to Django from the javascript.
Locally, everything works well. All the pages work and login functionality works fine. For authentication, I am using Django's built in authentication and a store in Vuex.
However, once I started to deploy, it seems to break. To deploy, I initially decided to use ngrok to create an https tunnel to the backend. My frontend is still on localhost, but as soon as I change the url to use the new API, the login functionality stops working. The rest of the site (which does not require login) works fine, but the bits that do just don't work. When I click the login button, Vue tries to redirect me to the logged in 'dashboard' page, but then it identifies that I am not logged in and kicks me out.
The actual login process works and the server responds that I am logged in, but when the site checks again it responds that I am not logged in. There are no errors at any point.
I am happy to share any code that may help identify my issues, but I am not sure what to share at this point since I am not getting any errors!
On a Django 1.9 project I need to redirect:
https://example.com/app/
to
https://examplebucket.s3.amazonaws.com/app/index.html
But I need https://examplce.com/app/ to be still visible on the browser address bar...
I know this must be possible in theory with Django because the previous team working on this project did a setup to serve the /static/ media files from an S3 bucket. And if I access those static files via https://example.com/static/app/index.html, they are served from the S3 bucket but the browser address bar still shows the original url I input.
I'm deploying an Ionic Browser project and I want the files (including the index) to be served from the S3 but the url needs to be user friendly, thats the reason.
The old (dirty) way of doing this is frame-based forwarding.
You set up an iframe on a page in /app/ which points at the real app, letting the url stay the same.
It's not considered a good practice because of security issues (can't be sure where you are typing credentials into), and bookmarking issues (url is always the same so can't bookmark inner pages).
Another alternative is to set up a proxy script that just takes the url, turns that into the equivalent aws url, downloads it and then returns it. This would break the benefits of your cloud hosting if it has multiple regions... it would always be passed through the bottleneck of your server.
I am developing a django site that ,on my development environment, is accessed by the url localhost:8000.
The url is automatically redirect to the url localhost:8000/accounts/login and, after login, to localhost:8000/iform/list.
After deployed on my webserver, the app now is called icontrol, so, on the configuration panel of my provider, I set it to respond to the url www.mydomain.com/icontrol.
When using the same files for development and deploy, after the login, instead redirect to www.mydomain.com/icontrol/iform/list, for example, its trying to redirecting to to www.mydomain.com/iform/list.
How to make it work correctly on both environments?
There are a few ways it can be done. The easiest, and most correct way for what you are doing, is to use the LOGIN_REDIRECT_URL setting.
LOGIN_REDIRECT_URL = '/icontrol/iform/list'
If you want more fine control over it, you can probably override the get_success_url like they have done here.
Since you seem to want to use a static URL, I would suggest the first way though.
I am using the ember quick-start tutorial app. Everything works great locally, but when deployed to a test environment the app is 404ing on loading all resources.
I am deployed to a subfolder out somewhere and apparently ember is trying to find it against the root domain, instead of subfolder
Example:
http://example.com/embertest/index.html
The assets folder is obviously under http://example.com/embertest/assets/, but on load it's trying to grab it from http://example.com/assets/ which doesn't exist
How can I have ember use relative paths in this case?
Update 1
After some googling I tried editing the environment.js ENV.baseURL attribute
In the if(environment === 'production') block I added ENV.baseURL = '/website/dist/';, obviously I am building with ember build --env production
I am getting same 404s when going directly to a route but now also getting an error on index.html, Uncaught UnrecognizedURLError: /index.html
I tried every combination of '/website/dist/', 'website/dist/', '/website/dist' as well
Update 2
I have now also tried manually editing the <base href="/website/dist/"> in my index.html after a prod build. Same errors as from update 1
You need to understand that you can't just put an ember application to a normal webserver folder. Ember uses the history API to change the URL when you do a route change but it can't control what your web server deploys when its directly fetched.
So you have your ember index.html on http://example.com/app/index.html your web server usually will only deploy this file when you open http://example.com/app/ or http://example.com/app/index.html. But for a route foo your url is http://example.com/app/foo and your web server is looking for a directly foo that does not exist. So you have to configure your web server so its always responding with your index.html if your not requesting another existing resource (like an image, js or css file)!
How to do this depends completely on your webserver.
You must also notice that you should enter your assets in a full root relative path and specify rootURL so your router knows which part of the URL is your path and where your routing begins.
You should not use baseURL because its an upcoming deprecation!
You really should read this really new blog post!
Use ENV.locationType = 'hash' to prevent the usage of the history API is still always an option, but definitly an ugly one.
Okay so I solved this by changing ENV.locationType = 'hash' in environment.js
Would still love an explanation of what's going on as this feels a little bit hacky...
I have a simple app developed using Ember. It is more of a pet project than anything else. As I am familiar with Jetty, so I just deployed it into Jetty's webapps/ROOT. The problem is, I have to start the app with the root url: http://localhost:8080/. If I enter something like http://localhost:8080/foobar in browser's address bar, I will get a 404. But I can go to that page by clicking some link in the root page.
To my understanding, the reason why directly entering the non-root foobar url not working is that Jetty is trying to locate the foobar resource. Since the foobar resource is only resolvable inside the Ember app, Jetty can't find it and hence it fails to enter non-root url directly. However, my question is, how can I make that directly entered url work? If it can not be done or not easily be done with Jetty, I am open to use another http server.