How do you use environment variables in a ReasonReact app?

Question

I tried adding a .env file to the root of my directory and I tried accessing the contents with

[@bs.val] external graphqlUrl : string = "process.env.GRAPHQL_URL";

but it when I Js.log(graphqlUrl); it's undefined!

.env file:

GRAPHQL_URL=https://api.example.com

How do I access it?

Thank you!

Are you using webpack? If you are, this can be configured using a plugin. https://www.npmjs.com/package/dotenv-webpack — Rem Lampa, Jun 21 '18 at 08:33
Noted sir. I'll try that out. Thanks! I'll inform you what happens afterwards. — John Paul Ada, Jun 21 '18 at 08:50
That worked sir [@RemLampa](https://stackoverflow.com/users/6625014/rem-lampa)! Thanks! — John Paul Ada, Jun 21 '18 at 08:55

score 2 · Accepted Answer · answered Jun 21 '18 at 08:59

I followed sir Rem Lampa's suggestion and installed dotenv-webpack on my project. Then I followed the instructions on the dotenv-webpack docs.

The webpack.config.js file now looks like this:

const path = require('path');
const outputDir = path.join(__dirname, "build/");

const isProd = process.env.NODE_ENV === 'production';

const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/Index.bs.js',
  mode: isProd ? 'production' : 'development',
  output: {
    path: outputDir,
    publicPath: outputDir,
    filename: 'Index.js',
  },
  plugins: [
    new Dotenv()
  ]
};

https://reasonml.chat/t/reading-env-variables-with-reason-and-or-reason-scripts/485 — armand, Jun 22 '18 at 07:20

How do you use environment variables in a ReasonReact app?

1 Answers1