невозможно заменить process.env.hostname в методе сообщения axios

Question

Я новичок в пользовательском интерфейсе / реагирую и получил работу в моем проекте для настройки файла .env.Так как у меня ограниченное время, я попытался просмотреть read.md реакции, где упоминается раздел для Добавление пользовательских переменных среды .Там упоминалось Переменные окружения внедряются во время сборки .Поэтому я внес изменения в соответствии с ссылкой , чтобы сборка не требовалась, а значения могли быть прочитаны во время выполнения.

Внутри файла action.js реактивного проекта, я пытаюсь сделать пост-запрос какниже.Console.log печатает правильное значение, но внутри почтового запроса, URL не заменяется.

export function createIdea(idea) {
    return function (dispatch){
      return axios.post('http://${process.env.REACT_APP_HOSTNAME}:${process.env.REACT_APP_PORT}/users/user',JSON.stringify(user),config).then(response => {
      // dispatch
      console.log('success')
        dispatch({
          type: CREATE_SUCCESSFUL,
          payload:response.data
        })
      }).catch(response=>{
        // dispatch
        console.log(process.env.REACT_APP_HOSTNAME);
        console.log(response)
        dispatch({
          type: CREATE_FAILED,
          payload:response
        })
      })
    }
}

Внутри webpack.config.dev.js внесите изменения для чтения конфигурации во время выполнения.Взял ссылку из этой stackoverflow link Изменения, как показано ниже в webpack.config.dev.js: вверху файла добавлен

var dotenv = require('dotenv').config({path: '../.env'});

Внутри раздела плагинов, добавлен

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

Мой файл .env, хранящийся в корневом каталоге, выглядит следующим образом:

REACT_APP_HOSTNAME=localhost

REACT_APP_PORT=8080

укажите, пожалуйста, некоторые указатели, если какая-либо конфигурация пропущена или что-то неправильно понято мной или что-то еще должно быть сделано в отношенииВардар

Answer 1

Создайте файл конфигурации axios, чтобы вам не приходилось повторять URL-адрес:

import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL // or process.env.BASE_URL if not using CRA
});

export default api;

Теперь вы импортируете эту конфигурацию для запросов AJAX:

import api from '../path/to/utils/axiosConfig.js';

Если вы используете create-реакции-приложение , то react-scripts позволяет автоматически использовать .env файлы. См. документация create-реагировать на приложение .

Пример рабочего CRA :

---

Однако, если вы похожи на меня и используете настраиваемую конфигурацию веб-пакета, вот рабочий пример: custom-webpack-envs

Реализацию dotenv можно найти здесь и здесь :

Для запуска приведенного выше примера ...

1. Откройте терминал на рабочем столе.

2. Клон репо: git clone git@github.com:mattcarlotta/custom-webpack-envs.git

3. Изменить каталог: cd custom-webpack-envs

4. Установить зависимости: yarn install

5. Запустить сервер: yarn dev

Answer 2

Попробуйте это:

new webpack.DefinePlugin({         
  'process.env.REACT_APP_HOSTNAME':JSON.stringify(process.env.REACT_APP_HOSTNAME),
  'process.env.REACT_APP_PORT':JSON.stringify(process.env.REACT_APP_PORT)
})