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.
I am trying to deploy my next.js file to firebase.
The command firebase deploy --only hosting works, but the deployed file is not built in the file of next.js.
I tried this:
I edited package.json, script.build setting next build into next build && next export
thus the /out folder was automatically created.
I set the /out folder as the public directory and then executed firebase deploy.
Here is the guide I used:
https://medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04
Obviously this failed. That is why I am asking for help.
When I edit index.html in the /out file and then deploy, it is successfully deployed.
Here is the picture:
I am expecting that the problem is on building the next.js file.
Is there anyone that knows what to do in order to build it successfully?
I use next-auth to made a session, and deploy with firebase.
In local, I confirmed next-auth basepath changed,.
But after deploy, next-auth basepath don't changed.
The basepath is always "https://localhost:3000"
I think the firebase don't recognized the .env file.
I made the .env file in /root and /root/functions.
How can I fix the error?
It's my .env file
NEXTAUTH_URL="my deployed url"
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.
I was stepping through this tutorial:
https://codelabs.developers.google.com/codelabs/firebase-web/#0
On step 9 it asks you to execute firebase deploy but when I try to do it I get the error message:
Could not read public directory. Remove links and shortcuts and try again.
I don't know what it means by links and shortcuts as far as I can tell there nothing in this folder but plain old files.
The folder I'm trying to deploy is the web folder which should contain the completed sample.
Note that as per the instructions the storage.rules was updated with the name of the bucket and the index.html was updated with the firebase snippet.
The firebase.json file looks like this:
{
"database": {
"rules": "database-rules.json"
},
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"database-rules.json",
"storage.rules"
]
}
}
Any ideas as to what this error could be? Is there any way to get more detailed information?
You should use debug command like this: firebase deploy --debug , this can help you find out what cause this problem easily and clearly.
In my case a temp emacs file was causing the issue:
$ firebase deploy
=== Deploying to 'xxxx-42402'...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing public directory for upload...
Error: Could not read public directory. Remove links and shortcuts and try again.
RooseveltPwnsU:xxxx xrdawson$ ls -la public/
total 3840
-rw-r--r-- 1 xrdawson staff 5122 Feb 13 12:52 #index.html#
drwxr-xr-x 15 xrdawson staff 510 Feb 13 14:40 .
lrwxr-xr-x 1 xrdawson staff 35 Feb 6 14:12 .#index.html -> xrdawson#RooseveltPwnsU.local.67168
Saving the file index.html inside emacs resolved the issue for me!
The problem was firebase-debug.log
The issue turned out to be unrelated to the configuration. The issue actually turned out to be a file permission issue with firebase-debug.log. I solved the issue by copying everything but that file into a new folder and deploying the new folder.
How I found out
Since there is no way to tell that's the issue from the error message above. I thought it would still be useful to walk you through the process I used to uncover the issue.
Windows 10
First I want to mention that I'm on a Windows 10 computer, I don't know if that's relevant, but just in case it is I thought I'd mention it.
1. Compare to a working project
In order to have a baseline / frame of reference, I created a new project using the firebase init command.
I then tried to deploy that. That was successful, so I knew deployment in general worked.
2. Use the same firebase.json
I then took the auto generated firebase.json file from the working deployment folder and replaced the firebase.json file in the project folder where the deployment wasn't working.
When I tried to deployed it still didn't work.
3. Remove permissions
At this point I suspected it was a permission issue. So I decided to zip up the folder and then unzip it to a different folder. Then try to deploy the new folder.
The theory being that the permissions would be wiped out in the process.
When I tried to zip the file I got a file permission error message. The name of the file with the issue was firebase-debug.log. That's the file that automatically generated when you try to deploy.
firebase-debug.log is automatically generated by the firebase deploy command
So instead of zipping and unzipping I just copied all the files except firebase-debug.log and tried to deploy that.
Success
It worked!
Still haven't figured out how to actually delete that damn file though.
After a rough search with no solution, I tried npm i then firebase deploy. Yay! it works.
I had this problem and in my case it was firebase serve that was locking the file. Stopping that process allowed the firebase deploy to run successfully.
I suspect its actually because two separate instances of firebase are trying to write to the same log file and serve holds a lock while running.
I just deleted the firebase-debug.log file and entered the following command:
firebase deploy --only funtions but firebase deploy will also work.
in my project i needed to deploy, but if you need to test locally try firebase serve or firebase serve --only functions or firebase serve --only functions,hosting based on your needs.
There's a possibility that you are in /functions when you want to deploy. In my case I run the firebase deploy --only functions:FOOBAR command in root (out of functions) folder and it worked.
Deleting node_modules and package-lock.json and rerunning npm install fixed the problem for me.