React.JS | Cambiar el puerto 3000 que viene por defecto con la plantilla

Cuando creamos un proyecto de React.JS con la plantilla, por defecto se ejecutará en el puerto 3000, lo que hará que pueda darnos conflicto con otros proyectos que tengamos en ejecución si, como en mi caso, hacéis pruebas en proyectos paralelos mientras desarrolláis la aplicación principal. Entonces, ¿cómo lo cambiamos?

En mi caso, los proyectos los creo para usarlos con TypeScript con lo que la instrucción que ejecuto es la siguiente:

npx create-react-app my-app --typescript

Una vez creado el proyecto, si lo ejecutamos obtendremos una interfaz como la siguiente:

Lo que ocurre es que, si ejecutamos dos proyectos a la vez, nos dará un conflicto porque el puerto 3000, que es sobre el que se ejecuta por defecto, ya está en uso.

Al detectar que el puerto está en uso, nos preguntará si queremos ejecutarlo en otro puerto, así que si decimos que sí… voilà

Pero esta solución es temporal, ya que la próxima vez que volvamos a ejecutar npm start se volverá a intentar ejecutar en el puerto 3000 volviendo a mostrarnos el conflicto.

Solución

Aunque he visto algunas soluciones editando el fichero package.json que no me han funcionado/gustado, desde mi punto de vista, la mejor opción, más limpia y más fácil es la de crear un fichero .env en el directorio raíz de nuestra aplicación React.JS y añadirle el puerto sobre el que queremos que se ejecute tal y como muestro en la imagen.

PORT=8001

Y como resultado: