Визначення змінних середовища

У проєктах, які використовують Vite як інструмент для зборки, змінні середовища можна визначити та використовувати для налаштування різної поведінки залежно від того, чи знаходиться додаток у стадії розробки чи вже виробничої (продакшн). Ось як ви можете здійснити це в своєму проекті Vite:

1. Визначення змінних середовища

У корені вашого проекту створіть файл .env.local для розробки та .env.production для виробництва. Вкажіть змінні середовища в цих файлах:

.env.local: VITE_API_URL=http://localhost:8005/api/projects

.env.production:VITE_API_URL=http://localhost:8005/api/projects

2. Використання змінних у вашому коді

У вашому JavaScript або TypeScript коді, ви можете доступити ці змінні через import.meta.env:

const apiUrl = import.meta.env.VITE_API_URL;

3. Налаштування скриптів у package.json

Додайте або налаштуйте скрипти у вашому package.json файлі, щоб визначити, які команди використовувати для розробки та виробництва:

{ “scripts”: { “dev”: “vite”, // запускає сервер розробки, використовуючи .env.local “build”: “vite build”, // збирає проект з використанням .env.production “serve”: “vite preview” // служить збудованому проекту } }

4. Автоматичне вибирання змінних

Vite автоматично використовує .env.production під час виробничого збору та .env.local під час локальної розробки. Вам не потрібно нічого додатково робити для перемикання між цими файлами; Vite обробляє це за вас.

Завдяки цьому підходу, ви зможете легко управляти змінними середовища в залежності від того, чи ви знаходитесь у процесі розробки чи готуєте додаток до запуску у виробництво.

У проектах на базі Create React App для управління змінними середовища ви можете використовувати підхід, схожий до того, який використовується в Vite, але з деякими особливостями, притаманними саме Create React App.

Кроки для налаштування змінних середовища в Create React App:

1. Створення файлів змінних середовища

У корені вашого проекту Create React App створіть наступні файли для змінних середовища:

• .env – базові змінні, які будуть доступні у всіх середовищах.
• .env.development – змінні для локальної розробки.
• .env.production – змінні для продакшн (виробничого) середовища.

Приклади змінних:

.env.development

REACT_APP_API_URL=http://127.0.0.1:8005/api REACT_APP_GENERATE_URL=http://localhost:8013

.env.production

REACT_APP_API_URL=https://yourproductionapi.com/api REACT_APP_GENERATE_URL=https://yourproductiongenerateurl.com

2. Використання змінних у вашому React проекті

Доступ до цих змінних здійснюється через об’єкт process.env у вашому коді:

console.log(process.env.REACT_APP_API_URL); console.log(process.env.REACT_APP_GENERATE_URL);

Ці змінні будуть автоматично замінені на відповідні значення під час компіляції залежно від середовища, в якому ви запускаєте або збираєте ваш проект.

3. Налаштування скриптів у package.json

У вашому package.json файлі, переконайтеся, що команди start і build налаштовані правильно:

“scripts”: { “start”: “react-scripts start”, // Використовує .env.development “build”: “react-scripts build”, // Використовує .env.production “test”: “react-scripts test” }

4. Запуск та збірка

• Запуск у режимі розробки: npm start (автоматично використовує .env.development).
• Збірка для продакшн: npm run build (автоматично використовує .env.production).

Ця налаштування дозволять вам маніпулювати змінними середовища в залежності від потреб розробки та виробництва, забезпечуючи правильне управління конфігурацією вашого додатка.