0

Nuxt v2.15.8 on Node.js 14.21.1 on Plesk Obsidian 18.0.48

I am trying to make use of environmental variables in the nodejs module of Plesk. But it seems I cannot access the variables during build.

enter image description here

I set up a basic nuxt project with:

npm init nuxt-app

And to be able to use it with the Plesk nodejs module I used:

npm i --save nuxt-start

If I try to access these variables in nuxt.config.js, they are undefined. If I use a .env file instead, this works.

  proxy: {
    '/api/': {  
      target: process.env.WP_BACKEND_URL || 'https://fallback.domain.tld',
    },
  },

Using it in publicRuntimeConfig (also in nuxt.config.js) works fine:

  publicRuntimeConfig: {  
    wpBackendUrl: process.env.WP_BACKEND_URL || 'https://fallback.domain.tld',
  },

UPDATE 1:

Ok, I did some further testing and it looks as if it is running properly. And here is what threw me off.

During build I get the following output:

> testprojekt@1.0.0 build
> nuxt build

ℹ [HPM] Proxy created: /api/  -> https://fallback.domain.tld
ℹ [HPM] Proxy rewrite rule created: "^/api/" ~> "/wp-json/wp/v2/"
ℹ Production build
ℹ Bundling only for client side
ℹ Target: static

This shows /api/ pointing to the wrong (the fallback) url. But if I later do an axios get to this proxy, it actually points to the correct url (https://wp.domain.tld)

UPDATE 2:

Same happens here, only in this case, the URL doesn't get changed during runtime.

image: {     
    domains: [
      process.env.WP_BACKEND_URL || 'https://fallback.domain.tld',
    ]
  },

I think the custom environmental variables set via Plesk are not available during build time but during runtime. Which leads to the problems I am experiencing. If I use an .env file instead the environmental variables are available during build and runtime.

No idea how to fix this or work around it. So I guess I am back at using an .env file instead.

Vipa
  • 11
  • 3
  • Hi, I'm not sure to understand what is not working. An `.env` file is working? Since that one should be `.gitignore`'d on production anyway. – kissu Dec 13 '22 at 18:54
  • PS: you should probably bump your Node version to v16, 14 is dead now. Don't use v18 tho, there are some bugs with Nuxt2. – kissu Dec 13 '22 at 18:55
  • Hi, if I use an .env everything works fine. If I try to use Plesks custom environment variables (see screenshot) I can access process.env.WP_BACKEND_URL in public RuntimeConfig, but it is undefined in proxy. Both are in my nuxt.config.js. I guess they are accessed on different times and thats the reason I cant access it on proxy{}, But I dont really understand why – Vipa Dec 13 '22 at 19:50
  • Hmm, that one should be accessible in both locations. Do you have the same issue while running your server locally in dev mode? – kissu Dec 14 '22 at 00:56
  • I dont fully understand how Plesk passes those environment variables to my Nuxt app. If you let me know how to simulate that locally I will gladly test. – Vipa Dec 14 '22 at 12:07
  • They should be passed as with an env file, nothing special there I think. Maybe some cache or a restart needed? – kissu Dec 14 '22 at 12:36
  • I updated the initial post – Vipa Dec 14 '22 at 12:42
  • I did further testing and updated my initial post. – Vipa Dec 16 '22 at 15:33

1 Answers1

0

I've had a CentOS7 server with Plesk Obsidian, and my nuxt apps would build perfectly using the custom environment variables instead of a .env file.

But recently, I replaced the server with a newer one running Ubuntu 20.x, and Plesk can't seem to read by environment variables anymore, although I can't understand why :/

Adding the .env file to the app root allowed me to build without issues.

In any case, for nuxt 2 you have to use dotenv to access the environment variables.

// nuxt.config.js
require('dotenv').config

export default {
    proxy: {
        '/api/': {  
            target: process.env.WP_BACKEND_URL || 'https://fallback.domain.tld',
        },
    },  
}
Urb Gim Tam
  • 449
  • 4
  • 10