How do I create separate desktop and mobile web builds?

[markstreich]

Hi,

I have a mobile website that is significantly different than the desktop version. Creating separate/independent builds for the two versions would greatly reduce bundle size (with the intention of determining which one to serve in the backend).

I would love to be able to make the mobile website integrated as just another react native platform, for example with Platform-specific extensions: Button.tsx / Button.mobile-web.tsx, and the Platform module: Platform.OS === 'mobile-web'

Any suggestions on how I could cleanly extend the Platform specific code like this? https://reactnative.dev/docs/platform-specific-code

I'm using expo web.

Thanks!

[markstreich]

Posting the solution I came up with, in case anyone finds it useful, or has a better idea. I'm a webpack newb so this took me a lot of trial and error.

This allows me to have a file like Button.mobile.web.tsx that for the mobile build, works like RN platform extensions, and gets priority over Button.web.tsx / Button.tsx. It also allows running the two dev builds concurrently

webpack.config.js

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

const babelOptions = {
  presets: ['babel-preset-expo'],
};

module.exports = async (env, argv) => {
  if (!process.env.WEB_PLATFORM) {
    throw new Error('Missing WEB_PLATFORM env ("desktop" or "mobile")');
  }

  const config = await createExpoWebpackConfigAsync(env, argv);

  return {
    ...config,
    output: {
      ...config.output,
      publicPath: '/',
      path: `${config.output.path}${`/${process.env.WEB_PLATFORM}`}`,
      filename: 'static/js/app.js',
    },
    devServer: {
      ...config.devServer,
      ...{ ...(process.env.WEB_PLATFORM === 'mobile' && { port: 34532, sockPort: 34533 }) },
    },
    resolve: {
      ...config.resolve,
      extensions: [
        `.${process.env.WEB_PLATFORM}.web.tsx`,
        `.${process.env.WEB_PLATFORM}.web.ts`,
        ...config.resolve.extensions,
      ],
    },
  };
};

package.json scripts

{
    "build-desktop": "cross-env WEB_PLATFORM=desktop BUILD_ENV=production expo build:web",
    "build-mobile": "cross-env WEB_PLATFORM=mobile BUILD_ENV=production expo build:web",
    "desktop-web": "cross-env WEB_PLATFORM=desktop expo start --web",
    "mobile-web": "cross-env WEB_PORT=19007 WEB_PLATFORM=mobile expo start --web",
    "web": "concurrently \"npm run desktop-web\" \"sleep 10 && npm run mobile-web\""
}