After unaliasing my "default" project, Firebase still uses it:
> firebase use --unalias default
Removed alias default
Run firebase use --add to define a new project alias.
> firebase deploy
=== Deploying to 'myproject0'...
My code base is deployed on multiple projects that I use as separate environments. I would like to explicitly specify the project for all my Firebase CLI commands to avoid messing with production or staging environments.
Is it not possible to unalias the default project?
Am I doing it wrong?
My .firebaserc is successfully updated:
{
"projects": {
"production": "myproject0",
"test": "myproject-test"
},
"targets": {
"myproject0": {
"hosting": {
"superadmin-webapp": [
"superadmin-myproject0"
],
"client-webapp": [
"myproject"
]
}
}
}
}
Related
Getting an error when deploying to firebase. I manually edited .firebaserc file to add other projects.
$ firebase deploy --project staging --only hosting:admin
⚠ JSON error trying to load /some/path/to/.firebaserc
.firebaserc
{
"projects": {
"production": "myapp-8879",
"staging": "myapp-c8499"
},
"targets": {
"myapp-8879": {
"admin": [
"admin-app"
],
"app": [
"myapp-8879"
],
},
"myapp-c8499": {
"admin": [
"admin-app"
],
"app": [
"myapp-c8499"
]
}
}
}
To solve this problem, JSON error trying to load /some/path/.firebaserc you must make sure JSON format is correct.
.firebaserc
There is an extra comma, so firebase deploy will throw an error.
If you manually edit your .firebaserc on VSCODE then just change the Language Mode to JSON or use any online json formatter tool.
I have a Firebase project that uses the realtime database, and I'm trying to set up the local emulator for testing. Unfortunately, it seems that the Firebase-cli is ingoring my database.rules.json file. This happens even after creating a test project to solve this specific problem.
Let me give you some info about my setup.
I created a Firebase project with nothing enabled. I created an empty directory on my local machine and ran firebase init database. Doing that created a few files:
.firebaserc
{
"projects": {
"default": "emulators-test-244be"
}
}
firebase.json
{
"database": {
"rules": "database.rules.json"
}
}
database.rules.json (I modified the rules here to lock down the database)
{
"rules": {
".read": false,
".write": false
}
}
When I run the emulator using firebase emulators:start --only database, the console tells me that the database successfully initializes. However, when I visit http://localhost:9000/.inspect/coverage?ns=emulators-test-244be to view the currently loaded security rules, it gives the following output:
{
"rules": {
".read": true,
".write": true
}
}
Obviously, this directly contradicts the rules I have set in the database.rules.json file.
One thing I did notice, is that if I modify the database.rules.json file while the emulator is running, I get the following output from the console:
i database: Change detected, updating rules for undefined...
Apparently, doing this causes the emulator to create a new database called undefined. When I go to http://localhost:9000/.inspect/coverage?ns=undefined, the output correctly reflects what I have set in my database.rules.json file.
Why is this happening? Am I incorrectly setting up my local Firebase project? Or is there a bug in the Firebase CLI? I've scoured the Firebase docs, Stack Overflow, and Google. I haven't found anything.
I have firebase tools version 8.4.3.
UPDATE
After searching through the issues on the firebase-tools GitHub repo, it seems that this is a bug.
Link here:
https://github.com/firebase/firebase-tools/issues/2371
This workaround worked for me:
.firebaserc
{
"projects": {
"default": "emulators-test-244be"
},
"targets": {
"emulators-test-244be": {
"database": {
"default": [
"emulators-test-244be"
]
}
}
}
}
firebase.json
{
"database": [
{
"target": "default",
"rules": "database.rules.json"
}
],
"emulators": {
"database": {
"port": 9000
},
"ui": {
"enabled": true,
"port": 4000
}
}
}
When I start the emulator with firebase emulators:start and visit: http://localhost:9000/.inspect/coverage?ns=emulators-test-244be I get the rules specified in my database.rules.json file.
Hope it also works for others with this problem.
I´m trying to deploy my code to two different Firebase-projects, one for development and one for production.
The my-app-dev project was already included and working, so I added the my-app (for production) with firebase use --add and selected the my-app.
This is how my Firebase-config looks now:
.firebaserc
{
"targets": {
"my-app-dev": {
"hosting": {
"app": [
"my-app-dev"
]
}
}
},
"projects": {
"default": "my-app-dev",
"prod": "my-app"
}
}
firebase.json
{
"hosting": [
{
"target": "app",
"public": "dist/app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
As long as I deploy to my default project, everything works fine, but when I try to firebase deploy -P prod it shows the following error:
Deploy target app not configured for project my-app. Configure with:
firebase target:apply hosting app <resources...>
I tried to find some more information about this command, but still don´t know what to put for resources. Overall I feel like the .firebaserc has a very confusing structure.
I had the same problem but in a different fashion.
The project I have is an Angular 11 project, which has 4 different environments - the same behaviour of deploying to the default project (env) was fine but as soon as I tried to deploy to a different environment (firebase project), it failed with the same error:
Deploy target ___ not configured for project ___. Configure with:
I resolved this by adding to my .firebasesrc > targets:
{
"projects": {
"default": "default-project"
},
"targets": {
"default-project": {
"hosting": {
"frontend": [
"default-project"
]
}
},
"staging-project": { // Added this entry.
"hosting": {
"frontend": [
"staging-project"
]
}
}
}
}
According to this comment in GitHub it cannot be done without a "hacky" method like swapping the firebase.json programmatically during deploying.
Right now the Firebase CLI is built to treat projects as anonymous
environments that are functionally identical. This is important to be
able to deploy the same assets to multiple projects without having to
alter the code (including in firebase.json).
To achieve what you want, you'll need to set up a dev and prod folder,
each with their own firebase.json and each with a target only for that
specific project. Deploying different assets to different projects is
not supported now and is unlikely to be supported in the future
(however, we may allow configuring the location of firebase.json via a
flag at some point).
Update: My approach to use 2 folders: functions and src in not working. I started to use another approach when folder for firebase functions is located inside of the src folder. This approach is implemented by winzaa123 user: winzaa123/nuxt2-vuetify-ssr-on-firebase and I could launch it on my Google firebase.
My Steps: Preparation of the project from scratch
Create a Nuxt app inside of the src folder:
Create a Nuxt app in src folder with create-nuxt-app src
Choose the package manager Npm
Choose UI framework Vuetify.js
Choose rendering mode Universal (SSR)
Create a Firebase Project
Create a Firebase project with firebase init
Select Firebase Hosting, Firebase Functions, Firebase Firestore, Firebase Storage, Emulators
Use public directory? (public)
Configure as a single-page app (y/N) - Yes
Create a package.json file in the root folder
{
"name": "test-nuxt",
"version": "1.0.0",
"description": "My fine Nuxt.js project",
"author": "Alex Pilugin",
"private": true,
"scripts": {
"postinstall": "cd functions && npm install",
"dev": "cd src && npm run dev",
"start": "cd src && npm run dev",
"serve": "NODE_ENV=development firebase serve",
"build": "cd src && npm run build",
"build-deploy": "firebase deploy --only hosting,functions",
"build-deployf": "firebase deploy --only functions",
"build-deployh": "firebase deploy --only hosting"
},
"dependencies": {
"nuxt": "^2.0.0"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.0.0"
}
}
Edit firebase.json file
{
"functions": {
"source": "functions",
"predeploy": [
"rm -rf functions/nuxt && npm --prefix src run build && mkdir -p functions/nuxt/dist && cp -r src/.nuxt/dist/ functions/nuxt/dist && cp src/nuxt.config.js functions/"
]
},
"hosting": {
"public": "public",
"predeploy": [
"rm -rf public/* && mkdir -p public/_nuxt/ && cp -r functions/nuxt/dist/client/ public/_nuxt/ && cp -a src/static/. public/"
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "nuxtssr"
}
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"storage": {
"rules": "storage.rules"
}
}
You can see that I plan to copy content of the src/.nuxt/dist/client into the public/_nuxt folder.
I am doing it since I found "publicPath": "/_nuxt/" inside of the src/.nuxt/dist/server/client.manifest.json
Nest Step is editing of the functions/index.js file
const functions = require('firebase-functions');
const { Nuxt } = require("nuxt");
//const { Nuxt } = require("nuxt-start");
const config = {
ssrLog: true,
dev: true, // Don't start in dev mode.
debug: true, //<----------------------- Debug logs
buildDir: "nuxt",
build: {
//publicPath: ''
//publicPath: '/_nuxt/', //Default: '/_nuxt/' <-- content of .nuxt/dist/client
/*
** You can extend webpack config here
*/
extend ( config, { isDev, isClient, isServer } ) {
if ( isServer ) {
config.externals = {
'#firebase/app': 'commonjs #firebase/app',
'#firebase/firestore': 'commonjs #firebase/firestore',
//etc...
}
}
}
}
}
const nuxt = new Nuxt(config);
let isReady = false;
async function handleRequest(req, res) {
console.log("nuxtssr is running...");
if (!isReady) {
console.log("isReady: " + isReady);
try {
console.log("waiting for nuxt.ready().......");
isReady = await nuxt.ready();
console.log("nuxt is ready");
} catch (error) {
console.log("ERROR.....................");
console.log(error);
//throw new functions.https.HttpsError('error in Nuxt', error);
process.exit(1);
}
}
console.log("waiting for nuxt.render().......");
/*
* res.set('Cache-Control', 'public, max-age=1, s-maxage=1');
* await nuxt.render(req, res);
*/
res.set("Cache-Control", "public, max-age=300, s-maxage=600");
return new Promise((resolve, reject) => {
console.log("before nuxt.render......");
nuxt.render(req, res, promise => {
console.log("inside nuxt.render......");
promise.then(resolve).catch(reject);
});
});
}
exports.nuxtssr = functions.https.onRequest(handleRequest);
I use $ npm start to launch the application locally:
Nuxt.js v2.12.2
Running in development mode (universal)
Listening on: http://localhost:3000/
I deploy the application using $ firebase deploy command but I cannot see any Frontend. My application is hanging.
From my understanding, firebase hosting is only for static files. If you're trying to do SSR, that implies that there's a server running and some processing happening on the server side. You may need to deploy this to Google Cloud Functions as a "serverless" app. Take a look at this tutorial for an example.
That said, I'm not super familiar with Nuxt, but I can see two things you potentially need to do differently if you are, indeed, deploying to the correct place.
First, the hosting.public property in firebase.json should be the path to the folder that contains your built project. Since you've said your project is being built in public/_nuxt, you might need to change this property to match, i.e. in firebase.json have
{
...
"hosting": {
"public": "public/_nuxt",
...
},
...
}
For what it's worth, in regular (i.e. non-Nuxt) Vue projects, the project gets built in the dist/ folder, so in my firebase.json file I have "public": "dist". That said, I haven't ever hosted a Nuxt SSR project on firebase so this may not be how it is structured.
Second, you likely need to run nuxt build or nuxt generate before you run firebase deploy so that the project is built to the target directory. The firebase deploy command really is just a fancy way to upload files onto Google's platform.
Hope this helps!
I have scaffolded AspNetCore Angular 6.0 SPA template from cli and then installed npm package accordingly.
However when i try to run the project dotnet run it does not start rather prompted with and error. I have captured a screenshot for your reference. I am not sure whether it is something to do with angular.Json file or else!!! Any idea..
Error:
Unknown option --extractCss
This is because the ng serve command no longer supports --extractCss option
Open package.json. You'll find
{
"scripts": {
"start": "ng serve --extract-css" // Please remove the --extract-css
// ...
}
}
remove the --extract-css from start scripts.
It'll be now
{
"scripts": {
"start": "ng serve"
// ...
}
}
Now open angular.json. set "extractCss": true in build configuration
example:
"build": {
"architect": {
"configurations": {
"extractCss": true,
//...
}
}
}
}
Reference: https://github.com/angular/angular-cli/issues/10666#issuecomment-386843570
Reference 2: http://www.talkingdotnet.com/upgrade-angular-5-app-angular-6-visual-studio-2017/