How to create a React package with environment variables?

Question

I am creating an NPM package using React (basically is a package that performs queries to an API and displays the response in a page)

Since I have different apps that are going to use the package, I need to call different API urls. I thought that I can leave the API url as a placeholder (process.env.REACT_APP_API_URL) in the package using .env and then pass the url in the .env file in the consumer application. However, even thought the application has an .env file and the url values are there, the API call is being done to an 'undefined' url.

My thoughts are that when the package is built, instead of having the placeholder for my variable, the placeholder is replaced for 'undefined' and there is my problem.

This makes me think the I am taking the wrong approach and I need to customize this value in another manner. Has anyone faced something similar in the past and has a good solution?

This is how this looks like in my package:

import axios from 'axios';

const apiClient = axios.create({
    baseURL: `${process.env.REACT_APP_API_URL}/`,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });

export default apiClient;

This is my .env file in my React App:

REACT_APP_API_URL="http://localhost:5001/"

Thanks

Bhavesh Daswani · Accepted Answer · 2022-07-25 15:11:36Z

1

I would recommend exposing a method which expects API URL, Like below

    import axios from 'axios';


export const configureClient =  (configOptions) => {
  const apiClient = axios.create({
    baseURL: `${configOptions.reactAppApiUrl}/`,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });
  return apiClient;
}

Might this help you, also provide configOption, provide them more functionality like setting extra headers to be passed while creating the axios instance

answered Jul 25, 2022 at 15:11

Bhavesh Daswani

7416 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nahuel · Accepted Answer · 2022-08-14 22:21:57Z

Based on @Bhavesh Daswani suggestion, I did the following:

App.tsx

import React from "react";
import { AppContainer } from @my-package;

const apiConfig = {
  url: process.env.REACT_APP_API_URL!,
}

const App = () => {
  return (
    <AppContainer apiConfig={apiConfig}>
       
    </AppContainer>
  );
};

export default App;

Then, inside my AppContainer.tsx in my-package npm package, I have:

import React from "react";
import axios from "axios";

import {
    ApiConfig,
    AppContainerProps,
} from "./AppContainer.types";

const configureApi = (apiConfig: ApiConfig) => {
    axios.defaults.baseURL = apiConfig.url;
};

const AppContainer = (props: AppContainerProps) => {
    configureApi(props.apiConfig);

    return (
        <>
            
        </>
    );
};

export default AppContainer;

Collectives™ on Stack Overflow

How to create a React package with environment variables?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related