(For the German version, please scroll down.)
This project is a React starter template for developing web applications that can be integrated into FileMaker. It uses React with Vite as a build tool and fm-gofer for communication with FileMaker, providing an easy way to embed modern React applications in FileMaker.
- Modern React development with Vite
- Easy integration with FileMaker via the fm-gofer library
- Automatic creation of a single HTML file for easy deployment in FileMaker
- Example React project for bidirectional communication between the web application and FileMaker
- Node.js (version 20.11 or higher)
- FileMaker Pro (version 19.4 or higher)
- Clone or download the repository
- Install the dependencies:
npm installThe main React application is in the src/App.jsx file. This is where you start programming your React components. The entry point is src/main.jsx which renders the App component.
The most important files and folders are:
index.html- Basic HTML structure with React root elementsrc/main.jsx- Application entry point (renders React app)src/App.jsx- Main React componentsrc/index.css- Global CSS stylessrc/App.css- Component-specific stylesfm/- Contains files for FileMaker integration
To start development, open the src/App.jsx file and add your React components there. The application uses modern React with hooks and functional components.
To start the application in development mode:
npm run devThis starts a local development server with hot-reload functionality. The application can then be used directly in the FileMaker file if development mode is also enabled there.
To build the application and embed it in FileMaker:
npm run deploy-to-fmDieses Projekt ist ein React-Starter-Template für die Entwicklung von Web-Anwendungen, die in FileMaker integriert werden können. Es nutzt React mit Vite als Build-Tool und fm-gofer für die Kommunikation mit FileMaker und bietet eine einfache Möglichkeit, moderne React-Anwendungen in FileMaker einzubinden.
- Moderne React-Entwicklung mit Vite
- Einfache Integration mit FileMaker über die fm-gofer Bibliothek
- Automatische Erstellung einer einzigen HTML-Datei für einfaches Deployment in FileMaker
- Beispiel-React-Projekt für bidirektionale Kommunikation zwischen Web-Anwendung und FileMaker
- Node.js (Version 20.11 oder höher)
- FileMaker Pro (Version 19.4 oder höher)
- Klonen Sie das Repository oder laden Sie es herunter
- Installieren Sie die Abhängigkeiten:
npm installDie Haupt-React-Anwendung befindet sich in der Datei src/App.jsx. Hier beginnen Sie mit der Programmierung Ihrer React-Komponenten. Der Einstiegspunkt ist src/main.jsx, welcher die App-Komponente rendert.
Die wichtigsten Dateien und Ordner sind:
index.html- HTML-Grundgerüst mit React-Root-Elementsrc/main.jsx- Anwendungseinstiegspunkt (rendert React-App)src/App.jsx- Haupt-React-Komponentesrc/index.css- Globale CSS-Stylessrc/App.css- Komponenten-spezifische Stylesfm/- Enthält Dateien für die FileMaker-Integration
Um mit der Entwicklung zu beginnen, öffnen Sie die src/App.jsx Datei und fügen Sie Ihre React-Komponenten dort ein. Die Anwendung verwendet modernes React mit Hooks und funktionalen Komponenten.
Um die Anwendung im Entwicklungsmodus zu starten:
npm run devDies startet einen lokalen Entwicklungsserver mit Hot-Reload-Funktionalität. Die Anwendung kann dann in der FileMaker-Datei direkt benutzt werden, wenn dort ebenfalls der Entwicklermodus aktiviert ist.
Um die Anwendung zu bauen und in FileMaker einzubinden:
npm run deploy-to-fmDieser Befehl führt folgende Aktionen aus:
- Baut die Anwendung mit Vite (
npm run build) - Lädt die erstellte Datei in FileMaker hoch (
npm run upload)
Hinweis: Welche FileMaker Datei verwendet wird, ist in der Datei fm/fmConfig.js konfiguriert.
Die Anwendung wird als eine einzige HTML-Datei gebaut (dank vite-plugin-singlefile) und kann leicht in FileMaker integriert werden.
Die Anwendung verwendet die fm-gofer Bibliothek für die Kommunikation mit FileMaker. Folgende FileMaker-Skripte werden verwendet:
ext_daten_von_fm: Holt Daten von FileMakerext_daten_an_fm_senden: Sendet Daten an FileMakeruploadToFM: Wird für das Deployment der Web-Anwendung in FileMaker verwendet
Die FileMaker-Konfiguration kann in der Datei fm/fmConfig.js angepasst werden:
export const fmConfig = {
server: "$",
file: "FM-Starter",
uploadScript: "uploadToFM",
widgetName: "widgetName",
};Die fmConfig-Datei enthält folgende wichtige Variablen:
server: Der FileMaker-Server, auf dem die Datei gehostet wird. Verwenden Sie$für lokale Dateien.file: Der Name der FileMaker-Datei ohne Dateiendung.uploadScript: Der Name des FileMaker-Skripts, das für den Upload der Web-Anwendung verwendet wird.widgetName: Der Name des Widgets in FileMaker, in dem die Web-Anwendung angezeigt wird.
Diese Einstellungen müssen mit Ihrer FileMaker-Umgebung übereinstimmen, damit die Integration funktioniert.
MIT