How to get BACKEND_URL from environment variable in saleor storefront

Question

Saleor Storefront using EnvironmentPlugin of webpack
Like
new webpack.EnvironmentPlugin(["npm_package_version", "BACKEND_URL"])
My .env file

# .evn
npm_package_version = 6.4.1
BACKEND_URL = https://demo.getsaleor.com

In my Index file

console.log("env",process.env.BACKEND_URL) is undefined

On start project as development Log

WARNING in EnvironmentPlugin - BACKEND_URL environment variable is undefined.

I set Default value like this
new webpack.EnvironmentPlugin({'BACKEND_URL': 'https://demo.getsaleor.com'})

This is working fine but i need to get value from .env file
Please help me solve this problem

Answer 1

.env files are not picked up by themselves. You need to use a package in order to specify the file in which you've defined your environment variables.

You can use dotenv for nodejs and DotenvPlugin for webpack in order to expose your environment variables through .env file.

DotenvPlugin for webpack

dotenv package for nodejs

Hope this helps. Happy coding !