So hostest du Preact-Anwendungen

​

Einführung

​

Voraussetzungen

• Square Cloud Konto: Registriere dich über die Registrierungsseite mit deiner E-Mail-Adresse.
• Aktiver kostenpflichtiger Plan: Stellt dedizierte Ressourcen und optimierte Leistung für deine Anwendung sicher. Sieh dir unsere verfügbaren Pläne an und wähle den passendsten für deine Bedürfnisse.

​

Projekt erstellen

​

CLI-Installation

npm install -g preact-cli

​

Projekt entwickeln

preact create default my-preact-app

cd my-preact-app
npm install

npm run dev

src/components/app.js

export default function App() {
  return (
    <div>
      <h1>Hello from Preact!</h1>
    </div>
  );
}

​

Projekt bauen

npm run build

​

Einen Produktionsserver auswählen

​

Express-Bibliothek

import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => console.log('Server running on port 80'));

​

Serve-Bibliothek

​

Die Serve-Bibliothek installieren

npm install serve@14.2.3

​

Das Startskript konfigurieren

"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}

• serve: Dies ist der Befehl, um den serve-Server zu starten.
• -s dist: Die Option -s stellt das Verzeichnis dist im Single-Page-Application-Modus bereit. Das bedeutet, dass alle nicht gefundenen Anfragen zu index.html umgeleitet werden. Das Verzeichnis dist wird üblicherweise erstellt, wenn Sie npm run build ausführen.
• -l 80: Die Option -l gefolgt von 80 weist serve an, auf Port 80 zu lauschen. Port 80 ist der Standardport für HTTP-Verkehr.

​

Bereitstellen

​

Über das Dashboard

1

Upload-Seite aufrufen

Rufe die Upload-Seite auf und lade die ZIP-Datei deines Projekts hoch.

2

Umgebung konfigurieren

Nachdem du deine ZIP-Datei hochgeladen hast, musst du den Namen, die Hauptdatei oder Runtime-Umgebung und weitere Einstellungen für dein Projekt konfigurieren.
Wenn du ein Web-Projekt hochlädst, achte darauf, “Web Publication” auszuwählen und deinem Projekt eine Subdomain zuzuweisen.

3

Projekt bereitstellen

Klicke abschließend auf die Schaltfläche “Deploy”, um dein Projekt auf Square Cloud zu hosten.
Nach dem Deploy kannst du den Status und die Logs deines Projekts über das Dashboard überwachen.

4

Bestätige, dass deine App live ist

Dein erstes Deploy dauert in der Regel weniger als eine Minute. Warte im Dashboard, bis der Status deiner Anwendung als “running” angezeigt wird, und prüfe die Logs auf Startfehler.
Wenn du eine Website oder API bereitgestellt hast, öffne https://<deine-subdomain>.squareweb.app in deinem Browser — du solltest sehen, dass deine Anwendung reagiert. Wenn du einen Bot bereitgestellt hast, sende ihm einen Befehl, um zu bestätigen, dass er online ist.

App startet nicht? Im Leitfaden zur Fehlerbehebung findest du die häufigsten Ursachen und Lösungen.

​

Über die CLI

npm install -g @squarecloud/cli

squarecloud update

curl -fsSL https://cli.squarecloud.app/install | bash

squarecloud auth login

squarecloud upload 

squarecloud upload --file <path/to/zip> 

squarecloud app status
squarecloud app logs

​

Fehlerbehebung

​

Weitere Ressourcen

​

Kontaktiere uns