DEV Community

Cover image for How to open Vite dev server on your mobile
Jyothikrishna
Jyothikrishna

Posted on • Edited on

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


Enter fullscreen mode Exit fullscreen mode

On Mac, open your terminal and type the following command



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


Enter fullscreen mode Exit fullscreen mode

On Linux, open your terminal and type the following command



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


Enter fullscreen mode Exit fullscreen mode

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 👇

Script key after making necessary changes

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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.

Terminal output when Vite dev server is started

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 (5)

Collapse
 
floriangoussin profile image
Florian Goussin

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

VITE_BACKEND_URL=localhost:<YOUR_DEV_SERVER_PORT_NUMBER>
Enter fullscreen mode Exit fullscreen mode

to

VITE_BACKEND_URL=<YOUR_COMPUTER'S_IP:<YOUR_DEV_SERVER_PORT_NUMBER>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
canrau profile image
Can Rau

This plugin makes it even easier to open the network url on mobile devices
github.com/svitejs/vite-plugin-qrcode

Collapse
 
alexcurtisslep profile image
Alex Curtis-Slep | Looking for Remote Dev role

This helped me, thanks for the post!

Collapse
 
devazharali profile image
Azhar Azhar

NICE

Collapse
 
lw33 profile image
Luca Wehner

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