skip to Main Content

I want to see my react app on my phone whcich is running on localhost:3000, is there any way i can run the app on my phone…?
I am using vite to initiate the app.

I tried connecting with same network and run it on my phone.

2

Answers


  1. You can run your React app on your phone within the same network. To achieve this, you must ensure your development server is accessible from devices on the same network. Here’s how you can do it:

    Check Your IP Address:

    Find your computer’s IP address on the local network. You can usually find this information in your system network settings.
    On Unix-like systems, you can use the ifconfig or ip addr command in the terminal to find your IP address.
    On Windows, you can use the ipconfig command in the Command Prompt.

    Update Vite Configuration:

    Open your Vite configuration file, usually named vite.config.js.
    Find the server section and update the host option to ‘0.0.0.0’:

    export default {
      server: {
        host: '0.0.0.0',
      },
    };
    

    Run Vite:

    Restart your Vite development server.

    Access from Phone:

    On your phone, connect to the same Wi-Fi network.
    Open a web browser on your phone.
    Enter the IP address of your computer and the port number where your Vite server is running—for example, http://your-computer-ip:3000.
    Your React app should now be accessible on your phone. Remember that some firewalls or security settings on your computer might block external access. If you encounter any issues, ensure your firewall allows incoming connections to the specified port.

    Login or Signup to reply.
  2. Firstly, you need to expose the react app to your network as shown below.

    To run your react app on mobile you need to know your IP address. (Assuming you are on the same network).
    To know your devices IP address use ifconfig or ip addr for linux
    and ipconfig for windows

    Now in your phone enter the IP address in web browser along with the port on which react app is running.

    http://yourIPaddress:port

    Example
    http://192.168.XX.XX:3000

    In the package.json file under scripts add –host as shown below

    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview"
    }
    
    

    This is will expose the react app to your network and you can connect to it.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search