Add Laravel .env variable to Vue component - laravel

I would like to get access to an .env variable using Vue JS.
In my .env file I have added the 'MIX_' prefix to the var.
MIX_VAR=key
And then in the vue component, I have in the created():
console.log(process.env.MIX_VAR);
I keep getting undefined as the result.
I have tried clearing config cache, but still getting the same issue. Any ideas?

in windows :
thats worked for me without any require in webpack.mix
... just add a new variable in env file with this prefix : MIX_
MIX_API_URL=http://laravel:8000
but need to restart php artisan serve and also restart npm run watch....
let api_url = process.env.MIX_API_URL;
console.log("my env variable:");
console.log(api_url);
in linux or docker:
i didnt use them yet

You must build your JS for the env variables to be replaced. You can do this with npm or yarn
https://laravel.com/docs/5.7/mix#running-mix

Pulled from the official docs # https://laravel.com/docs/5.6/mix#environment-variables
Environment Variables
You may inject environment variables into Mix by prefixing a key in your .env file with MIX_:
MIX_SENTRY_DSN_PUBLIC=http://example.com
After the variable has been defined in your .env file, you may access via the process.env object. If the value changes while you are running a watch task, you will need to restart the task:
process.env.MIX_SENTRY_DSN_PUBLIC
The most important thing to remember is that you have to use Laravel Mix for this to work. Mix is what is injecting the environment variable.

process.env.MIX_VAR / process.env.MIX_STRIPE_KEY
It's will work without any settings. Just run this command
npm run prod

This works for me
https://laravel.com/docs/8.x/mix#environment-variables
However, you will need to restart the task if the environment variable's value changes while the task is running:
e.g If Watch is running then re-run it.
npm run watch

Related

How to rename .env variables in package.json?

What I have
I have multiple projects using Percy for Cypress where I set the PERCY_TOKEN env variable inside the .env file. The token is different for each project. In the CI I set different env variables for each project, but locally I have to do it in the .env file. Because of this, I have to edit the .env file whenever I change between projects.
Goal
I would like to set them in the .env file this way:
PROJECT_A_PERCY_TOKEN=tokenhash1
PROJECT_B_PERCY_TOKEN=tokenhash2
So later I could rename these variables to PERCY_TOKEN, eliminating the need to constantly change the .env file.
What I tried
I'm trying to do this inside the package.json file's scripts property. Unfortunately echo $PROJECT_A_PERCY_TOKEN prints nothing. I know that I could create a shell/python/js script that parses the .env file, then passes the value back or calls npm run directly but I would like to do this without an external script.
Problem
It appears to me that I can't access the env variables inside package.json. Is there a way to rename the variable only using the npm script?
tl;dr
If the package you try to configure has the ability to do configuration via a JavaScript file, you can add the renaming at the beginning of it:
process.env.PERCY_TOKEN = process.env.CYPRESS_PERCY_SALESFORCE_TOKEN;
Explanation
While this isn't the solution I was looking for, it is a workaround for this specific use case. Percy supports JavaScript config files so I migrated my YAML config file, then I logged process.env and the .env file's variables were there, so I just need to copy the correct one. This might work for other packages that support JavaScript config files (or some alternative kind of hook/preloader where custom code can be placed), but if they don't, then the question is still unanswered.

Create React App env variables undefined when using Craco build in Heroku

I'm deploying an Express app (Node.js/React) to Heroku and have set my env vars in Heroku using the config vars in Settings in the Heroku Dashboard. On the server side, I can access them using process.env without any problems. However, in my client, my process.env vars are returning undefined.
I have prefixed them with REACT_APP, and the issue seems to be related to the craco build script in my client/package.json that is called during the build stage of the Heroku deployment. If I set this to react-scripts build, the environment variables behave as expected, however, my TailwindCSS config then fails.
I can also have a .env file in the client, but I need different values depending on the stage of the Heroku pipeline, and NODE_ENV is always "production" once deployed to Heroku so I can't think of a way to have different values depending on the stage.
Is there a way for craco build to get the REACT_APP vars from the Heroku config vars during deployment in the same way react-scripts build does?
There is a npm package specifically build to use .env variables with craco: https://github.com/djdmbrwsk/dotenv-cra

Laravel on AWS: APP_DEBUG not respected

I initially deployed my Laravel app with APP_DEBUG set to true, but now we're in production I don't want it to whoops! every time there's an error.
I've changed the contents of our EB .config file so that APP_DEBUG: false and I can see the change in Elastic Beanstalk's environment properties:
But Laravel itself is still dumping everything to the screen when there's an error.
I've tried ssh-ing into our server and running php artisan config:clear to see if it was that, but it still didn't work.
I don't understand why Laravel isn't respecting the updated configuration on deployment. Can anyone explain the logic here?
Update: I updated the security settings on the instance and noticed that it was giving our custom error screen. Can anyone explain what happened? Was restarting the server after running php artisan config:clear what did it?
I had issues like this before where I changed something in the console's environment properties which did not correspont with what I got using tinker. You can find the env file on your instance here:
/opt/elasticbeanstalk/deployment/env
if you open the file you see that variables set in .env are not quoted so if you have a password with for example a hashtag or a name with spaces it can result in unintended problems.
I would suggest to stop using environment variables via .yaml config files and start deploying your .env to the elastic beanstalk S3 bucket and fetching it on deployment. This will result in you having more control over the content of the file.
Example of this can be found here:
https://github.com/rennokki/laravel-aws-eb/blob/master/.ebextensions/00_copy_env_file.config

Using environment variables

I have a sapper project which contains various database secrets and such... So for local development I want to load a .env which contains the secrets. I am aware of dotenv. How do I use dotenv to load the .env file only on my local machine and not on my deployment in cloud run.
Add .env to your .gitignore file.
This way, it won't get deployed to the cloud when you do a git push.
Then go into your cloud provider and set your production environmental variables.
Rather than using the dotenv package you can use the dotenv-cli. You install it globally and modify the dev npm command and prefix it with dotenv. The cli will locate the .env file and then run the sapper dev command with the environment variables set.
Add another command for production without the dotenv prefix so it uses the environment variables on the machine.

getenv not working in EC2 Server

I'm trying to deploy to production my app that is working well in local.
Thing is when try:
dd(getenv('APP_ENV'));
it returns "false"
but when I connect ssh and type:
php artisan env
I get
production
Any idea why it stopped working???
For the record, In production, my deploy script execute 3 commands:
composer dump-autoload -o
php artisan route:cache
php artisan config:cache
I mention it because it is possibly the only software config that is different.
EDIT: I identify that the problematic command is:
php artisan config:cache
If if do:
php artisan config:clear
problem is solved.
Tx!
When using a cached config the .env file is not used anymore so getenv is useless, because the config is loaded from:
bootstrap/cache/config.php
Instead you can get the current environment from the loaded application configuration like so:
config('app.env');
Or directly using the app helper function:
app('env');
As a third option you can always use the environment method to get the current environment:
app()->environment(); // or App::environment()
Laravel uses the dotenv library internally to load the configuration keys from the .env file and add them to the environment variables using putenv, but when you cache your configuration that loading part is not done anymore because Laravel detects that there is a cache file present and uses that instead, so those keys from .env are not loaded into the environment, this not accessible via getenv.
And because configuration values from the .env file are only cached when they are used in an actual configuration file from the config directory, you need to create a configuration option for them to be cached and accessible when you're using the cache.
So if you want to have a BASE_URL key in your .env file with this value:
BASE_URL=http://domain.com/
If you want to be able to access its value when the configuration is cached, you need to use it in a configuration file. For example, you can add it to your config/app.php file like so:
'base_url' => env('BASE_URL')
Then you can access even when the configuration iit using:
config('app.base_url')
You can read more about accessing configuration values in the Laravel Documentation.

Resources