I need some help.
I'm trying to build out my static site on Nuxt which has a bunch of dynamic routes.
So far in my nuxt.config.js I've got
generate: {
async routes() {
const queryDb = await app.$fire.firestore.collection("schools").get()
return queryDb.docs.map(x => `/performance/${x.schoolId}`);
}
}
However, when using Nuxt generate, it fails because it can't read property '$fire' which is how I've been accessing firebase throughout my application (using https://firebase.nuxtjs.org). Is there some way I can require it before creating the routes?
Any help would be appreciated! Thanks.
I also encountered the error:
TypeError: Cannot read property '$fire' of undefined
After following this demo of Nuxt and Firebase, it fixed by adding '#nuxtjs/firebase' inside the buildModules that didn't mention from the tutorial:
nuxt.config.js
buildModules: [
'#nuxtjs/firebase'
],
Related
I'm building a next.js application that uses the slack web API to fetch a list of channels once user is authenticated.
Unfortunately, I'm getting the following error:
Module not found: Can't resolve 'fs'
Now, this only happens after I start using the slack client within my app:
const getChannels = async (token: string) => {
const result = await slackClient.channels.list({
token,
});
return result;
};
use(getChannels(session?.authToken));
I saw a couple of posts on SO mentioning the fs error within next.js apps, but they were all related to middleware, while I'm not using any.
Why would I need to access fs? Do I have to create a custom middleware?
My firebase Nuxt app was recently converted to SSR from SPA mode. It was all working fine in SPA mode but when I tried to convert it, it generated a lot of errors. I tried to solve them one by one and I'm stuck with the error ReferenceError 'location' was not defined. I want to run my emulator because I want to test my other functions if it is running completely in SSR mode.
import firebaseTmp from "firebase/app";
import firebaseErrorsJa from "~/plugins/firebaseErrorsJa";
import "firebase/storage";
import "firebase/firestore";
import 'firebase/auth';
import 'firebase/functions';
const config = process.env.firebaseConfig;
if (!firebaseTmp.apps.length) {
firebaseTmp.initializeApp(config);
}
const db = firebaseTmp.firestore();
const functions = firebaseTmp.functions();
const firebase = firebaseTmp;
const firestore = firebaseTmp.firestore();
const storage = firebaseTmp.storage();
const auth = firebaseTmp.auth();
const firestoreTimestamp = firebaseTmp.firestore.Timestamp;
const serverTimestamp = firebaseTmp.firestore.FieldValue.serverTimestamp();
const firebaseErrors = firebaseErrorsJa;
if (location.hostname === "localhost") {
db.settings({
host: "localhost:8000",
ssl: false
});
functions.useEmulator("localhost", 5001);
auth.useEmulator('http://localhost:9099/');
}
export { db, firebase, firestore, auth, storage, firestoreTimestamp, serverTimestamp, functions, firebaseErrors }
I imported almost all libraries but still it does not work.
TAKE NOTE: This only happens when it is in SSR mode. Does this mean that location does not work in SSR mode?
I tried to take away the chunk of code that has 'location' in it. It works perfectly well locally but when I try to run my other functions, it generates CORS error. It accesses the link being used when we deploy our functions.
https://us-central1-talkfor-dev.cloudfunctions.net/v1-auth-updateUser
This is the link that was shown in the console
What I expected is that us-central1-talkfor-dev.cloudfunctions.net will be localhost:5000 since we are using the local development.
Do you have any Idea why is it like this?
Alex you understand that SSR mode is trying to render the website on the server. This can be your local running server instance, that means there is no window object for it to access location variable. Location is only accessible inside the browser. The SSR context is not in the browser, hence makes total sense.
Window.location here states.
Server vs Browser environments here states that
Because you are in a Node.js environment... You do not have access to the window or document objects... You can however use window or document by using the beforeMount or mounted hooks.
.
Why don't you try either of these,
use these beforeMount and mounted hooks like this.
beforeMount () {
window.alert('hello');
}
mounted () {
window.alert('hello');
}
using the process.client environment variable
if (process.client) {
// Do your stuff here
// I think this is what you are looking for.
}
I am using Storybook to test my React UI components.
However, when I get to a point where my Action makes an Axios request, I get a 404 response.
Below is the code used in a react action file:
assume the axios instantiation, thunk implementation and action definitions.
getDelayedThunkRes: () => {
return (dispatch) => {
dispatch(delayedResActions.getInitialRes());
axios.get("/test").then(success => {
console.log(success);
}).then(err => {
console.log(err);
})
}
}
localhost:8080 is my real server that I want to connect to. Obviously it should throw me an error because my storybook is running on 9009. How can I connect the two?
Note, it works for my Create React App. Create React App package gives a provision to proxy all the calls to a server using "proxy" field in package.json
Are there any similar tools in Storybook, or is Storybook supposed to be used solely with static mock data?
Alright, I found an amazing post on how to create a middleware for React storybook for APIs
https://medium.com/#wathmal/adding-a-router-middle-ware-to-react-storybook-4d2585b09fc
Please visit the link. The guy deserves the due credit.
Here is my implementation of it in ES5 (somehow Storybook middleware is unable to transpile):
create this middleware.js inside .storybook directory:
const express = require('express');
const bodyParser = require('body-parser');
const expressMiddleWare = function(router) {
router.use(bodyParser.urlencoded({extended: false}));
router.use(bodyParser.json());
router.get('/test', function(req, res) {
res.send('Hello World!');
res.end();
});
}
module.exports = expressMiddleWare
Caveat: You will have to restart Storybook every time you make a change in the middleware.
With this, I am able to make a call from my react actions.
Next, I will try to implement express HTTP proxy middleware to redirect these storybook middleware calls to my real express server.
Edit 1:
The new technique seems to be using decorators, especially with stroybook-addon-headless.
Storybook add on for setting server urls
https://github.com/ArrayKnight/storybook-addon-headless
I am yet to try
I'm currently working on ionic 3 app and used https://ionicframework.com/docs/building/storage plugin. Now I'm working on the log out. I couldn't found how to remove all data that are stored in the database while logging out the app.
After importing and injecting storage I needed to use the following method by using the clear method.
logOut() {
this.storage.clear().then((data) => {
console.log('In promise of clear the data ', data);
this.navCtrl.push(SignInPage);
});
i'm working with offline-plugin and i'm trying to enable background notifications using Firebase
I've noticed that firebase setBackgroundMessageHandler method need to run in a ServiceWorker. I have an auto generated service worker by the offline-plugin and i don't know how to add that method to the existent ServiceWorker or if i can create a new one for Firebase.
Thanks you!
Finally i've managed to do it. You can add a bootstrap service worker using ServiceWorker entry option in the OfflinePlugin initialization this way:
plugins: [
...,
new OfflinePlugin({
...,
ServiceWorker: {
...,
entry: 'my-sw.js'
}
})
]
Then i put my firebase-sw.js code in the my-sw.js file
Cheers