accessing .env variables in vue3 using vite - vuejs3

I'm trying to pull a key from .env in my vue3 page. I've read the instructions at https://vitejs.dev/guide/env-and-mode.html and I can get VITE_PUSHER_SCHEME using:
console.log(import.meta.env.VITE_PUSHER_SCHEME);
The same doesn't work for VITE_STRIPE_KEY, which I assume means that my .env is cached somehow, so that my changes aren't being reflected. I've tried php artisan config:clear and php artisan cache:clear to ensure it's not cached, but I still get undefined for import.meta.env.VITE_STRIPE_KEY.
My .env includes:
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
VITE_STRIPE_KEY=stripe_key
My vue file has:
console.log(import.meta.env.VITE_STRIPE_KEY);
console.log(import.meta.env.VITE_PUSHER_SCHEME);
How can I refresh my .env file properly so that it's accessible in vue?

Finally, quitting npm and running npm run watch again fixed the problem.

Related

How to set environment variables with Prisma, Nextjs, and Vercel

Nextjs wants you to use a .env.local file to store env vars.
Prisma uses .env
If I use a .env.local file then setting up the Prisma db
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
I get a DATABASE_URL does not exist error.
What's the right way to set up env vars for a Prisma, Nextjs, Vercel app?
You can use dotenv-cli to force loading specific environment file.
1- Install dotenv-cli package
2- create script to run env before prisma migration on your package
"scripts": {
...
"prismaDev": "dotenv -e .env.local prisma migrate dev ",
}
3- now you can simply run npm run prismaDev
You can load environment variables with process.env.DATABASE_URL in your case and you can leave it in .env as Prisma asks for. Nextjs can handle multiple .env files without any extra effort.
No need to use an extra package, Nextjs will handle the env vars for you.
https://nextjs.org/docs/basic-features/environment-variables
You can leave the standard setup and use the created .env file (by the prisma cli:
https://www.prisma.io/docs/getting-started/setup-prisma) and add your connection string.
the rest is magically handled by next.
Be sure to follow the instructions (manual or cli pointers) regarding gitignore and such..
To reiterate: both can live next to each other! Check the next documentation for load order if it matters. (see link above)

Put environment in prod and remove the profiler Symfony 4

I am putting my website in production, but I have a problem with the environment.As you can see in the screenshot below, the site remains in "dev" mode
However, I already modify my .env file as follows:
APP_ENV=prod
APP_DEBUG=0
APP_SECRET=secretthings
#TRUSTED_PROXIES=127.0.0.1,127.0.0.2
#TRUSTED_HOSTS=localhost,example.com
###< symfony/framework-bundle ###
should I change another file or do something else so that my site is finally operational?
Thank you for your answers
Did you try to clear your cache?
Move to your project and type php bin/console cache:clear. You can also pass the enviroment you want to clear with php bin/console cache:clear --env=prod. Use dev or prod as your parameter.
Edit: If you have a .env.local file - you need to change your enviroment there.
After you update your .env file you should run composer dump-env prod to compile your environment file for production use.

Vue firebase hosting environment variables

Currently in my dev environment i have my .env.development file with my firebase environment variables stored as:
VUE_APP_FB_API_KEY='abc123000123',
VUE_APP_FB_AUTH_DOMAIN='site.firebaseapp.com',
etc...
This works fine for my dev machine but once i deploy this to firebase hosting it breaks and throws console errors that the various options are not configured. I tried adding them with
firebase functions:config:set env.VUE_APP_FB_API_KEY='abc123000123'
but this is still not working for me.
What is wrong here? Also per the docs upper-case characters are not allowed..
When you run on local, vue-cli will read .env.development config file. But when you build for production, it will use production mode and will read .env file.
You should copy .env.development to .env then build and deploy again.
Or you can create .env.production file, which is only used for production build.
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
You can read more about the enviroment variable and build mode in vue-cli official document.

Symfony assetic issue file does not exist

I tried to resolve my problem all this morning but I didn't find the solution anywhere.
I have a Symfony project and I use Assetic for my css and js files.
Till today when I ran php bin/console assetic:dump --env=prod, it worked fine.
But now I have this error :
[Symfony\Component\Config\Exception\FileLocatorFileNotFoundException]
The file "C:\wamp\www\PLIE08\app/config/config_=prod.yml" does not exist.
I don't understand why it adds = in my file.
Moreover, after running this command I realized that a folder called "=prod" is created in var/cache in addition to the dev and prod folder.
I tried to update, install composer, clear the cache, look in config file if something was wrong but I'm still blocked...
Somebody can tell me why it searchs the bad file ?
Thanks
try this command bin/console assetic:dump -e prod to verify duplicated =. Otherwise remove the entire content of the cache/prod folder, doest not clear:cache, remove all manually.

How to get assetic to update assets in dev enviroment in symfony2?

I have the issue that my assets, e.g. my sass and javascript, did not recompile on file modification. I installed I accessed them via symlink option and access the dev environment via localhost:8000. I have to manually call /app/console assetic:dump for them to update.
How do I get assetic to watch for file modification?
You can also use
php app/console assetic:dump --watch
If you want to watch for file modifications. This will re-run assetic:dump in the background automatically for you.
And yes dont forget if you use dev then access your site via app_dev.php
And small note... when you use production environment then make sure you execute assetic:dump with --env=prod (without --watch as well)
I realized I have to access the dev page with app_dev.php:
localhost:8000/app_dev.php/
Try to execute:
php app/console assetic:dump --env=dev

Resources