Ngrok and webhooks - express

I got a problem on my app, and i'm newbie on this tehcnology ...
I have an express app on a heroku url (https://my-website.heroku.com)
I've also this project on a localhost. I want to use the prismic webhook to do some stuff when a document is published.
I try to use ngrok to:
connect it to the heroku website
detect when my /webhook route is called on the heroku app to dispatch it on my localhost server (which is the same project, but I don't know how to do this with ngrok (I used some commands but nothing happen :/ )
Can you help me please ? Thank you !

I might be misunderstanding your use case, but it sounds like what you're wanting to do is handle or detect an incoming request to your heroku app and then proxy or forward that request to your localhost.
One way to handle this would be to -- in response to the original event or request -- then make a second request like a POST request to the Ngrok URL linked to your localhost machine from your heroku app. Ngrok itself is not a real proxy server, it just links two instances of URL/DOMAIN:PORT to each other where one of these runs in the Ngrok cloud service.
So in the code you have handling or receiving the webhook request on the heroku app, you could there make, say, a POST request to the Ngrok URL for your localhost and that request would be forwarded to your localhost machine. I'm not sure what data or information you want to see in localhost but you could pass along any incoming request data in the POST body to your localhost Ngrok URL and then see the same data locally.

Related

frontend cloud run app can not access my backend cloud run app due a MixedContent problem

I have two cloud services up and running.
frontend (URL: https://frontend-abc-ez.a.run.app/)
backend (URL: http://backend-abc-ez.a.run.app/)
Frontend is calling the backend through a nuxt.js server middleware proxy to dodge the CORS problematics.
The call is coming through - I can see that in the backend log files. However the response is not really coming back through because of CORS. I see this error in the console:
Mixed Content: The page at 'https://frontend-abc-ez.a.run.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://backend-abc-ez.a.run.app/login'. This request has been blocked; the content must be served over HTTPS.
What I find weird is that I configured the backend url with https but it is enforced as http - at least that is what the error is telling me. Also I see a /login path segment in the unsecure URL. Why is that? I never explicitly defined that endpoint. Is it the security layer proxy of the run service itself?
Anyway - I need to get through this properly and am having a hard time to understand the source of the problem.
For some reason as I rechecked the applications today in the morning everything went fine. I have really no idea why it is working now. I did not change a thing - I waited for the answers here before I'd continue.
Very weird. But the solution so far seems to be waiting. Maybe Cloud Run had some troubles.

Express Gateway: 'warn: unable to verify the first certificate' Express.js

I'm brand new to Express Gateway and I'm trying to set up a basic API Gateway to link up some micro services. When I try and proxy to a specific end point https://my-service.net/status (not the real URL), I get this error
[EG:policy] warn: unable to verify the first certificate
I can access the URL 'https://my-service.net/status' in the browser just fine.
When I switch out the serviceEndPoint URL it works fine (e.g. to https://httpbin.org), so it seems like there's something different with my URL in terms of the SSL/authentication config.
Any ideas? Many thanks.
My gateway.config.yml -->
So the SSL setup allows me to access the page from a browser (Chrome), but at the command line (e.g. through my Express Gateway which is served by NPM and running locally on port 8080) it fails.

Ngrok How can I forward to a specific URL?

I have a web app thats running on local. I try to use ngrok for webhooks but ngrok open the whole app to the world.(I dont want to use ngrok -auth because of some reasons.)
I want to ngrok forwards just for webhooks. For example:
Forwarding http://xxxxx.ngrok.io -> localhost:80/webhook
Is that possible for ngrok?
Or Can I re-forward ngrok request in apache? I mean;
Ngrok forwards to localhost:80 and apache detect request coming from ngrok and re-forward to localhost:80/webhook.
If you want requests to be forwarded to localhost:80/webhook, then wherever you are specifying the call-back for your service, set it as http://xxxxx.ngrok.io/webhook.
You can use https://webhookrelay.com and specify the endpoint where you want your webhook to be delivered by appending to this URL:
relay forward --bucket my-app http://localhost:80/webhook
This way your app will not be exposed to the world. Webhook Relay has two modes:
forward where it only opens one-way tunnel (nobody can get responses from your app so it's a safe way to deliver webhooks)
connect where it creates a bidirectional tunnel which is very similar to what ngrok does. It does, however, add a bit more on top of it like let's encrypt certs, basic/token auth and on-the-fly content minification.

Different ports for frontend and backend. How to make a request?

Using Angular-CLI as a frontend. 4200 port
Using Express as a backend. 8080 port
Directories look like:
Application
- backend
- ...Express architecture
- frontend
-...Angular2 architecture
So I'm running two projects, two commanders, one for frontent, second one for backend. node app.js for backend (8080), ng serve for frontent (4200).
Let's assume that I have a layer in backend which returns some string.
app.get('/hello', function(req, res) {
res.send("Hello!");
}
How can I make a request from frontend to backend and get that string? I don't want to know how exactly should I use Angular2 because that's not the point. I'm asking, what technology should I use to be able connect these two (frontent and backend) sides on different ports. If I just run them and make a request from frontend, I'll get an error because it can't find /hello url.
Your request to /hello means an absolute path inside the application running the angular application, so the request goes to http://localhost:4200/hello. Your angular application just doesn't know about the express application you want to target.
absolute urls
If you want to access the hello route on the other (express) application, you need to explicitly specify this by referencing http://localhost:8080/hello.
cors
Doing it this way, the correct application is targeted, but you will likely run into CORS issues, because the browser will prevent the javascript code obtained from localhost:4200 to access a server at localhost:8080. This is a security feature of your browser. So if you want to allow the code at 4200 to access the backend at 8080 your backend can whitelist this so called origin. For details see http://enable-cors.org/ and a corresponding express middleware you could use to support cors in your backend (https://www.npmjs.com/package/cors).
Using this approach has two downsides in my opinion. First, you need a way to tell your frontend under which absolute url it can reach the backend. This must be configurable because you need different urls for dev, staging and production. You then also need a way to manage all your whitelisted urls because the frontend in production will have a different url than when running the frontend in development. This can get pretty cumbersome to handle.
proxying your backend
A better approach in my opinion is to handle this in your infrastructure by proxying the backend in your frontend application. With proxying you basically tell your frontend server that all requests to some url should be passed through to another application. In your case this could probably mean, that for example you configure a proxy for the path /api/ to proxy the application on localhost:8080. The server then doesn't try to find a url like /api/hello on your frontend application but forwards your request to localhost:8080/hello. In your angular application you then don't need to care about the url of your backend and you can then always do a request to a url like /api/some-express-route.
For this to work you need to configure your angular dev server to proxy the requests. For details on how to do this, please see the docs at https://angular.io/guide/build#proxying-to-a-backend-server. When going to production, you can do this by configuring your web server, e.g. nginx to proxy the requests.

Invalid URL for Subscription API: Instagram

I'm attempting to test a real-time Instagram stream using the Subscription API, but am having trouble setting up subscriptions for local testing.
I attempted using localhost:8080 for the callback_url and editing my /etc/hosts file (redirecting localhost to local.machine.com)
Eventually, I was able to set up a subscription to my home's IP address to receive callbacks from Instagram.
The IP address was in the form:
xxx.xxx.xxx.xx:8080
However, this morning, I was trying from a different IP address in the form xxx.xxx.x.xx:8080 which has continuously led to Instagram returning 400: Bad Request: Invalid URL
Does anybody have any insight as to what Instagram treats as a valid URL parameter for subscriptions?
I would recommend ngrok for this.
It allows you to set up a tunnel between your local machine and the internet.
With ngrok you can on the command line do like this:
ngrok http 8080
That will give you a url like this: http://something.ngrok.io. In your terminal window you can also inspect all traffic through this tunnel.