The Mysterious Case of `npm install expo-dev-client`: Why Your Development Server Stops Working

Have you ever experienced the frustration of running `npm install expo-dev-client` only to find that your development server refuses to work? You’re not alone! In this article, we’ll dive into the reasons behind this unexpected behavior and provide a step-by-step guide to get your development server up and running again.

What is Expo Dev Client, and Why Do We Need It?

Expo Dev Client is a powerful tool that allows developers to test and debug their Expo apps on physical devices or simulators. By installing Expo Dev Client, you can:

• Test your app on a physical device without having to build and publish it
• Debug your app using the built-in debugging tools
• Take advantage of advanced features like Hot Reloading and Fast Refresh

It’s a crucial tool for any serious Expo developer, but why does running `npm install expo-dev-client` cause issues with the development server?

The Root of the Problem: Conflicting Ports

The reason behind the development server’s sudden failure lies in the way Expo Dev Client operates. When you install Expo Dev Client, it starts a new server on port 19002, which is also the default port used by the Expo development server. This creates a conflict, causing the development server to stop working.

But don’t worry; we can easily resolve this issue with a few simple steps.

Step 1: Identify the Problem – Check Your Package.json

Before we start troubleshooting, let’s take a closer look at your `package.json` file. Open it in your favorite code editor and search for the following script:

"scripts": {
  "start": "expo start",
  ...
}

This script is responsible for starting the Expo development server. Take note of the port number used by the server. If it’s set to 19002, we need to change it to avoid the conflict.

Step 2: Update Your Package.json – Change the Port Number

Update the `start` script to use a different port number. For example, let’s use port 19003:

"scripts": {
  "start": "expo start --port 19003",
  ...
}

Save the changes to your `package.json` file.

Step 3: Configure Expo Dev Client to Use a Different Port

Next, we need to configure Expo Dev Client to use a different port number. Create a new file called `expo.config.js` in the root of your project with the following content:

module.exports = {
  devClient: {
    port: 19002,
  },
};

This configuration tells Expo Dev Client to use port 19002, which is now free to use since we changed the development server’s port number.

Step 4: Restart Your Development Server and Expo Dev Client

Now that we’ve updated our configuration files, let’s restart the development server and Expo Dev Client:

npm run start
npx expo-dev-client

Your development server should now be running on port 19003, and Expo Dev Client should be running on port 19002.

Step 5: Verify That Everything is Working as Expected

Open your browser and navigate to http://localhost:19003 to verify that your development server is running correctly. You should see your Expo app in action.

Next, open the Expo Dev Client app on your physical device or simulator and connect to http://localhost:19002. You should now be able to debug your app using the Expo Dev Client tools.

Troubleshooting Common Issues

If you’re still experiencing issues, check the following:

• Make sure you’ve updated your `package.json` file correctly
• Verify that Expo Dev Client is using the correct port number in `expo.config.js`
• Check for any conflicting ports used by other services or applications
• Try restarting your development server and Expo Dev Client

Conclusion

Running `npm install expo-dev-client` doesn’t have to mean the end of your development server. By following these simple steps, you can resolve the port conflict and get back to building amazing Expo apps. Remember to configure Expo Dev Client to use a different port number, update your `package.json` file, and restart your development server and Expo Dev Client.

With these instructions, you’ll be well on your way to debugging and testing your Expo app like a pro. Happy coding!

Common Expo Development Server Ports

Port Number	Description
19000	Default Expo development server port
19001	Alternative Expo development server port
19002	Default Expo Dev Client port
19003	Alternative Expo development server port (used in this example)

Related Resources

For more information on Expo Dev Client and Expo development server, check out the following resources:

• Expo Dev Client Documentation
• Expo CLI Documentation
• Expo Learn Tutorials

Frequently Asked Question

Getting stuck with Expo Dev Client installation? Don’t worry, we’ve got you covered!