When building modern React applications that need to interact with existing enterprise infrastructure, organizations often face several challenges:
Common Integration Challenges:
How DreamFactory Provides Value:
For organizations with existing .NET infrastructure, databases, and legacy SOAP services, DreamFactory eliminates months of custom integration work and provides a production-ready API layer that's secure, documented, and maintainable.
Note: This guide references DreamFactory official documentation (docs.dreamfactory.com and guide.dreamfactory.com). For advanced features, consult DreamFactory support.
Before building anything, make a quick list:
You'll map each of these to one or more DreamFactory services.
You'll use DreamFactory's HTTP Service connector to proxy your .NET APIs through DreamFactory. The HTTP Service connector is used to proxy third-party HTTP APIs through DreamFactory, opening up possibilities for creating sophisticated API-driven applications and powerful workflows involving multiple APIs.
This creates DreamFactory endpoints with the structure:
/api/v2/dotnet_orders/<path>
Where <path> will be appended to your base URL when making requests to the remote .NET API.
Note: When a client makes a request to your DreamFactory service, DreamFactory will append everything after /dotnet_orders in the service URL to the base URL before forwarding the request to the remote web service. DreamFactory acts as a proxy for the remote web service.
Important benefit: Web service credentials are never exposed to the client since they're configured and stored in DreamFactory.
If your .NET API requires query parameters (like API keys), Click the Advanced Options drop down and scroll down to the Parameters section and click the + (plus sign) on the right side:
Configure each parameter:
Parameter behavior:
Headers are the preferred method for passing authorization credentials because they are encrypted when HTTPS is used (unlike parameters which can be intercepted or logged).
To add a header, click the + (plus sign) on the right side of the Headers section:
Configure each header:
Header options:
Click Save to persist your HTTP Service configuration.
Once configured, your React app will make requests to:
GET https://your-dreamfactory-domain/api/v2/dotnet_orders/{endpoint}
POST https://your-dreamfactory-domain/api/v2/dotnet_orders/{endpoint}
DreamFactory will forward these requests to your .NET API at:
GET https://api.customer.com/orders/{endpoint}
POST https://api.customer.com/orders/{endpoint}
All configured parameters and headers are automatically included in the outbound request to your .NET API.
DreamFactory supports adding OpenAPI/Swagger definitions for HTTP Services. This provides:
If your .NET API provides OpenAPI/Swagger documentation, you can add this definition in the Service Definition section of the Config tab. Consult DreamFactory support or community resources for detailed instructions on importing API definitions.
Note: Unlike database or file storage services, HTTP services in DreamFactory do not auto-generate Swagger documentation without a service definition, as DreamFactory cannot automatically discover the structure of remote APIs.
For any DBs you want React to hit (avoiding extra .NET plumbing):
DreamFactory auto-generates full REST CRUD over tables/views:
GET /api/v2/sqlserver/_table/customers
POST /api/v2/sqlserver/_table/customers
PATCH /api/v2/sqlserver/_table/customers/123
DELETE /api/v2/sqlserver/_table/customers/123
Useful Query Parameters:
All with OpenAPI docs and RBAC guardrails.
For SOAP or older web services:
Result: React sees simple JSON REST; DreamFactory handles all SOAP XML ugliness.
Now make the React app's access secure but simple.
For the HTTP Service (wrapped .NET API):
For Database Service:
For SOAP Service (if added):
Note: The Requester field determines if the service can be accessed via API calls, server-side scripts, or both. For React applications, select API.
Note: Depending on your Role Based Access Control requirements, it might make sense to create multiple Roles across your different API services. This example only uses one Role.
DreamFactory automatically generates an API key for this App. Copy this key - you'll need it in your React application.
Important: Each App has one API key. The role assigned to the App determines what resources can be accessed using that API key.
For user-specific authentication (not just app-level):
How it works:
Authentication patterns:
Each user can be assigned a role per App in the Users tab of the admin console. If no user-specific role is assigned, they inherit the App's default role.
Before touching React, verify the API layer from DreamFactory's admin.
If these work here, they'll work from React.
Now assume:
Example with Vite + React:
npm create vite@latest react-portal -- --template react
cd react-portal
npm install
Create a .env.local file (for development only, never commit):
VITE_DF_BASE_URL=https://api.customer.com/api/v2
VITE_DF_APP_KEY=your_app_key_here
Production Note: Use your deployment platform's environment variable system (not .env files) to inject these values securely.
// src/dreamfactoryClient.js
const BASE_URL = import.meta.env.VITE_DF_BASE_URL;
const APP_KEY = import.meta.env.VITE_DF_APP_KEY;
let sessionToken = null; // set after login
export function setSessionToken(token) {
sessionToken = token;
}
export async function dfRequest(path, options = {}) {
const headers = {
"Content-Type": "application/json",
...(options.headers || {}),
"X-DreamFactory-Api-Key": APP_KEY,
};
if (sessionToken) {
headers["X-DreamFactory-Session-Token"] = sessionToken;
}
const res = await fetch(`${BASE_URL}${path}`, {
...options,
headers,
});
if (!res.ok) {
const errorData = await res.json().catch(() => ({}));
throw new Error(
`DreamFactory error: ${res.status} - ${errorData.error?.message || 'Unknown error'}`
);
}
return res.json();
}
DreamFactory has built-in auth endpoints (e.g., /user/session) for username/password, LDAP, OAuth, etc.
Example simple login form:
// src/Login.jsx
import { useState } from "react";
import { dfRequest, setSessionToken } from "./dreamfactoryClient";
export default function Login({ onLoggedIn }) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
async function handleSubmit(e) {
e.preventDefault();
setError("");
try {
const body = { email, password };
const data = await dfRequest("/user/session", {
method: "POST",
body: JSON.stringify(body),
});
// Response includes: session_token, session_id, id, email, etc.
setSessionToken(data.session_token);
onLoggedIn(data);
} catch (err) {
setError(err.message);
}
}
return (
<form onSubmit={handleSubmit}>
{error && <div style=>{error}</div>}
<input
value={email}
onChange={e => setEmail(e.target.value)}
placeholder="Email"
type="email"
required
/>
<input
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
placeholder="Password"
required
/>
<button type="submit">Log in</button>
</form>
);
}
Let's say your .NET API has an endpoint GET /orders (exposed via the HTTP Service dotnet_orders):
// src/Orders.jsx
import { useEffect, useState } from "react";
import { dfRequest } from "./dreamfactoryClient";
export default function Orders() {
const [orders, setOrders] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
dfRequest("/dotnet_orders/orders")
.then(data => {
setOrders(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return (
<ul>
{orders.map(o => (
<li key={o.id}>
#{o.id} – {o.status}
</li>
))}
</ul>
);
}
Similarly, for a DB-backed resource with query parameters:
// SQL Server table via DF DB service
// Get active customers with only id, name, email fields
dfRequest("/sqlserver/_table/customers?filter=status='active'&fields=id,name,email");
React never touches .NET or the DB directly; it only calls DreamFactory.
Note: CORS configuration requires environment variable setup in your DreamFactory deployment (.env file with DF_CORS_* variables). Consult your DreamFactory administrator or deployment documentation for specific configuration steps.
For development with React running on http://localhost:5173, you'll need to configure:
In production, you might:
From React's perspective, it still just talks to /api/v2/... (same-origin, no CORS needed).
This guide demonstrates how to:
Next Steps:
Note: For advanced features like detailed OpenAPI imports, custom scripts, or complex authentication flows, consult DreamFactory support.
1. Can I call multiple .NET APIs through one DreamFactory service?
Yes. Create separate HTTP Services for each base URL or use path routing; secure them with RBAC per service or path.
2. How are credentials kept out of the React client?
Secrets live in DreamFactory (headers/params). The browser sends only the app API key and optional session token; DF injects upstream auth server-side.
3. Do database APIs include OpenAPI docs automatically?
Yes. Database services auto-generate REST + OpenAPI; HTTP Services show docs if you import an OpenAPI definition.
4. What’s the difference between API key and session token?
API key identifies the app (base permissions). Session token identifies the user (user-level permissions). Both can be required.
5. How do I handle CORS in development?
Allow your dev origin, methods, and headers (API key + session token) in DF’s CORS config—or run React behind the same domain via reverse proxy.