Quicktip: Browser für Create React App definieren

Create React App ist der einfachste Weg, ein React-Projekt zu erstellen. Ein Debug-Server wird bereits mitgeliefert. Mit npm start wird dieser gestartet und die App wird im Standardbrowser des Betriebssystems geöffnet.

Doch manchmal möchtest du vielleicht, dass die App in einem anderen Browser geöffnet wird. In meinem Fall nutze ich Safari zwar als Standardbrowser, zum Entwickeln nutze ich aber lieber andere Browser, wie Chrome oder Firefox, da diese meine Meinung nach, bessere Entwickler-Tools bieten.

So geht’s

Glücklicherweise kannst du den Browser selbst definieren, welcher bei npm start geöffnet werden soll.

  1. Erstelle eine neue Datei namens .env ins Root-Verzeichnis deines Projekts.
  2. Um Firefox als Browser zu setzen, schreibe folgendes in Datei:
BROWSER=Firefox

Der einzutragende Browser-Name kann sich von Plattform zu Plattform unterscheiden. Die Bezeichnung von Google Chrome beispielsweise unter macOS ist google chrome, unter Windows chrome und unter Linux google-chrome.

TheFink – Die Plattform für Denker und Macher

Wenn du zur deutschsprachigen Creator-Szene gehörst, hast du eventuell mal etwas von TheFink gehört (wenn nicht, auch nicht schlimm 😉). TheFink ist eine entstehende Plattform im Web für (in erster Linie) deutschsprachige kreative Menschen. Egal ob du gerne entwickelst, Dinge designst oder Musik produzierst. Auf TheFink sollst du die Möglichkeit bekommen, dich, dein Können und deine Ideen zu präsentieren und auch um coole Projekte zusammen mit anderen Leuten zu starten.

Während die Plattform selbst sich noch in Entwicklung befindet, hast du bereits jetzt die Möglichkeit, dich auf https://thefink.net zu registrieren (btw von mir entwickelt), anschließend kannst du bereits unserem Discord-Server beitreten und unseren Newsletter abonnieren, damit du was die Entwicklung angehst auf dem neuesten Stand gehalten wirst.

Mit Asiw und Uisum ans Ziel!

Für die Entwicklung der aktuellen Site kamen hauptsächlich zwei Libraries zum Einsatz:

  • Asiw fürs Server-Backend mit MVC-Pattern
  • Uisum als UI-Kit, die zusammen mit React und Bootstrap funktioniert

Diese beiden Libraries können frei verwendet werden, den Quellcode dazu gibt es auf GitHub. Asiw musste ich zwar stark abändern, da die Form, die ihr auf GitHub findet doch sehr abgespeckt ist. Ich denke aber, dass Asiw eine gute Basis für einen RESTful Service in PHP ist. Der Aufbau von Asiw ist übrigens sehr stark von ASP.NET Web API inspiriert, wenn du also damit mal gearbeitet hast, wirst du dich sehr schnell zurecht finden.

Für das Frontend kam Uisum als UI-Kit zum Einsatz. Uisum (kommt im übrigen aus dem Lateinischen und heißt soviel wie „betrachten“) liefert nützliche React-Komponenten für den Grundaufbau einer Web App. Für das Styling wird hauptsächlich Bootstrap genutzt. Der Vorteil: Durch das Abändern von SCSS-Variablen lässt das Aussehen sehr gut personalisieren.
Noch ein Tipp: Durch dieses Tool wird das Anpassen von Bootstrap-Variablen noch angenehmer: https://lgkonline.github.io/customize-bootstrap/