Getting country from Geolocation IP

[carstensbix]

Hello,

I'm facing a challenge in my Shopify Hydrogen Remix app. I have a server-side file responsible for processing client requests and returning their country. I'm looking for guidance on the best practices to optimize both performance and code quality for this task.

Additionally, I'm encountering an issue when requiring these modules:

const requestIp = require('request-ip');
const geoip = require('fast-geoip');

I'm wondering if it would be advisable to create a dedicated route, such as "routes/country.ts," to handle this logic. Alternatively, should I include it in "server.ts" or "entry.server.ts"? My main concern is to avoid loading the entire geoip database into memory multiple times.

In my "root.tsx" file, which processes the initial request and determines the language for displaying content, I have the following code snippet:

export async function loader({ context, request }: LoaderArgs) {
  const { cart, session, storefront, sanity, env, i18n } = context;

  const country = await requestCountry(request);
  console.log({ country });

  // ... rest of the code
}

For retrieving the country from the request, I'm using the following component:

const requestIp = require('request-ip');
const geoip = require('fast-geoip');

const pickHeader = (name) => ({ headers = {} }) => headers[name];

const providers = [
  pickHeader('cf-ipcountry'), // Cloudflare
  pickHeader('x-vercel-ip-country'), // Vercel
  pickHeader('x-appengine-country'), // Google App Engine
];

const fromProvider = (req) => {
  let provider;
  providers.find((fromProvider) => (provider = fromProvider(req)));
  return provider;
};

const fromIpAddress = async (req) => {
  const ipAddress = req.ipAddress || req.ip || requestIp.getClientIp(req);

  if (ipAddress) {
    const geo = await geoip.lookup(ipAddress);
    if (geo) return geo.country;
  }
};

module.exports = async (req = {}) =>
  fromProvider(req) || (await fromIpAddress(req)) || null;

Your assistance in addressing these concerns would be greatly appreciated. Thank you!

[caha20]

I am interested in this aswell.

[juanpprieto]

@caha20 @carstensbix

If hosted in Oxygen, you can access the geo country and IP via the oxygen request headers. Here is a little utility that can help you extract these from a request

type OxygenEnv = {
  buyer: {
    readonly ip: string | undefined;
    readonly country: string | undefined;
    readonly continent: string | undefined;
    readonly city: string | undefined;
    readonly isEuCountry: boolean;
    readonly latitude: string | undefined;
    readonly longitude: string | undefined;
    readonly region: string | undefined;
    readonly regionCode: string | undefined;
    readonly timezone: string | undefined;
  };
  readonly shopId: string | undefined;
  readonly storefrontId: string | undefined;
  readonly deploymentId: string | undefined;
};

export function getOxygenEnv(request: Request): OxygenEnv {
  return Object.freeze({
    buyer: {
      ip: request.headers.get('oxygen-buyer-ip') ?? undefined,
      country: request.headers.get('oxygen-buyer-country') ?? undefined,
      continent: request.headers.get('oxygen-buyer-continent') ?? undefined,
      city: request.headers.get('oxygen-buyer-city') ?? undefined,
      isEuCountry: Boolean(request.headers.get('oxygen-buyer-is-eu-country')),
      latitude: request.headers.get('oxygen-buyer-latitude') ?? undefined,
      longitude: request.headers.get('oxygen-buyer-longitude') ?? undefined,
      region: request.headers.get('oxygen-buyer-region') ?? undefined,
      regionCode: request.headers.get('oxygen-buyer-region-code') ?? undefined,
      timezone: request.headers.get('oxygen-buyer-timezone') ?? undefined,
    },
    shopId: request.headers.get('oxygen-buyer-shop-id') ?? undefined,
    storefrontId:
      request.headers.get('oxygen-buyer-storefront-id') ?? undefined,
    deploymentId:
      request.headers.get('oxygen-buyer-deployment-id') ?? undefined,
  });
}

Then import and use it in server.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    executionContext: ExecutionContext,
  ): Promise<Response> {
 
   const oxygen = getOxygenEnv(request)
   // ... other code
   
   const handleRequest = createRequestHandler({
     build: remixBuild,
     mode: process.env.NODE_ENV,
     getLoadContext: () => ({
       cart,
       env,
       oxygen,
       session,
       storefront,
     }),
   });

   // ... other code
  }
}

Finally access oxygen in any loader or action via context.oxygen

[blittle]

@carstensbix If you are deploying off oxygen, getting the IP depends on the platform you deploy to.

[carstensbix]

Thank you!