Apr 14, 2022

Level 1

Pusher issues with Laravel Vapor

Hey folks,

Lately I have committed to migrating a Forge app over to Vapor. There have been a few bumps in the road though things are just about there.

One of the last issues I have left is an issue with PusherJS when the app is deployed via Vapor.

It is an intermittent problem but often after a Vapor deployment (be it via: CLI, Github Action or Vapor UI) I am greeted by a blank page and the error Uncaught You must pass your app key when you instantiate Pusher.

This is an odd one, as if I redeploy enough times eventually I can get it to "click". My theory is that the deployment is just having issues picking up my .env file correctly?

I also have a local .env file as I leverage sail for local development. Perhaps this is causing some confusion there as well? I'm not sure.

When things "click" my pusher channels and notifications work great! I just need to resolve this odd issue of the app key not being picked up on deployment. Has anyone encountered this issue before?

bootstrap.js

window._ = require('lodash');

window.Vapor = require('laravel-vapor');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

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,
    forceTLS: true
});

pusher key config in both local .env and vapor .env.dev

PUSHER_APP_ID=*******
PUSHER_APP_KEY=**********************
PUSHER_APP_SECRET=*********************
PUSHER_APP_CLUSTER=us3

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

smesj

4 years ago

Level 1

If I hard code the app key into the bootstrap.js file the issue is resolved. However I plan on having multiple environments and would need multiple app keys so this wouldn't be a long term solution.

It seems Vapor just isn't picking up the env variables correctly or that mix isn't working as I expect.

No Vapor veterans out there?

alfrednutile

3 years ago

Level 7

@smesj did you solve this?

alfrednutile

3 years ago

Level 7

@smesj did you solve this other than hardcoding

smesj

3 years ago

Level 1

Sadly I did not @alfrednutile. It was a while ago and I believe I just went in another direction (away from Vapor).

Wish I could have helped!

MariusOendaal

3 years ago

Level 1

Solved it by providing the .env file.

When deploying your code via GitHub actions, there is no .env file in your repo to be used when you build your assets. When you deploy via local command, then it use your .env.

Let me explain:

When you deploy via local command:

vapor deploy production

You will notice it creates a .vapor directory in your project. This will be an exact copy of your project, which is use to build and pushed your project to vapor. The .vapor folder also contains a copy of your .env file of your project.

So when it build your assets, example for VITE:

npm run build

The .env is found and used to build your assets.

This resolves the import.meta.env.VITE_PUSHER_APP_KEY and import.meta.env.VITE_PUSHER_APP_CLUSTER which where not populated.

When you deploy with GuthHub actions, you need provide the .env.

Here is an extract how to pull your env from vapor in your GitHub action deployment script:

      - name: Pull ENV
        run: vapor env:pull staging
        env:
          VAPOR_API_TOKEN: ${{ secrets.VAPOR_API_TOKEN }}

      - name: Move ENV
        run: mv .env.staging .env

The above snippet code should be before your vapor deployment code:

vapor deploy production --commit="${CI_COMMIT_ID}" --message="${CI_MESSAGE}"

1 like

Fewzen

3 years ago

Level 1

I have had this issue but using the encrypted env files.

Vapor does not make the encryped env files available to npm in the correct order, so I have added to my deployment process:

name: Decrypt Environment File run: php artisan env:decrypt --env=staging --force --key=${{ secrets.ENV_KEY }}

cmtinz

1 year ago

Level 1

Maybe it's late for publishing... But, at least in my case, the error was due Vapor can't work with dotEnv nested variables (as stated in the documentation). It means you must replace expressions like VITE_APP_NAME="${APP_NAME}" with their literal version VITE_APP_NAME="My app name".

Please or to participate in this conversation.