How to access your site in mobile phone during development

Common steps to follow

1. Connect your mobile device and laptop to the same wifi network
2. Go to windows defender firewall and select advance setting, create a new inbound rules
3. Click on port, select TCP protocol and specify the port number on which your localhost website is running.
4. click allow the connection and checked private and public box
5. set any name for the shared server. eg:- local testing and click OK
6. Go to firewall and network protection and turn off the public microsoft defender firewall.
7. Go to your mobile device browser and type the shared ip address followed by the port number and sometimes the name of the html file. eg:- http:192.168.1.97:3000/index.html
8. If you serving plain html file than you are good to go.

🚀Serving react app in mobile device for testing

• you should follow the common steps mentioned above as it is
• open the terminal and enter cmd - npm start --host shared ip-address eg:- if shared wifi ip address is 192.168.1.97 than cmd - npm start --host 192.168.1.97

🚀Serving vite+react app in mobile device for testing

• Follow the common steps mentioned above
• open the package.json file and change the dev script from "vite" to "vite --host"
• enter cmd: npm run dev in the terminal and hit enter, you will find the network where the app is served