How to access your local graphQL server

The bottom line: If you develop any type of app that requires you to connect to a locally running graphQL (or any server really) from your phone/tablet/whatever other device then you have three choices:

1. Use something like ngrok, but you’ll need to pay for an account if you want to have a permanent IP address to connect to. You basically connect localhost to the ngrok address. Easy peasy.
2. Set up a proxy on your own server. I did it before and it’s quite a headache, but it works. Very much like ngrok. It’s cost affective if you already have a server and a domain you can use, otherwise it’s easier to just pay ngrok. Anyway, this article will not go into details on how to do it, but in a nutshell, you’ll need to reserve a subdomain on your server and serve using nginx/apache… just look it up. There are a few walkthroughs explaining this. It’s a bit of a headache
3. Serve from your own computer and expose. There are only a few steps needed to make this work and this article will explain exactly how to do it.

It was long overdue and I had to get a new mac to be able to build apps with xCode. my 10 year old macbook and best friend had to retire.

I got a new macbook pro runing Ventura. Ahhh I’m a big macbook fan. What can I say. It just feels so darn great to type on it. ANyway, concentrate Ben!

So let’s say you’re developing an app that needs to connect to any type of server to process data (CRUD), you will be using your own computer to run this server before deploying it to the cloud. In my case, I am using a graphQL running on express.

By default, your server will be running on localhost, so as long as you connect to the server directly from your computer, there’s no problem, but what if you’re developing an app that runs on a phone. You cannot connect to localhost because the phone has its own localhost and the server isn’t running there.

So we need to be able to connect to the server running on the computer via WiFi. There are a few simple steps required to make this “magic” work on Ventura:

Step 1: Serve your server

I had to serve my graphQL:

if (someConditionMeansYouAreRunnigLocally) {
  const serverHttp = http.createServer(app);

  const host = '0.0.0.0';
  const port = 5001; // Or whatever port works for you
  serverHttp.listen(port, host, () => {
   console.log(`Server is running on http://${host}:${port}`);
  });
}

And if you’re interested to see if implemented, it would look something like this:

import { ApolloServer } from "apollo-server-express";
import admin from "firebase-admin";
import express from "express";

import schema from "./schema";
import resolvers from "./resolvers";

import http from 'http';

import UsersAPI from "./datasources/users";

const serviceAccount = require("../../private/serviceAccount.json");
const databaseURL = "https://my-app.firebaseio.com";

const globalServerApp = admin.initializeApp(
  { credential: admin.credential.cert(serviceAccount), databaseURL },
  "server"
);
const globalDataSources = {
  usersAPI: new UsersAPI(globalServerApp),
};

const initServer = () => {
  const app = express();
  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    dataSources: () => {
      return globalDataSources;
    },
    uploads: false,
    // Enable graphiql gui
    introspection: true,
    playground: true,
    context: async ({ req }) => {
      return {
        request: req,
      };
    },
  });
  server.applyMiddleware({ app, path: "/", cors: true });
  
  if (process.env.HOME === "/Users/mememe") {
    const serverHttp = http.createServer(app);

    const host = '0.0.0.0';
    const port = 5001;
    serverHttp.listen(port, host, () => {
      console.log(`Server is running on http://${host}:${port}`);
    });
  }
  
  return app;
};

export default initServer;

Easy, right? So now as long as you are on localhost and that condition you added works, you should be able to serve your server. In my case Apollo, which btw I think I need to change soon…

So now, if you go to your graphQL, you should be able to see it on localhost or on 0.0.0.0

Step 2: Sharing is caring

On macOS Ventura, internet sharing is disabled by default.

Go to system settings > Wi-Fi and click on “details” to get the IP Address of your internet connection. Note it. We’ll use it soon.

Next in System Settings, go to General > Sharing and activate Internet Sharing. There’s really no need to check iPhone USB there if you plan to connect via WiFi.

And now, open a browser and go to your local IP Address noted above at port 5001 (or whatever port you used) and then your server slug. In my case: http://192.168.1.129:5001/my-app/us-central1/graphql

as long as you navigate to it with a device connected to the same WiFi as the computer, you should be able to connect to your server.

That’s it. Easy peasy.