Access nuxt.js env variable in feathers client plugin in production mode

Question

I can't seem to access the process.env.baseUrl variable from the feathers client plugin. The variable returns an empty string. I can use the variable on server side. I can resolve it by hardcoding the url in env.baseUrl in nuxt.config.js, but I'd rather not. The weird thing is that it runs without any issues on a windows 10 machine in both prod and dev mode. However on Ubuntu vm in the Google Cloud it doesn't work. It also doesn't work when running from a docker container. Please advice. Am I missing something obvious?

Configuration

system

Ubuntu 16.04.3 LTS
Node 9.4.0

package.json

{
  "name": "my-app",
  "description": "",
  "version": "0.0.0",
  "main": "src",
  "keywords": [
    "feathers"
  ],
  "contributors": [],
  "bugs": {},
  "directories": {
    "lib": "src",
    "test": "test/"
  },
  "engines": {
    "node": "^8.0.0",
    "npm": ">= 3.0.0"
  },
  "scripts": {
    "build": "nuxt build",
    "dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=@feathersjs* nodemon --watch src/ --watch config/ src/index.js",
    "prestart": "npm run build",
    "start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
    "test": "mocha test/services/",
    "dev-debug": "node --inspect node_modules/.bin/nuxt"
  },
  "dependencies": {
    "@feathersjs/authentication": "^2.1.1",
    "@feathersjs/authentication-jwt": "^1.0.2",
    "@feathersjs/authentication-local": "^1.1.0",
    "@feathersjs/client": "^3.4.0",
    "@feathersjs/configuration": "^1.0.2",
    "@feathersjs/errors": "^3.2.2",
    "@feathersjs/express": "^1.2.0",
    "@feathersjs/feathers": "^3.1.1",
    "@feathersjs/socketio": "^3.2.0",
    "@nuxtjs/axios": "^5.0.1",
    "@nuxtjs/font-awesome": "^1.0.3",
    "@nuxtjs/pwa": "^2.0.5",
    "@sendgrid/mail": "^6.2.1",
    "babel-eslint": "^8.2.1",
    "buefy": "^0.6.3",
    "compression": "^1.7.1",
    "cookie-storage": "^3.1.0",
    "cors": "^2.8.4",
    "feathers-authentication-management": "^2.0.0",
    "feathers-mongodb": "^2.9.1",
    "feathers-stripe": "^0.4.1",
    "feathers-vuex": "^1.1.4",
    "helmet": "^3.10.0",
    "izitoast": "^1.2.0",
    "mongodb": "^3.0.2",
    "node-ses": "^2.1.0",
    "nuxt": "^1.4.0",
    "nuxt-stripe-module": "^2.0.0",
    "pug": "^2.0.0-rc.4",
    "serve-favicon": "^2.4.5",
    "socket.io-client": "^2.0.4",
    "vee-validate": "^2.0.5",
    "vue-bulma-rating": "^1.0.1",
    "vue-no-ssr": "^0.2.2",
    "vue-notifications": "^0.9.0",
    "vue-observe-visibility": "^0.3.1",
    "vue-smoothscroll": "^0.1.1",
    "vue-social-sharing": "^2.3.3",
    "vue-stripe-elements": "^0.2.3",
    "vue2-animate": "^1.0.4",
    "winston": "^2.4.0"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^3.1.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.1.3",
    "eslint": "^4.17.0",
    "mocha": "^4.1.0",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.12",
    "request": "^2.83.0",
    "request-promise": "^4.2.2",
    "sass-loader": "^6.0.6"
  }
}

feathers.js

import feathers from '@feathersjs/client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'

console.log('logging in the client')
console.log(process.env.baseUrl)

const socket = io(process.env.baseUrl)


const feathersClient = feathers()
  .configure(feathers.socketio(socket))
  .configure(feathers.authentication({ storage: new CookieStorage() }))

export default feathersClient

nuxt.config.js

const path = require('path');

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
  },
  loading: false,
  loadingIndicator: 'circle',
  plugins: [
    {src: '~plugins/buefy'},
    { src: '~/plugins/vue-observe-visibility' },
    { src: '~/plugins/feathers' },
  ],
  manifest: {
    theme_color: '#3B8070'
  },
  /*
  ** Modules
  */
  modules: [
    '@nuxtjs/pwa'
  ],
  rootDir: path.resolve(__dirname),
  srcDir: path.resolve(__dirname, 'client'),
  dev: process.env.NODE_ENV !== 'production',
  build: {
    vendor: [
      '@feathersjs/client',
      'socket.io-client',
    ],
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    }
  },
  env: {
    baseUrl: process.env.BASE_URL
  }
}

Answer 1

The issue is because of your build and prestart stage. When you have below package.json

"scripts": {
    "build": "nuxt build",
    "dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=@feathersjs* nodemon --watch src/ --watch config/ src/index.js",
    "prestart": "npm run build",
    "start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
    "test": "mocha test/services/",
    "dev-debug": "node --inspect node_modules/.bin/nuxt"
  },

The build and prestart are run as independent commands and they will not see the HOST=0.0.0.0 PORT=8080 NODE_ENV=production envs. So you should either do it like below

"scripts": {
    "build": "nuxt build",
    "dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=@feathersjs* nodemon --watch src/ --watch config/ src/index.js",
    "prestart": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com npm run build",
    "start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
    "test": "mocha test/services/",
    "dev-debug": "node --inspect node_modules/.bin/nuxt"
  },

Or use npm-run-all