How to open Vite dev server on your mobile

Introduction

Developing web applications that work seamlessly across multiple devices is a critical aspect of modern web development. As a developer, you may often need to test your web application on different devices and screen sizes to ensure its compatibility and responsiveness. However, manually testing your web application on various devices can be time-consuming and tedious.

Fortunately, there are tools and techniques available that can help you streamline this process. One such technique is to open your Vite development server on your mobile device, which can allow you to test your web application on your smartphone or tablet quickly and easily. This article will guide you through the steps to open your Vite development server on your mobile device so that you can test your web application on the go.

Get your computer and mobile device on the same network

To open your Vite dev server on your mobile device, your computer and mobile device need to be on the same network. This can be a Wi-Fi network or a wired network. Make sure both devices are connected to the same network before proceeding further.

Get your computer's IP address

Next, you need to get your computer's IP address.

On Windows, open your powershell and type the following command

   ipconfig | findstr IPv4

On Mac, open your terminal and type the following command

   ipconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}'

On Linux, open your terminal and type the following command

   hostname -I | awk '{print $1}'

Look for the line that starts with "IPv4 Address" and note the IP address.

Start the Vite dev server with --host option

By default, the Vite dev server binds to localhost only, which means it can't be accessed from other devices on the network. To allow access from other devices, you need to start the server with the --host option and specify your computer's IP address.

Open package.json for your project and go to scripts key.In scripts change "dev" : "vite" to "dev" : "vite --host".

After making necessary changes your scripts key should be similar to this 👇

NOTE
If you just want to open vite dev server on your mobile for this one time you can use the following command

    npm run dev -- --host

Access the Vite dev server on your mobile device

Now that the Vite dev server is running with the --host option, you can access it on your mobile device. Open the browser on your mobile device and type in the URL:

   http://<YOUR_COMPUTER'S_IP>:<YOUR_DEV_SERVER_PORT_NUMBER>

Replace YOUR_COMPUTER'S_IP with IPv4 address which you noted in step 2.

Replace YOUR_DEV_SERVER_PORT_NUMBER with the port number which you defined in your vite config file. In case if you haven't explicitly defined the port number it defaults to 5173.

Bonus Tip
Vite displays the url which you need in the terminal itself.

You should now see the same Vite dev server running on your mobile device. You can interact with it just like you would on your computer.

Conclusion

Opening your Vite dev server on your mobile device is a quick and easy way to test your application on different devices and screen sizes. By following the steps outlined in this blog post, you can easily access your Vite dev server on your mobile device and test your application on the go.

Hope you find this post useful !!
Want to know how to build navbar similar to Google's design. Click here to find out.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking