Environment Variables

The helixml/apps-client requires several environment variables to be set for a proper development configuration. These environment variables include important keys and identifiers needed for APIs and authentication.

Setting Environment Variables

Environment variables can be set in a .env file at the root of your project. Below is an example of how to define the necessary variables.

# .env file

REACT_APP_API_URL='https://api.example.com'
REACT_APP_CLIENT_ID='your_client_id'
REACT_APP_CLIENT_SECRET='your_client_secret'
REACT_APP_DEFAULT_LANGUAGE='en'

Accessing Environment Variables

Within your TypeScript code, you can access these variables via process.env. Here’s how you can utilize these variables in your application:

const apiUrl = process.env.REACT_APP_API_URL;
const clientId = process.env.REACT_APP_CLIENT_ID;

console.log(`API URL: ${apiUrl}`);
console.log(`Client ID: ${clientId}`);

Configuration Files

In addition to environment variables, the configuration can also include various TypeScript configuration files. This might include a tsconfig.json file for TypeScript compiler options.

Example tsconfig.json

Here is an example configuration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Using Configuration in Components

Following the setup of environment variables and TypeScript configurations, you can utilize these settings within your React components.

Network Request Example

Utilizing fetch to make requests to the API, leveraging the configured API_URL.

async function fetchData(endpoint: string) {
    const response = await fetch(`${process.env.REACT_APP_API_URL}/${endpoint}`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${process.env.REACT_APP_CLIENT_SECRET}`,
            'Content-Type': 'application/json'
        }
    });

    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return await response.json();
}

// Usage
fetchData('data-endpoint')
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));

Custom Configuration

For more complex projects, custom configuration files can be defined. This could involve additional settings for specific features of your app. A common practice is to create a dedicated config.ts file.

Example config.ts

const config = {
    apiUrl: process.env.REACT_APP_API_URL,
    clientId: process.env.REACT_APP_CLIENT_ID,
    defaultLanguage: process.env.REACT_APP_DEFAULT_LANGUAGE || 'en'
};

export default config;

Using Custom Configuration

You can import and use the custom configuration throughout your application.

import config from './config';

console.log(`Configured API URL: ${config.apiUrl}`);

Conclusion

These steps encompass the necessary configuration options available in the development environment for the helixml/apps-client. Proper configuration is crucial to ensure effective development using the framework.

Source: helixml/apps-client