How to create a .env with with the apikey of openai in a react app?

Question

I have a page in a react.js app calling the api of openai and it works locally when I have the actual apikey in the page but I have been trying to create the.env and I have not figure it out. This is what I have

import React from "react";
import { Component } from "react";
import { Container, Form, Button, Card } from "react-bootstrap";

const {Configuration, OpenAIApi } = require ('openai');
const configuration = new Configuration({
    apikey: process.env.REACT_APP_OPENAI_API_KEY
          });
const openai= new OpenAIApi(configuration)
.....

If I have the actual apikey instead of 'process.env.REACT_APP_OPENAI_API_KEY' it works. I created a.env file with REACT_APP_OPENAI_API_KEY= 'the actual key' no luck,

Any suggestions, thank you, Marlon

Answer 1

Make sure the.env file is in your root directory. Also, you must restart the server after you create or change the.env.

Answer 2

Make sure when you write in your env file with no space and quote"" like this:

REACT_APP_OPENAI_API_KEY=youropenaiapikeyhere

and restart your app.