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

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

CodePudding user response：

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

CodePudding user response：

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.