I have been working on a chrome extension using vue 3, vue-router and vue-x.
The extension is a Single Page Application, so if I understand correctly, it means that all incoming traffic should go through a root page and then vue-router handles the rendering while giving the user the impression that he changed page when in reality, he did not.
According to this part of vue-router documentation, you normally need something server side to make sure your root page is always served (nginx, apache, etc).
I need to reproduce this behaviour for my chrome-extension, and I have tried playing with the manifest.json but without any success so far. When I try to access to my other page, I have a File not found error. If I was to create an other-page.html, it renders but it wouldn't be a SPA anymore. I could try to put some hacky JS inside this other page but I was wondering if there was any more elegant way to handle this.
tl;dr: How to allow direct access from browser to a page contained in a SPA on a chrome extension.
Related
A web page redirects to a Vue app. This Vue app has several pages and it uses Vue-router. Upon initialization of the Vue app we run some logic which is based on the referrer.
Then the user navigates between the pages of the Vue app and at some point decides to refresh the page. In this case the referrer is still the previous page (Why?) - thus the logic based on the referrer executes again. And this is problematic and shouldn't happen.
So - how can I get rid of this referrer after the SPA loads? Or eventually when user navigates inside the SPA?
PS: This happens on Chrome and Safari and doesn't on Firefox. At least on my machine.
There is a bunch of tricks to modify referrer (How to manually set REFERER header in Javascript?)
However all of them are far from perfect. That's because referrer is one of forbidden headers, which intentionally can't be modified programmatically (https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name)
In your case, the only idea I can think about is to put some key into localStorage or sessionStorage when you run your referer-related logic for the first time, and then prevent it from running again if this key is already stored.
I have implemented RECAPCHA on my login page using this tutorial and it works great. It makes use of the AspNetCore.ReCaptcha package.
The issue that I'm having is that the recaptcha needs a file named recaptcha__en.js that lives outside, in a Google repository.
I'm working in a VPN that I need to use to connect to my client network, and this VPN blocks the connection to this outside .js. To unblock it or add a specific rule in the VPN, is not an option right now, so I was wondering if there's any way to tell the recaptcha html .NET core component, to read the recaptcha__en.js from my own solution.
I tried to simply include the script in my page, but the component still fails. It insists on searching for the JS outside, even if it is included in the page. If there's a way, it isn't documented anywhere that I'm aware off.
Can you help?
I don't know if you can visit other websites in your VPN at all.
If you can access other sites, you can use reCAPTCHA globally. Using https://www.recaptcha.net/recaptcha/api.js will work fine in your internal network.
If you can't access any sites in your VPN, you can't use reCAPTCHA service in your project, because the Javascript content like https://www.google.com/recaptcha/api.js are not static functions in a file. It's an interactive Google service.
I'm trying to figure out a basic thing about Nuxt "Universal" mode with the help of my dev tools, but I am just not sure if I understand it correctly.
Every time I request a new route in the Universal Nuxt app it seems to send a 200 (OK) request to the Node server. Did I understand correctly that on every page request a new document gets requested and served up by the Node server?
Some people are claiming that even while running the Universal mode the Node server sends only one package and after that the navigation and subsequent pages are loaded on the client side, thus not hitting the Node server anymore, but this is not the case right, how could the search engine crawler index that?
Essentially on every new route instead, the page gets re-requested from the Node server in its pre-rendered form right? This is how the "Universal" mode is actually SEO friendly as the crawler can look through all the pages and index it correctly to Google or Bing?
I'm sorry as I'm just a beginner with Nuxt and I fully understand (I think) how SPA as well as the Nuxt Generate modes work but this Universal mode is still a mystery for me at this point.
I would be very thankful for any clarifications on this!!! It would be super valuable in my learning journey! Thanks!
It's important to understand different "kinds" of navigation.
If you are navigating to a route by typing it into browser's URL bar, browser is hitting server (and this has nothing to do with Nuxt specifically) and what you get back is HTML with HTML content of your route pre-rendered by Nuxt + js bundle. Same thing happens if you use F5 (reload).
If on the other hand you use <nuxt-link> inside of some Nuxt page pointing to a different route/page and you click it, underlying Vue router will be used to switch to a different page (Vue component), server is not requested (for HTML) and new component (page) will handle rendering client side only
There can be an Ajax request when navigating that way but request is not for server-side rendered HTML. It's for additional JS content. Its because Nuxt is using automatic code-splitting (so when you hit the server 1st time, only JS needed for that route to work is loaded). Once the JS bundle for a specific route is loaded, it will not load again on subsequent navigation and unless your page/components inside are loading data from some API, you will not see any requests to a server during navigation....
I have this reactjs webapp - http://52.26.51.120/
It loads a single page and then you can click links to dynamically load other boards on the same page... such as 52.26.51.120/#/b, 52.26.51.120/#/g
Now the thing is, I want each of these to be an individual page, for the purpose of seo. I want you to be able to google "my-site.com g", and you will see the result 52.26.51.120/#/g. This obviously cant work if you are using reactjs and it is all on one page. Google will only render and cache that main page (can it even render that page? does google execute javascript?)
Even more specifically, id want something like my-site.com/g/1234 to load a thread. There could be a thousand threads every day, so im not sure how to handle that.
Are there any solutions to this? to allow react to possibly serve up static pages as html so that they can be cached on google? I am using expressjs and webpack as my server right now, and all the code is executed in jsx files.
Thanks
You can use Prerender.io service. In a nutshell you will need to connect your server app or web server with prerender service and do little setup (see documentation). After that search engines and crawlers will be served with a static (prerendered) content while users will get classic React.js (or any other single page) app.
There is a hosted service with free tier or open source version
I suspect you could do some smart configuration with nginx and it could convert a url of domain/board to a redirection of domain/#/board when detecting the user-agent as a bot instead of a typical user.
we have built UI using react js framework and html +css + js code is deployed inside apache 2. When I browse website it works fine but if I refresh page then I get 404. Can someone tell me how can I fix it.
Perhaps this answer is relevant to you:
Apache web server doesn't allow me to refresh on /about but on localhost its working fine
I know I also had problems related to HTML5 mode when first setting up react-router.
If you are using React-Router you are probably having this problem: React-router urls don't work when refreshing or writting manually.
You can also see the React Router tutorial for how to set up a production Express server.