expo proxy config, web api call

Question

I am doing an API call within react native like this:

let response = await fetch('localhost:5000/api/klant/1');

And i want to do

let response = await fetch('/api/klant/1');

With react native it is possible to set a proxy conf at package.json. I was wondering if this is also possible with an detached expo app.

example of package.json

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "eject": "expo eject" }, "dependencies": { "expo": "^32.0.0", "expokit": "^32.0.7", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", "react-redux": "^6.0.1", "redux": "^4.0.1" }, "devDependencies": { "babel-preset-expo": "^5.0.0" }, "proxy": "localhost:5000", "private": true }

Thanks in advance!

Answer 1

The web service of expo is based on webpack and expo provides a way to customize the webpack config: https://docs.expo.dev/guides/customizing-webpack

In you example, you can create the webpack.config.js like the document says. Then set the proxy:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.devServer = {
    proxy: {
      '/api': 'http://127.0.0.1:5000'
    }
  }

  return config;
};

It will poxy any request to /api/**/* to 5000 port.