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
Top comments (3)
If you have a connected backend, don't forget to change your VITE_BACKEND_URL in your env file or wherever the backend server url is defined from
to
This plugin makes it even easier to open the network url on mobile devices
github.com/svitejs/vite-plugin-qrcode
Great post!
Unfortunately, I had some problems establishing a connection between my phone and my dev-server due to some router policies over which I had no control. So I came up with an additional approach. Maybe it is helping others as well:
Accessing Your Vite Web Server on a Smartphone Using Wi-Fi Hotspot