unable to replace process.env.hostname in axios post method

Question

I am new to UI/react and got work in my project to configure .env file. Since I have limited time, I tried to go through read.md of react where section for Adding Custom Environment Variables is mentioned. It was mentioned there The environment variables are embedded during the build time. Hence I made changes as per link so that build is not required and values could be read at runtime.

Inside action.js file of react project, I am trying to make post request as below. Console.log is printing the proper value but inside post request, URL is not getting replaced.

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
        })
      })
    }
}

Inside webpack.config.dev.js, make changes to read configuration at runtime. Took reference from this stackoverflow link Changes are as below in webpack.config.dev.js: At the top of the file , added

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

Inside plugins section, added

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

My .env file kept at root location looks as below:

REACT_APP_HOSTNAME=localhost

REACT_APP_PORT=8080

please provide some pointers if any configuration is missed or anything is misunderstood by me or something else need to be done wrt axios

score 0 · Answer 1 · answered Apr 06 '19 at 09:37

0

Try this one:

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)
})

answered Apr 06 '19 at 09:37

Julius Guevarra

690
1
7
19

I tried this approach but still same error. Unable to resolve the URL – user2800089 Apr 06 '19 at 10:25

Matt Carlotta · Answer 2 · 2019-04-06T19:50:37.247

Create an axios configuration file so you don't have to repeat the URL over and over:

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;

Now you'll import this configuration for AJAX requests:

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

If you use the create-react-app, then react-scripts allows you to use .env files automagically. See create-react-app documentation.

Working CRA example:

However, if you're like me, and using a custom webpack configuration, then here's a working example: custom-webpack-envs

The dotenv implementation can be found here and here:

To run the example above...

Open a terminal on your desktop.
Clone the repo: git clone git@github.com:mattcarlotta/custom-webpack-envs.git
Change the directory: cd custom-webpack-envs
Install the dependencies: yarn install
Run the server: yarn dev

unable to replace process.env.hostname in axios post method

2 Answers2