Setting environment variables

Hello,
I'm using the React version of Metronic Theme (Demo 8) and I couldn't change the base API URL.

I added an .env file and added the 'REACT_APP_THEME_API_URL' variable in to it, but the requests are still sent to 'http://localhost:3000/undefined/'.

I'm not sure why it's happening and how can I set environment variables.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (11)

Have somebody faced this issue? I'm still looking for a solution...

Hi Tamir,

Could you please show what is your current REACT_APP_THEME_API_URL variable value?

If you have set your value correctly, then in your files you can refer to this variable with process.env.REACT_APP_THEME_API_URL.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,
The current REACT_APP_THEME_API_URL is undefined. I don't know how to set a value.

I tried creating an .env file, but it's still undefined.

Hi,

You have to create .env file and inside this file include a variable with name REACT_APP_THEME_API_URL and set value of your API URL.

REACT_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api

You can refer to .env file in the default Metronic package.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,
As I mentioned before, I already created the .env file and it's not working. I set the REACT_APP_THEME_API_URL variable and it's still being undefined.

Hi,

If you have already set this variable then you should be able to access this variable in your files using process.env.REACT_APP_THEME_API_URL.

As you might see we have two API URLs in .env, the first is for authentication and the second is for users crud applications, make sure that you have replaced both variables or have updated a reference to those variables.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
I can't find the default .env file in the demo1 directory.

Where can I find it?

Hi,

It should be included inside a demo folder.

Which Metronic version are you using?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I just downloaded the latest demo8 and demo1 React folders, and both doesn't include .env file.

Hi,

.env files usually are hidden by default, to view them you can open a project in your code editor program or configure your finder to show hidden files or view them in terminal with command ls -a.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

.env
PORT=3011
REACT_APP_BASE_LAYOUT_CONFIG_KEY='metronic-react-demo6-8120'
REACT_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
REACT_APP_VERSION=v8.1.5
REACT_APP_THEME_NAME=Metronic
REACT_APP_THEME_DEMO=demo6
REACT_APP_BOOTSTRAP_DOCS_LINK=https://getbootstrap.com/docs/5.0
REACT_APP_SASS_PATH=src/_metronic/assets/sass/core/components
REACT_APP_SASS_VARIABLES_PATH=src/_metronic/assets/sass/core/components/_variables.scss
REACT_APP_PURCHASE_URL=https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469
REACT_APP_PREVIEW_URL=https://preview.keenthemes.com/metronic8/react/demo6/
REACT_APP_PREVIEW_REACT_URL=https://preview.keenthemes.com/metronic8/react
REACT_APP_PREVIEW_DOCS_URL=https://preview.keenthemes.com/metronic8/react/docs
REACT_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(