i have angularjs app with html5mode enabled.
I have tried to run app in IE8 and it seems that URL is being prefixed with #! is it suppose to be - back button works etc..hashbang mode
I have tried to run app in modern browser and it seems that history api also work. All fine.
But if i hit http://localhost:3000/notes directly in address bar in both browsers i get routing error from webrick/rails app. I thought angular will take over of this request and handle it.
I have NOT setup anything on server side as angular guide say:
Using this mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html)
Is that why i am getting route error from webrick? And if i will able to setup rewriting rule how the hell it works? I thought if i rewrite something like http://localhost:3000/notes -> http://localhost:3000(index if u wish) the "/notes" - where i want to jump in is gone and angular app will never know where to route..
And if there is no way to tell webrick what and how to rewrite. How do you do in your development environment?
Thank you a lot.
You need to configure your server to return the same data for /notes as if it were the / route. Not a redirect (since that will remove notes). Basically you need a catchall route that returns if it doesn't match anything else. Either that or enumerate the known routes (i.e., /, /notes, /other, etc.), and have all of those return the same document. At that point, angular will detect the path and act accordingly.
Related
I use the latest recommended SPA + .Net Core-based Web APi pattern where the FE referenced to BE, FE serves proxy to BE during development, and app.UseDefaultFiles()serves index.html where the SPA resides during production. This pattern means no proxy middleware is required as it was in opposite direction when the BE serves FE as a proxy.
app.UseDefaultFiles(); <-- Here the site is loaded first time
app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("/index.html"); <-- Here the site is reloaded if URL typed(changed) manually
Client-side routing is the point. Specifically, I use Vue Router and IIS hosting. When the site is already opened, and a user types URL in the browser, it falls down to app.MapFallbackToFile("/index.html") and then Vue router handles the route.
The problem is that the site is always completely reloading when the URL is just changed (let say from mysite.com/a to mysite.com/b) in this scenario, as I would press F5. It's not always necessarily bad but I would like to control it.
The question is: how to get rid of app.MapFallbackToFile("/index.html") and somehow pass the captured URL to the SPA, as it would be naked SPA without backend which now stays in front of frontend.
If have tried Vue Spa with ASP.NET Core 6 minimal setup and it seems for me, that there is no way to achieve what you want.
When user enters or changes the URL address, the browser navigate away from the page and do a GET request to BE (Backend).
Here is the catch-all fallback route required, otherwise the user gets the 404 error from the web server.
I presume you use the HTML5 History Mode. Here is a part from the Vue Router Docs about this problem.
Since our app is a single page client side app, without a proper
server configuration, the users will get a 404 error if they access
https://example.com/user/id directly in their browser. Now that's
ugly.
Not to worry: To fix the issue, all you need to do is add a simple
catch-all fallback route to your server. If the URL doesn't match any
static assets, it should serve the same index.html page that your app
lives in. Beautiful, again!
If somebody yet knows the solution, please post a new answer.
It would be great to know how to do it!
What are the best practices (and how to go about doing it) to support offline mode when using html5 history api for url rewrites?
For example, (hypothetically) I have a PWA SPA application at https://abc.xyz which has internationalization built in. So when I visit this link, the Vue router (which ideally could be any framework - vue, react, angular etc.) redirect me to https://abc.xyz/en.
This works perfectly when I am online (ofcourse, the webserver is also handling this redirect so that app works even if you directly visit the said link).
However, its a different story when I am offline. The service worker caches all resources correctly so when I visit the URL https://abc.xyz everything loads up as expected. However, now if I manually type the URL to https://abc.xyz/en, the app fails to load up.
Any pointers on how to achieve this?
Link to same question in github: https://github.com/vuejs-templates/pwa/issues/188
Yes, this is possible quite trivially with Service Workers. All you have to do is to configure the navigateFallback property of sw-precache properly. It has to point to the cached asset you want the service worker to fetch if it encounters a cache miss.
In the template you posted, you should be good to go if you configure your SWPrecache Webpack Plugin as follows:
new SWPrecacheWebpackPlugin({
...
navigateFallback: '/index.html'
...
})
Again, it is absolutely mandatory that the thing you put inside navigateFallback is cached by the Service Worker already, otherwise this will fail silently.
You can verify if everything was configured correctly by checking two things in your webpack generated service-worker.js:
the precacheConfig Array contains ['/index.html', ...]
in the fetch interceptor of the service worker (at the bottom of the file), the variable navigateFallback is set to the value you configured
If your final App is hosted in a subdirectory, for example when hosting it on Github pages, you also have to configure the stripPrefix and replacePrefix Options correctly.
I'm having the SSL warning messages all over my website after switching to SSL for several assets:
Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure script 'http://example.com/script.js'. This
request has been blocked; the content must be served over HTTPS.
I checked the page source, every single script/css is requested over https.
I even checked the dynamically created html by using the code inspector.
I disabled Javascript in case a script was loading these assets dynamically.
None of these things showed a single http:// request. I'm out of ideas to try and find what is causing this. Any ideas or suggestions?
When seeing a mixed-content message about a http://example.com/script.js (non-https) URL that doesn’t actually appear anywhere in your sources, the basic strategy to follow is:
Replace the http in the URL with https and put that into the address bar in your browser: https://example.com/script.js
If your browser redirects from that https://example.com/script.js URL back to (non-https) http://example.com/script.js, then you’ve found the cause: example.com/script.js isn’t actually available from an https URL, and ends up getting served from a http URL even though your source is requesting the https URL.
My 2 cents regarding this issue.
I have a project hosted on one domain that works flawlessly.
I need to make it international so I am cloning the master branch to a new branch, making some necessary text changes and deploying new site (new domain) with code from the new branch.
Everything works fine, except 1 ajax call (api route) that gets blocked due to Mixed content.
First things first, I checked these 3 things:
I check in the Network tab in dev tools and it is actually loaded through https.
I open the file directly in browser and it is https.
I try to open it as http:// and it automatically redirects to https://
This is very strange because the 2 domains are both using Cloudflare and their backend setup is identical, the code is the same (only text changes for the new one) yet for the new setup there is console error for 1 specific api route, an all others (some 20+ ajax requests across the page) work just fine. They are even using the same function to make the Ajax request, so it is definitely not a configuration error.
After doing some investigation I found out the issue:
The call that was 'buggy' was ending in /. For example, all other calls were made to:
https://example.com/api/posts
https://example.com/api/users
And this particular one was making requests to
https://example.com/api/todos/
The slash at the end was making it fail with mixed content issue. I am not sure why this is causing issue and how it isn't an issue on the original site (since there the same ajax call works just fine), but it definitely fixed my issue.
If I figure out what caused the / to fail so miserably, I will post an update.
This probably has to do with not using rails or hosting in couchapp, but I'd like to solve this problem without involving another layer of code.
I'm writing an Ember app, and when I refresh the browser on any route except the index (home) route I get a 404. Getting to routes only works when it's done through Ember code, such as {{#linkTo}}s or transitionTos.
Apache version: Server version: Apache/2.2.22 (Ubuntu)
This sounds like an issue with one (or all) of your model hooks. Since everything after the # doesn't get sent back to the server, so any link-to or transition wouldn't make any difference,
server/cow is the same to the server as server/cow#/comments/3/posts.
Aka, you might have been passing models down to each nested resource lower using a link-to, but when it reloads that route, the param in the url is passed to the model hook to resolve the model.
As was pointed out below in the comments, if you aren't using the hash tag (aka using location:history or location:none) you need to use some form of url rewrite at the root of your ember application so your url. Be aware that if you choose one of those options you are limiting the functionality of your application to modern browsers (http://caniuse.com/history).
We have Apache on top of JBoss serving either web or mobile app.
We are currently using Apache mod-rewrite to decide where to forward the user to web or mobile (and mod-jk to mount to JBoss), based on regular expressions matching of user-agent, but that is imprecise and error prone.
We want to use a servlet or jsp on JBoss as part of deciding whether to serve the web or mobile app (the servlet checks the user-agent in WURFL to see if this is a mobile device or a web browser).
How can I make a rewrite-condition dependent on the result of a servlet/jsp ?
(I already thought about redirecting the jsp back to two possible URLs and continue the rewrite-rule logic from there, but this gets complicated with passing URL parameters back and forth)
One conceptually simple way is to use a program-type rewritemap to call your EE-based service to check a U-A, assuming the program couldn't just perform the check itself (if you've only got some canned java interface into that DB)