Trouble in paradise (The create-react-app edition)

It was a beautiful Saturday morning: the dawn of St. Paddy’s. After encountering an adequate number of cute dogs on a morning walk, noting snow melting in the tentative spring sunshine, and grabbing coffee with a sweet and brilliant friend, I felt inspired to start working on a side project on my brand new Mac!

The project in question was a React application, bootstrapped with create-react-app — a configuration tool for quickly starting React projects with a simple command — and not yet on my new machine. I cloned it down from my Github. No problemo. I installed my app’s dependencies and started up the app, only to get a rather rude remark from my terminal:

? Something is already running on port 3000

Port 3000 is the default port on which to run applications generated by create-react-app. Frantically, I ran a series of commands to investigate the running processes on my computer. Port 3000 was not among them.

I then created a .env file and manually assigned PORT=3002, PORT=4000, any random number that popped into my head.

? Something is already running on port 3002
? Something is already running on port 4000

I restarted my terminal and rebooted my computer to no avail. I then created a brand new project with create-react-app, only to see the same result.

I ran a different project that had not been bootstrapped with create-react-app. It ran successfully on port 3000 and every other port I tried.

I then came across this issue on create-react-app‘s Github, which identified my problem, and Jake found this article which helped me solve it.

Steps to solve this bizarre error:

cat /etc/hosts
// Is this empty? If so, ah ha!

Open up /etc/hosts and copy/paste this in:

##
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost

Be sure to save it. You may need to type in your admin password to do so.

From there, you should be able to use and run apps bootstrapped with create-react-app without issues.

In case you’re curious, /etc/hosts should be included on each computer by default and tells your operating system to map IP addresses to host names. For some reason, mine was empty, perhaps because I’d deleted it to make space on my new Mac during a data transfer.

But all’s well that ends well! I’m gonna get on with my St. Paddy’s Day, maybe crack open a beer. I need it.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s