True ENV Values in Laravel Mix

Question

So in Laravel Mix it says in the docs we can add stuff to our .env file prefixed with MIX_ and we can then access it in our JS file when compiled.

I think I may be missing something here though because this doesn't really offer anything along the lines of an env file as the assets are compiled into production mode locally before you push them up to your server. That means the npm run watch and npm run build will both pick up the same env values right?

It works as a kind of global variable thing but not as an environment variable as you can't set the value depending on what the environment is,

This seems kind of obvious so I assume I missing something ??

Answer 1

@Ohgodwhy's answer works, but need slight modification for new mix version

require('dotenv').config()
let webpack = require('webpack')

let dotenvplugin = new webpack.DefinePlugin({
    'process.env': {
        APP_NAME: JSON.stringify(process.env.APP_NAME || 'Default app name'),
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
})

mix.webpackConfig({
    ...
    plugins: [
        dotenvplugin,
    ]

Answer 2

You can do it like this:

Setup steps:

1. npm install dotenv --save
2. Add require('dotenv').config() at the top of your webpack.mix.js file
3. add let webpack = require('webpack') after #2

Now you can inject these into your build by using the DefinePlugin in your mix declaration:

mix.webpackConfig({
  //...
  new webpack.DefinePlugin({
    'process.env': {
      APP_NAME: JSON.stringify(process.env.APP_NAME || 'Default app name'),
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  })
})

Now your bundled files can use process.env.APP_NAME, for instance, in the application. This safe guards you from exposing your .env file to the browser but allows you to easily share global, insecure values through the full stack.

Notes

Note that the process.env does not get replaced with the .env from Laravel, but rather it exposes it through a merge. Therefore if you are passing, for instance, arguments to npm/yarn run dev (such as NODE_ENV=development), then you do not need to declare NODE_ENV in your .env file. If you do, the .env file will take presedence.