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 missi

Answer 1

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.