Solution

Since the purpose of configuration variables in the Heroku application is precisely that, avoid pushing a.env to Heroku. It also implies that you are storing sensitive values in .env file within your GIT repository, which is something you should not be doing.

Let us define it with an example; If you look in your bootstrap.js file, you’ll also notice it’s referencing environment variables with a VITE_* prefix, i.e. VITE_PUSHER_APP_KEY. So while you are (correctly) setting config vars for Pusher (PUSHER_APP_ID, etc) you still need to select the equivalents with the VITE_* prefix.

If you haven't already, you should also include the nodejs build pack in your application. This is something you should add in addition to the PHP build pack. Upon deployment, Heroku will execute your npm run build command, which will generate your JavaScript files based on the configuration variables in your Heroku application, rather than the values from the previous location (presumably your computer or nowhere at all).

To summarise:

1. Delete any files ending in.env from your repository: git rm -f.env

2. To your Heroku app, add the node.js build pack.

3. If you've begun tracking assets, remove them: execute git rm -rf public/hot && execute git rm -rf public/storage

4. To ignore the aforementioned files, add new lines to your.gitignore file.

5. Add config vars to your Heroku app for:

• VITE_PUSHER_APP_KEY

• VITE_PUSHER_APP_CLUSTER

• VITE_PUSHER_HOST

• VITE_PUSHER_PORT

• VITE_PUSHER_SCHEME

6. Commit and push. Heroku should now run npm run build when deploying.

Answered by:>> >Martin Bean

Credit:>> >StackOverflow

Blog Links: 

>How to manage the Text in the container in Django?

>Fix webapp stops working issue in Django- Python webapp

>Creating a form in Django to upload a picture from the website

>Sending Audio file from Django to Vue

>How to keep all query parameters intact when changing page in Django?

>Solved: TaskList View in Django

>Implement nested serializers in the Django rest framework