Score:0

Supabase and Ionic App over Nginx and Ngrok

pk flag

Background

I want to set up a local Ionic and Supabase environment to test third party integrations such as payment providers using Supabase Edge Functions. I noticed 1 ngrok tunnel wouldn't suffice, because i need both a redirect url and webhook url to test the payment integration.

My thought was that i would like to spin up an ngrok tunnel and an nginx load balancer to redirect to my Ionic App and my Supabase local stack. So i can also use it for other projects with this technique

Current state

  • I have nginx running in docker that is configured to listen on 8080 on my host, and internally on 80.

  • I have an ngrok tunnel that I can access over my_tunnel_domain.com that forwards to localhost:8080

  • Ionic App is working on localhost:8100

  • Supabase Studio is working on localhost:54323

  • Supabase API is working on localhost:54321

nginx.conf

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;

    server {
        listen 80 default_server;
        server_name my_tunnel_domain.com;
        root /usr/share/nginx/html;

        location /app {
            proxy_pass http://host.docker.internal:8100;
        }

        location /supabase {
            proxy_pass http://host.docker.internal:54323;
        }
    }
}

/usr/share/nginx/html/index.html is a simple landing page with buttons to go to either the Ionic App or to Supabase Studio

Issue

  1. The redirects work. But the Ionic app is unable to load JS files because it is loading from the base domain.

Loading failed for the <script> with source “https://my_tunnel_domain.com/static/js/bundle.js”.

It actually should load from https://my_tunnel_domain.com/app/static/js/bundle.js

  1. The redirect to Supabase Studio is not working either, it just returns a 404..

I tried:

absolute_redirect off;

Link. Result is the same, no loading of js

return 301 " /app";

Link. Result is dial tcp 127.0.0.1:8080: connect: connection refused

add_header Location "/app";
content_by_lua 'ngx.exit(301)';

Link. Result is dial tcp 127.0.0.1:8080: connect: connection refused

try_files $uri $uri/app

Link. Result is dial tcp 127.0.0.1:8080: connect: connection refused

Questions

  1. Is this even possible?
  2. What is a good setup for this?

Thanks in advance for any help.

I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.