Demo: Expose Remix app to local network (wifi) for mobile testing or sharing app with friends

[cliffordfajardo]

There is also a Discord thread about this discussion here in the Remix Discord Server

Background Context

During local development of my remix app, I wanted a way to expose my web app locally on my wifi network so I could load the app on my smartphone, tablet or even let other people connected to my wifi view the app.

Solution

NOTE: this solution works for Remix apps built with the express template

1. Install the npm package called address
2. In your server.js file, inside the listen callback of your express server, call address.ip() to obtain the local IP of your computer

...
import address from "address";
....

app.listen(port,  async () => {
    console.log(`Express server listening on port http://localhost:${port}`); 
    console.log(`Shareable LAN URL: http://${address.ip()}:${port}`); ✅ <-------

  if (process.env.NODE_ENV === "development") {
    broadcastDevReady(build);
  }
});

The cool thing about this is that hot reload and live updates still work with both URLs.
So if you're making updates on your app, your other devices viewing the app via the LAN url will get those updates too

References

• Remix Discord Server Thread

[cliffordfajardo]

Another Remix user in the discord also offered another alternative solution

I'm a big fan of https://tailscale.com/ for this, basically just log in on both your phone and laptop (can log in with Github if you want) and it'll give you a private IP to connect to either device - Jacob Paris

[Loukazou]

Anyway to get the hot reload and live updates with the default remix server? I keep getting WebSocket connection to 'ws://localhost:3001/socket' failed: on the console. I might be wrong but it seems to be hardcoded with localhost, I have no idea how to assign the IP address.

[ryeact-dev]

I am also getting that error. I am using remix 2.3.0 with the remix-javascript template

[cliffordfajardo]

Are you using remix with the older compiler or using vite?

I highly recommend you create a new remix app via CLI and create a small miniminal reproducible example and share it in GitHub so me or another person can try out what you are attempting 🙏

@ryeact-dev & @Loukazou
What CLI command or template from this folder are you using?

example remix CLI command:

# create an app
npx create-remix@latest

# minimal server using vite
npx create-remix@latest --template remix-run/remix/templates/unstable-vite

# custom Express server using vite
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

Remix templates:
https://github.com/remix-run/remix/tree/main/templates

[ryeact-dev]

I am using npx create-remix@latest --template remix-run/remix/templates/remix-javascript. because the express template is using tsx. I want to use javascript.

[Nahasean94]

@Loukazou , did you get any solution for this?
On the development laptop everything is okay, but when I connect to this laptop from another laptop using the local IP address, I get the error you were asking about

[Nahasean94]

What ended up working for me is not to use localhost:port in my remix code when trying to connect to the backend socket.io server, rather use my laptop's ip address, e.g const socket=io('http://192.168.XXX.XXX:port')

[ryeact-dev]

I highly recommend you create a new remix app via CLI and create a small miniminal reproducible example and share it in GitHub so me or another person can try out what you are attempting 🙏

-- I will upload the files after doing the tutorials. haha. but thank you so much for the given feedback you gave.

[iwan-uschka]

For anybody using Vite please have a look at https://vitejs.dev/config/server-options. You can add server.host=true to your vite.config.ts like so:

import { vitePlugin as remix } from '@remix-run/dev';
import { installGlobals } from '@remix-run/node';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

installGlobals();

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  server: {
    host: true
  }
});

https://vitejs.dev/config/ can help if you need to customize the configuration depending on enviroments.
HMR works out of the box.