Aplikacje webowe stworzone z użyciem frameworka Angular lub biblioteki React, działające na standardowych portach, można uruchomić na lokalnym serwerze, wpisując w przeglądarkę
React domyślnie startuje na porcie 3000, a Angular na 4200 – to są takie standardy, które praktycznie wszyscy w branży znają i stosują. Kiedy zaczynasz nowy projekt w React, korzystając na przykład z create-react-app, serwer deweloperski po prostu nasłuchuje na http://localhost:3000. Analogicznie, jak generujesz projekt w Angular CLI i odpalasz ng serve, wtedy aplikacja wystartuje na http://localhost:4200. To są domyślne porty – nie musisz nic specjalnie ustawiać, wystarczy wpisać te adresy w przeglądarce. Z mojego doświadczenia, dobrze jest zapamiętać te ustawienia, bo praktycznie na każdym warsztacie czy bootcampie te adresy padają od ręki. Jeśli chodzi o praktykę, czasami port jest już zajęty i wtedy narzędzie zaproponuje inny, ale te wartości startowe to taka baza. Warto pamiętać, że zmiana portu wynika zazwyczaj z konfliktu, a nie z jakiejś specjalnej potrzeby. Dodatkowo, rozpoznanie tych portów pozwala szybciej debugować problemy z uruchomieniem aplikacji – jak coś nie wstaje na tych adresach, to od razu wiadomo, gdzie szukać. Ogólnie rzecz biorąc, korzystanie z tych domyślnych portów przyspiesza współpracę w zespole, bo każdy wie, gdzie szukać aplikacji, więc nie trzeba się rozpisywać w README, na jakim porcie coś działa. Moim zdaniem, to jeden z tych drobnych szczegółów, które składają się na dobre nawyki programistyczne.
W branży webowej bardzo łatwo się pogubić z numeracją portów, szczególnie kiedy pracuje się na różnych frameworkach i narzędziach. Częstym błędem jest założenie, że React i Angular korzystają z jakichś uniwersalnych albo zamiennych portów, ale w rzeczywistości te frameworki mają swoje domyślne ustawienia, które są szeroko przyjęte. Przykładowo, React – głównie dzięki create-react-app – zazwyczaj startuje na porcie 3000. Angular natomiast, kiedy uruchamiasz ng serve, domyślnie pojawia się na porcie 4200. Błędne wybranie portu 8000 czy 8080 może wynikać z przyzwyczajeń z pracy z serwerami backendowymi, gdzie te porty rzeczywiście są popularne (np. Pythonowy SimpleHTTPServer czy serwery Node.js, które często startuje się na 8080). Jednak w środowisku front-endu, szczególnie przy pracy z Reactem czy Angularem, te porty są raczej rzadkością, chyba że ktoś zmieni konfigurację ręcznie. Port 49887 czy 5001 to już kompletnie przypadkowe wartości – takich numerów nie spotyka się w domyślnych ustawieniach żadnego z tych narzędzi i ich wybór byłby naprawdę nietypowy. Zdarza się, że ktoś zapamięta porty z innych technologii albo środowisk i potem próbuje je stosować przy frameworkach front-endowych – to jest taki typowy błąd myślowy. Warto też pamiętać, że wpisanie niewłaściwego portu w przeglądarce po prostu nie uruchomi aplikacji, co może prowadzić do niepotrzebnej frustracji. Kluczowe jest więc, żeby znać te standardowe adresy: React na 3000, Angular na 4200. Taka wiedza oszczędza sporo czasu i pozwala uniknąć nieporozumień podczas pracy zespołowej. W sumie, jak dla mnie, dobrze jest zawsze na początku sprawdzić w dokumentacji narzędzia, na jakim porcie ono działa domyślnie – to niby drobiazg, a potrafi ułatwić życie.