Next js and google analytics not working behind nginx reverse proxy - nginx

I run my website on a server that reverse proxies all requests to a nextjs server and google analytics does not work behind this proxy. I followed this implementation and everything works as intended when I run it on my own machine. The only reason that I can think that this doesn't work is because of the reverse proxy. I would like to still be able to implement google analytics via nextjs instead of adding it to the nginx config so that its easier to maintain. How can I make nextjs able to call google analytics when behind a proxy?

After some simple debugging that I somehow forgot to do before hand I figured out the problem, or so I think. I had my G-Tag stored in an ENV var and I found out that you need to build and start the server with the ENV vars already set before running it. Previously I had, Built -> Added the ENV vars -> Started the server. This was NOT a problem with nginx or google analytics, or really even nextjs.

Related

How can I change what URL the ASP.NET SPA Proxy directs to once the proxy is online?

In Visual Studio 2022, in the Debug Options there is a way to change the URL that initially loads when you Debug a web application.
However, when using SPA in .net 6.0, the page that initially loads must be the base page, which waits for the SPA Proxy to be online, and then redirects to the SPA Proxy port to load your app when the proxy is ready.
What I'm wondering is if there's any way to set which page this will redirect to, similar to how before using a SPA proxy I could set the debug launch URL to be different from the base / page.
The bundler I am using is Vite, and I have tried using the vite server "open" option to select a URL to open when the server launches. Unfortunately since this is separate from asp.net's proxy logic, they both open. The whole point is I'm trying to avoid loading the base / page.
I have tried modifying the .csproj file so that the SpaProxyServerUrl doesn't just have a port but has a full url, aka from <SpaProxyServerUrl>https://localhost:44466</SpaProxyServerUrl> to <SpaProxyServerUrl>https://localhost:44466/Developer</SpaProxyServerUrl>, but when I do this the spa proxy doesn't launch at all, and the index.html file doesn't load (which is configured in Program.cs with app.MapFallbackToFile("index.html");
Is there a setting I'm missing somewhere? Or does anyone have any ideas on how I can accomplish this? Thank you.
In case anyone else is having the same problem in the future, I was able to get it to work. Strangely for some reason the spa proxy wouldn't let me load my base page (localhost:44366) and load the spa proxy and redirect to localhost:44466/Developer.
However, it worked when both sides were configured to use the same endpoint.
So I changed the debug launch settings to load localhost:44366/Developer and also changed the .csproj's SpaProxyServerUrl to localhost:44466/Developer and then it worked.
No clue why it's setup this way but this change worked for me with .net 6

nextJS api routes not working with Firebase Hosting

I am having an issue with using Next.js API routes when deploying my website to Firebase Hosting. Here is the api call:
And here is the set up in the pages directory:
Here is the function used in email.js:
I changed the variables as to not give away my email address.
The call works when I use local host. However, when I build and deploy to firebase. I have tried to use the firebase url to make the api call, but I get a 404 page not found. I am not sure how to fix this. I would really appreciate any help.
Firebase hosting only hosts static files which is why your api routes don't work there. If you had a fully static Next site, you could host it on Firebase hosting. But if you want to use the api routes in Next, you need a server. One way to do this (albeit complicated) is to set up Firebase Functions with your api code and then rewrite requests in Firebase Hosting to that Firebase Function. It's complicated because it would require a fairly complex deploy process.
If the rest of your site is static, you can use Firebase Hosting for that and then consider ditching the api routes and instead setting up a Firebase Function to act as your api completely separate from Next.
Or if you want to keep it all in Next, consider something like Vercel for your site + api via Next.

code-server (docker) and nuxt.js / javascript 404

Setup: I use a self-hosted code-server (dockerized) behind a fritzBox on my home lan. I have a FQDN (mysub.mydomain.com) pointing to a dyndns (mysdyn.my-router.com) with a cname entry which ends up on the fritzBox, port forwarded to the docker machine via a nginx reverse proxy with letsencrypt enabeld.
code-server works fine and is available via mysub.mydomain.com. With the live-server plugin works great#code-server and can be reached via mysub.mydomain.com/proxy/3000/ (3000 is an example port). Hot-reload and Javascript works.
Problem: working on a nuxt.js project (universal), when I run "yarn dev" the dev-server comes up normaly and the page can be reached via mysub.mydomain.com/proxy/3000/ and displays correct. But the "hot-reload" as well as all java scripts are not working because of a 404 for all .js-files.
The browser is looking for all .js-files under e.g. https://mysub.mydomain.com/_nuxt/runtime.js which correctly causes the 404, because coorect location would be https://mysub.mydomain.com/proxy/3000/_nuxt/runtime.js
What is causing this behavior and how can I fix this? I am even not sure where to start. Nginx or Nuxt? I already tried to play around with the router-setting in the config.nuxt.js - no luck.
thanks for your help!
So, mysub.mydomain.com/proxy/3000/ is a hosted website behind an Nginx configuration?
If it's the case, you can't use yarn dev. This command is aimed towards a local development server.
You can't have HMR running on a hosted production app through some DNS, reverse proxy, port forwarding and so on. Or at least, this is what this is aimed towards.
Even having hot reload via code-server is kinda not mainstream. So yeah, you could maybe try some hacky things and achieve it, but you'll still end-up experiencing quite some bugs and the performance will probably be sub-par.
You don't want to stick to some local running apps?

stripe testing working fine on localhost but not working on server , its not dedecting testing amount from card

I have been trying to integrate strip payment gateway system. Everything working perfectly fine on localhost. But when i uploaded to the server it does not work.
Are you running it in HTTPS?
Is the rest of your frontend/backend working properly communicating with eachother?
Are you getting any errors?
Stripe Forces HTTPS for all services using TLS (SSL).It is like their requirement that must be fulfilled. Please Have a look Here.
So in order to make it work on a server, SSL should be installed on that server to work with Stripe.js libraries. In addition, all pages should be served over HTTPS. Further readings.. Here

Redirecting a meteor app from naked domain to www with https (ssl) on

I am trying to redirect my meteor app (hosted by heroku) to www with https on. So:
https://exampledomain.com -> https://www.exampledomain.com
Is there a way to do this either in Heroku or the Meteor application itself? Thank you.
Meteor by itself cannot do redirects and does not support https.
Heroku is a hosting service, and will host whatever compatible application you give it, on top of it's Cedar stack, which is basically an Ubuntu OS. It does not even know that your app will be using http. So the Heroku environment will not help you either.
What you need to do is build an Heroku app consisting of your Meteor app and a HTTP Reverse Proxy in front of it, which handles the redirect you are asking for, and also the https. This proxy terminates the https connections coming from the Internet, and serves them as http to your Meteor app behind it.
The easiest proxy to set up is Nginx, although HAProxy also works well.
Have a look at for example Have you managed to make your node nginx proxy setup on Heroku work? for how to set this up.

Resources