How can I set environment variables on netlify?

Question

I have a netlify react app. which is connected to my github. I'm using emailjs for receiving the messages from whoever reaches to my app.

emailjs deals with three ids 'SERVICE_ID', 'TEMPLATE_ID' and 'USER_ID'. But I don't wanna use them openly in my component js file.

Driver Function

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm(SERVICE_ID, TEMPLATE_ID, e.target, USER_ID)
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
      }, (error) => {
          console.log(error.text);
      });
  }

Answer 1

I think you're referring to environment variables, in order to test that out locally it will vary per the stack you use for creating the app, if you use react create app you can create a .env file in the root of your project and populate the values

REACT_APP_SERVICE_ID ="your_value"
REACT_APP_TEMPLATE_ID ="your_value"
REACT_APP_USER_ID ="your_value"

Don't forget to exclude this file from git, to avoid pushing secrets in your repo. to do that add this to your .gitignore

.env

After that you can call the variables in your code using the process.env like this:

process.env.REACT_APP_SERVICE_ID

Now modify the code:

  function sendEmail(e) {
   // Your code

   emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, e.target, process.env.REACT_APP_USER_ID)
   // your promise
  }

To make that work in netlify you would have to add the variable in your netlify project, follow this section to do that: https://docs.netlify.com/configure-builds/environment-variables/#declare-variables

As you noted I added the prefix REACT_APP_, this is because react create app does this:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

If you are using gatsby or nextjs the env variables naming convention might change so please be aware of that.

Answer 2

Check Adding env variables to react app

You can create a .env in your root dir and add your keys, api end points,... inside of it.

Answer 3

You can set env variables on netlify. Please have a check the below images.