The latest articles on DEV Community by raikiran07 (@raikiran07). https://dev.to/raikiran07 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F693706%2Fa51ab667-5a88-49c5-a39a-9c154802e40c.png https://dev.to/raikiran07 en raikiran07 Wed, 01 Nov 2023 21:53:16 +0000 https://dev.to/raikiran07/how-to-access-your-site-in-mobile-phone-during-development-2m92 https://dev.to/raikiran07/how-to-access-your-site-in-mobile-phone-during-development-2m92 <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KeU_E5nj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r3v1cmc1hfdn6lcxsos.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KeU_E5nj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r3v1cmc1hfdn6lcxsos.jpg" alt="how to access localhost in mobile devices during development" width="686" height="386"></a></p> <h2> Common steps to follow </h2> <p><em><ol> <li>Connect your mobile device and laptop to the same wifi network</li> <li>Go to windows defender firewall and select advance setting, create a new inbound rules</li> <li>Click on port, select TCP protocol and specify the port number on which your localhost website is running.</li> <li>click allow the connection and checked private and public box</li> <li>set any name for the shared server. eg:- local testing and click OK</li> <li>Go to firewall and network protection and turn off the public microsoft defender firewall.</li> <li>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</li> <li>If you serving plain html file than you are good to go.</li> </ol></em></p> <h2> 🚀Serving react app in mobile device for testing </h2> <p><em><ul> <li>you should follow the common steps mentioned above as it is</li> <li>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</li> </ul></em></p> <h2> 🚀Serving vite+react app in mobile device for testing </h2> <p><em><ul> <li>Follow the common steps mentioned above</li> <li>open the package.json file and change the dev script from "vite" to "vite --host"</li> <li>enter cmd: npm run dev in the terminal and hit enter, you will find the network where the app is served</li> </ul></em></p> webdev testing design localhost