Environment Configuration

Configure HeliosEditor using environment variables.

Basic Setup

For applications using environment variables, you can configure the upload settings:

// .env
REACT_APP_UPLOAD_URL=https://your-api.com/upload
REACT_APP_CLIENT_ID=your-client-id
REACT_APP_CLIENT_SECRET=your-client-secret

// Component
const uploadConfig = {
  uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,
  clientId: process.env.REACT_APP_CLIENT_ID,
  clientSecret: process.env.REACT_APP_CLIENT_SECRET
};

Environment Variables

REACT_APP_UPLOAD_URL

The URL endpoint where images will be uploaded.

string (optional)

REACT_APP_CLIENT_ID

Authentication client ID for your upload API.

string (optional)

REACT_APP_CLIENT_SECRET

Authentication client secret for your upload API.

string (optional)

Migration from VITE_* Variables

If you were previously using environment variables directly (VITE_* variables), update your configuration:

Before

// .env
VITE_UPLOAD_API_URL=https://api.example.com/upload
VITE_CLIENT_ID=client123
VITE_CLIENT_SECRET=secret456

// No explicit config needed - read automatically
<HeliosEditor value={content} onChange={setContent} />

After

// .env
REACT_APP_UPLOAD_URL=https://api.example.com/upload
REACT_APP_CLIENT_ID=client123
REACT_APP_CLIENT_SECRET=secret456

// Explicit config required
const uploadConfig = {
  uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,
  clientId: process.env.REACT_APP_CLIENT_ID,
  clientSecret: process.env.REACT_APP_CLIENT_SECRET
};

<HeliosEditor
  value={content}
  onChange={setContent}
  uploadConfig={uploadConfig}
/>

Important Note

Environment variables must be prefixed with REACT_APP_to be accessible in React applications. Make sure to restart your development server after changing environment variables.