All:
I am trying to follow the tutorial on deepstreamhub
there is one section talking about how to add deepstream in,
new Vue({
el: '#app',
data: {
ds: null,
},
created: function() {
this.ds = deepstream('<YOUR APP URL>')
.login()
}
})
I wonder How can I get my "<YOUR APP URL>"?
Thanks
I am not sure if this answer is useful at the moment or not, but as per the news from January 2018, deepstreamhub platform was shutdown and not up and running, hence you are unable to register/signup for an account.
Here is the answer from one of the founders of deepstreamhub which you might want to read.
Your app url should be an ip on which you run deepstream server. For example if you use it locally it can be;
this.ds = deepstream('localhost:6020')
6020 is the default port
Related
I'm new to web development in general. started learning Javascript last year.
I created a website for testing. Before implementing app check, phone auth worked fine.
I'm using reCaptcha enterprise for app check.
I get this error: Uncaught (in promise) TypeError: recaptchaVerifier.render is not a function
implementing app check:
const { initializeAppCheck, ReCaptchaEnterpriseProvider } = require("firebase/app-check");
const appCheck = initializeAppCheck(firebaseApp, {
provider: new ReCaptchaEnterpriseProvider('**********************************'),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
My javascript code for implementing phone auth:
$('#phone-method').click(function() {
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);
// Sign in with phone flow
})
Apparently, there was a problem with enterprise but they have since fixed it:
https://github.com/firebase/firebase-js-sdk/issues/6133
Same problem to me, but this thread in Github help me:
https://github.com/firebase/firebase-js-sdk/issues/6133
Here you have a nice sample inside.
It seems that appCheck only works great with ReCaptchaV3Provider. You will just have to change:
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(*****),
isTokenAutoRefreshEnabled: true
})
to:
initializeAppCheck(app, {
provider: new ReCaptchaV3Provider(*****),
isTokenAutoRefreshEnabled: true
})
And I recommend to change the way to initialize captcha, set to invisible like this:
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container',
{ 'size': 'invisible' },
auth);
I want some code to be executed to fetch user info/settings before the app reaches to routing guards, because the guards depends on the state that will be updated when I fetch user settings.
I do it that way, is it safe? is there a better alternative?
store.dispatch("appInit").finally(() => {
const app = new Vue({
el: '#app',
components: { 'app': App },
router,
store,
})
})
This looks like a great way to do it, with one possible change.
If your application depends on error-free initialization, instead of using finally, you should to use then and also have a catch block that handles any errors that occur during initialization.
The way you have it now, if the initialization fails, it will still try to load the app.
I'm using Google Analytics (GA4) with a Nuxt.js static site hosted on Netlify. The GA tracking is done with vue-gtag.
It has been working fine for a couple months, but the other day, I noticed an unusually high influx of New User and Session traffic specifically to some of my page paths prefixed with /_nuxt/static/XXXXXXXXXX/... (X denotes some digits). They have "(not set)" Locations, zero Screen Views and zero Average Engagement Times, unlike other legitimate page paths and traffic stats I'm seeing, so I am assuming that they are bots of some sort... but I have no idea where from. Why would particular pages in the static folder get hit like that? And how could they be exposed in the first place?
I'm quite new to all this so I tried researching more about Nuxt static sites, the static folder, and static site generators like Netlify... but I'm not finding anything specifically about these hits showing up on Google Analytics.
I'd appreciate if anyone would be kind enough to explain all this to me!
EDIT - re: kissu's comment on how I've enabled vue-gtag:
I made a Nuxt plugin I've called googleAnalytics.js with the following code:
import Vue from "vue";
import VueGtag from "vue-gtag";
export default ({ app }) => {
// get browser's hostname to check for localhost
let host = window.location.hostname;
// only run the Google Analytics code thru vue-gtag if hostname is not localhost
if (host != "localhost") {
Vue.use(
VueGtag,
{
config: { id: "G-XXXXXXXXXX" },
appName: "SomeName",
pageTrackerScreenviewEnabled: true
},
// pass application router to vue-gtag so that it associates tracking information with the specific page in view
// code from: https://www.carlcassar.com/articles/add-google-analytics-to-a-nuxt-js-app/
app.router
);
}
};
And then in my nuxt.config.js I set it to client-only:
plugins: [
{
src: "./plugins/googleAnalytics.js",
mode: "client"
},
That's all I've done with respect to the GA tracking. Are there are any other config options I should be using?
I'm on Nuxt v2.15.3 and vue-gtag v1.14.0.
Everytime when I created a graphQL server with ApolloServer and express when I navigate to http//:localhost:4000/graphql it opens me a sandbox which looks like:
What i really want to do is to open a graphql playground which looks like this
The reason i want this playground it's because it allows me to works with cookies very eaisly. I was thinking installing this exextion on my chrome browser will help. Unfortunately it did not work. Here is the instance of my ApolloSever with express in code:
const apolloServer = new ApolloServer({
schema: await buildSchema({
resolvers: [HelloResolver, TodoResolver, AuthResolver],
validate: false,
}),
});
await apolloServer.start();
apolloServer.applyMiddleware({ app });
Please if you know where what i'm missing help. t has been hours sitting here nothing works
Wow! After some hours i realized that I was looking for answers at wrong places. I started reading the docs line by line only to found out that the feature i wanted if for Apollo Server 2 and I'm using Apollo Server 3. So to solve this I had to go to my ApolloServer instance and add the following under plugins option:
...
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
...
const apolloServer = new ApolloServer({
....
plugins: [ApolloServerPluginLandingPageGraphQLPlayground({})],
});
Good time of the day!
After a few weeks of development of my project, i've decided to migrate from plain Vue to Nuxt.
Mainly because i need SSR, although i know that Google can execute JS presented on the page and therefore generate appropriate content for their search bot.
Another reason is a general workflow of the project development. I like idea with automatic instantiation of routes, store, etc.
I've faced, however, a pretty strange behavior of the application when it is running in the mode: universal instead of mode: spa. And i don't want to switch to mode: spa since then i lose the SSR i was migrating for in the first place.
I' have an account module in the store - account.js which is responsible for handling any operations related to the account management, such as login/logout, get profile of authenticated user, store the token obtained from the login request as well as the logic for handling the 2FA TOTP procedure.
In my legacy application, i was able to get the token from the cookies by just using the following bit of the code
import Cookies from 'js-cookie';
export const state = {
user: null,
token: Cookies.get('token')
}
And save token after the successful authentication by executing the following mutation:
[types.ACCOUNT_SAVE_TOKEN] (state, { token, remember }) {
state.token = token;
Cookies.set('token', token, {
expires: 365,
httpOnly: true
});
}
But after migration to Nuxt.js, every time im loggin in, the token value in the state is getting populated, but no cookie is set, and after navigating to the other page inside the project (it is pwa, so no reloading, etc) token is reset back to null.
This issue however is gone if application is switched to the mode: spa from mode: universal and everything is working just fine.
I've read many issues on the github as well as done pretty big portion of crawling throught the websites which are trying to solve the same issue, though none of the suggestions are working for me.
I've even installed the cookie-universal-nuxt package from NPM which claims to be working with the SSR, but yet every time I'm trying to access this.$cookies.get('token') in the state, or anywhere else (mutations for example), I'm just getting error about using the method (get/set/remove) on null.
Does anyone know or have an idea on how to overcome this issue, at least if it is possible without going back to the mode: spa?
P.S. Running npm run build|generate yields same files as for the normal vue (without the content, just the structure until the target element is readched) while in mode: spa.
Okay, after around 12 hours trying to wrap my head around this issue, i've decided to go the 'dirty' way and create middleware which is doing, in my opinion, way to much processing on each request.
import CookieParser from 'cookieparser';
export default async function ({ store, req }) {
if (!store.getters['account/check']) {
if (!store.state.account.token) {
if (process.server) {
let requestCookies = CookieParser.parse(req.headers.cookie);
if (requestCookies.hasOwnProperty('token')) {
store.dispatch('account/saveToken', {
token: requestCookies.token,
remember: true
});
}
}
}
if (store.state.account.token) {
if (!store.state.account.user) {
try {
await store.dispatch('account/fetchUser');
} catch (error) { }
}
}
}
return Promise.resolve();
}
Seems like useCookie has been created for this use case