Pusher referencing development app key in production

Question

I've been trying to diagnose an issue with pusher not working on production, when it works fine locally. This morning I discovered after tinkering around in the console, that when I do this on production:

Echo.private('App.Models.User.1');

I get this output:

which is the key from my development .env file:

PUSHER_APP_KEY=f9d9********011e

My production key shown in pusher is:

key = "07ae********2d4"

My production .env file also references this correct production key:

PUSHER_APP_KEY=07ae*********2d4

HOWEVER, that is NOT what's actually being used by the production application (see prior screenshot).

I'm not doing anything different from the "stock" implementation of importing pusher in my bootstrap.js file:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

After searching my codebase, I found that the key gets hard-coded into the public/js/app.js file when you run npm run dev locally. I verified this by changing the key in my .env file and running npm run dev which then updated the key reflected in the app.js file.

I then went out to my production site's FTP and downloaded the app.js file, and sure enough, the development key is hard-coded in the app.js file.

If I update the app.js file to reflect the correct key, and then run Echo.private('App.Models.User.1'); again, this is the output, which shows the correct key:

And also, notifications start working as expected after making that change. However, that's obviously problematic as every time I deploy, it will be overwritten by the dev value.

Could it be my build process? (also see this SO question I asked yesterday)

What the actual *** is going on here?

I've not had any other issues with npm not building things correctly (that I'm aware of), but it seems that the code in my app.js file must be getting generated via the .env file and somehow my production environment is not referencing the correct key?

Here are some details around my build process (I use Github Actions).

Here is my github actions .yml file:

    steps:
      - name: Set up MySQL
        run: |
          sudo systemctl start mysql
          mysql -e 'CREATE DATABASE testdb;' -uroot -proot
          mysql -e 'SHOW DATABASES;' -uroot -proot
      - uses: actions/checkout@main
      - name: Copy .env
        run: php -r "file_exists('.env') || copy('.env.example', '.env');"
      - name: Install Dependencies
        run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress
      - name: Generate key
        run: php artisan key:generate
      - name: Directory Permissions
        run: chmod -R 777 storage bootstrap/cache
      - name: Clean Install
        run: npm ci
      - name: Compile assets
        run: npm run prod
      - name: Execute tests (Unit and Feature tests) via PHPUnit
        run: vendor/bin/phpunit

from my package.json file:

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

UPDATE:

My public folder, and in turn my public/js/app.js file is getting pushed to source control. I just deleted it from my repo and pushed the code to production, and now I'm getting a jquery not defined error, which tells me that the app.js file isn't getting re-created during my build process.

UPDATE:

My .env file is not in source control, so the github action is using .env.example which has the variables but no values, and has a couple of other "mix" variables, which may be the problem.

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

as mentioned earlier in the question, my bootstrap.js file is referencing those 2 MIX_PUSHER_* variables:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

I guess I need to set up a github environment variable for the app key for each environment?

UPDATE:

I found this SO answer that details how to create a github secret and basically put your whole environment file in it, but it's saying it's an invalid:

The environment file is invalid!
Failed to parse dotenv file. Encountered unexpected whitespace 

Answer 1

The problem occurs from your js. It seems that you are using the development env in your js for production. Make sure that you are compile your js files for production in your live environment.