I have a site similar to Stackoverflow where users can create a post (or question) which gets its own URL and should be SEO optimized. Therefore I need to include these dynamic pages in my SiteMap.xml. I would like to find an automatic way to insert each dynamic URL to my Sitemap when initially created.
Hoping to not reinvent the wheel, I found sitemap-module for nuxt, however the example they use for dynamic pages is statically written, so not sure what good that does.
I am having a hard time even conceptualizing how to set this up and what is possible with current infrastructure. Can Firestore functions update source code and redeploy or are there any firestore hosting features to help? Could/ should I set up a cron job to run every night to first run a script to query firestore and update sitemap file on local computer, then automatically deploy it to firestore from command line? Any script examples?
Tech used: VueJS, Node.js, Nuxt/ SSR, Firestore (db and hosting), and Express
This is how I did it. Hope this helps. Please share if you managed to get a different solution.
I used npm install #nuxtjs/sitemap
Website here - #nuxtjs/sitemap
In nuxt.config.js
var routes = []
var allUsers = [{'username': 'username'}] // Getting users as an Array
for (var i = 0; i < allUsers.length; i++) {
routeObject = {
'url': '/profile/' + allUsers[i].username
}
routes.push(routeObject);
}
module.exports = {
sitemap: {
path: '/sitemap.xml',
hostname: 'Your hostname here',
cacheTime: 1000 * 60 * 15,
gzip: true,
generate: false,
routes: routes
}
}
Related
I have site that deployed on firebase hosting site
on the site I wrote Version 3 but instead of that I want to show the deployment / release version like e925c5 that writen on the history version.
can I get history version with Rest API.? or can I define it before deployed.?
thank you
Update
I try with reading documentation and working with it, but still stuck with the authentication method,
Simple function is this, but always returned 403 response, already try with getGlobalDefaultAccount.login() and getGlobalDefaultAccount.getAccessToken() and getGlobalDefaultAccount() still not working,
const requireAuth = require('firebase-tools/lib/requireAuth')
const getGlobalDefaultAccount = require('firebase-tools/lib/auth')
const api = require('firebase-tools/lib/api')
const site = 'sarafe-testing'
requireAuth(getGlobalDefaultAccount.getAccessToken(), ['https://www.googleapis.com/auth/cloud-platform']).then(async () => {
try {
const response = await api.request('GET', `/v1beta1/sites/${site}/releases`, { auth: true, origin: api.hostingApiOrigin })
console.log(response)
} catch(e) {
console.log(e.message)
}
})
Full version
For now I just created table that hold version code (manuali update from firebase page) and make API to get the version, but this not a valid solution because is only show the latest version, some other people just open the webpage without refresh / clear cache so that one is still using the old version of webpage with latest version written,
Yes, there is a REST API that allows you to manage versions and releases for Firebase Hosting, and it has a method to get a list of versions for the site. I recommend checking out its documentation and reporting back if you get stuck while implementing the code.
In a previous Stack Overflow question, I shied away from using an external webhook on Actions on Google
so I needed to go back to the inline editor. I got that worked out, but now I'm feeling brave again.
I've outgrown the inline editor and want the ability to develop my code on my laptop, testing it in Firebase, and publishing to a site for my webhook, presumably where the inline code editor publishes to. In fact, I have already written the require functions and deployed them from Firebase. So the full functionality is ready to go, I just need to hook it up properly to Actions on Google.
What I have now in Actions on Google, inline editor, is more of a stub. I want to merge that stub into my more fullblown logic that I have in Firebase. Here is what is in the inline editor:
const { conversation } = require('#assistant/conversation');
const functions = require('firebase-functions');
const app = conversation();
app.handle('intent_a_handler', conv => {
// Implement your code here
conv.add("Here I am in intent A");
});
app.handle('intent_b_handler', conv => {
// Implement your code here
conv.add("Here I am in intent B");
});
exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);
When I search on the Internet, I see discussion from the point of view of Dialogflow, but like I say, I'm in "Actions on Google". I want to transition away from the inline editor, taking what I already have, as a basis.Can someone explain how I set that up? I'm happy to do this within the context of the Google ecosystem.
To test your own webhook locally on your own system I would recommend incorporating a web app framework such as express. With express you can host code on your local machine and make it respond to request from Actions on Google. In your case you would replace this will all the code related to the Firebase functions package. Here is an example of what a simple webhook for Actions on Google looks like:
const express = require('express');
const bodyParser = require('body-parser')
const { conversation } = require('#assistant/conversation');
const exprs = express();
exprs.use(bodyParser.json()) // allows Express to work with JSON requests
const app = conversation();
app.handle('example intent', () => {
// Do something
})
// More app.handle() setups
exprs.post('/', app);
exprs.listen(3000);
With this setup you should be able to run your own application locally. The only thing you need to do is install the required dependencies and add your own intent handlers for your action. At this point you have a webhook running on your own machine, but that isn't enough to use it as a webhook in Actions on Google because it runs locally and isn't publicly available via the internet.
For this reason we will be using a tool called ngrok. With ngrok you can create a public https address that runs all messages to your local machine. This way you can use ngrok address as your webhook URL. Now you can just make as many code changes as you want and Actions on Google will automatically use the latest changes when you develop. No need to upload and wait for Firebase to do this.
Just to be clear: Ngrok should only be used for development. When you are done with developing your action you should upload all your code to a cloud service or host it on your own server if you have any. A (free plan) ngrok URL usually expires every 6 hours. So its not a suitable solution for anything other than development.
I have developed a website using gatsby and I am using google analytics plugin via gatsby-plugin-google-analytics, now to be nice with the users, I would like to add a cookie consent where the user will be two options whether to accept or decline cookies usages. If the user declines then I would like to stop google analytics to track the user activity. I dug into their documentation but unable to find the option to achieve this, is there any way around to achieve this.
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: siteConfig.googleAnalyticsId,
// Defines where to place the tracking script - `true` in the head and `false` in the body
head: false,
},
},
For the movement my gatsby-config.js looks like this. how one can achieve this.
Thanks you in advance.
The plugin merely loads the library and instruments page tracking calls in a Gatsby-compatible way for you. All of the other Google Analytics calls, including disabling measurement for a user works the same as normal.
It's up to you to:
Build and show a cookie notice with an opt-out
Remember when a user has opted out
Communicate this on each page-load for the user (before any ga() calls are made) by setting window['ga-disable-UA-XXXXX-Y'] = true
You should be able to do this in a function exported as onClientEntry from gatsby-browser.js. For example:
export const onClientEntry = () => {
if (userHasOptedOutOfThirdPartyTracking()) {
window[`ga-disable-${process.env.GATSBY_GOOGLE_ANALYTICS_ID`] = true
}
}
For the Gatsby website, you could use a combination of gatsby-plugin-gdpr-cookies for analytics cookies management in your gatsby-config.js and react-cookie-consent to display the cookie banner.
# using npm
npm install --save gatsby-plugin-gdpr-cookies react-cookie-consent
# using yarn
yarn add gatsby-plugin-gdpr-cookies react-cookie-consent
You can find a more detailed tutorial here.
been playing around with a simple blog built with JSONPlaceholder and Nuxt.js
Everything seems fine, I've got an archive and single blog posts working fine but when deployed on Netlify I can see that the browser is still doing API calls to JSONPlaceholder even though all the pages are built static and I can see they already have the content within the HTML.
I used the routes method within generate in the nuxt config to create the 100 html files based upon the JSONPlaceholder /posts results.
Here's the Netlify link: REMOVED.
And a public repo: https://bitbucket.org/oneupstudio/api-test/src/master/
Anything I've missed?
Nuxt.js doesn't support 'full static generation' yet, check this RFC.
For now, you can use this module in order to make your JSON requests static.
Nuxt currenty supports proper static generation of websites. Although one has to be aware of payload param in asyncData. So if payload is present that indicates that static generator is at work and no api calls should be made in this case:
async asyncData ({ params, error, payload }) {
if (payload) return { user: payload }
else return { user: await backend.fetchUser(params.id) }
}
Read more on this here.
RFC mentioned by #DreadMinder will further improve on this, but you can already do full static websites with Nuxt.
I am using vue-cli for front-end and lumen for back-end and I am curious about what is a best practice to store API root-url and endpoints in vue ?
Now I have constants.js file in src directory where API root-url and endpoints are like that:
const BASE_URL = "http://localhost:8000"
export const AddLanguge = BASE_URL + "/api/languages"
and when I need for example to implement add language functionality in component I import required API endpoint from constants.js like that:
import { AddLanguge } from '#/constants'
and then use axios to make request
this.$http.post(AddLanguge, params).then(response => {
if (response.status == 200) {
this.addLanguage(response.data.data)
} else {
this.setHttpResponseDialog(response)
}
}).catch(er => {
this.setHttpResponseDialog("Error")
})
I searched this question, but there is no clear answer some say: it's ok.
Others say: it's bad you must store that kind of data in dev.env.js and prod.env.js, and most important fact here is I don't get why are they saying so, why is it important to save that data in .env files? Or maybe is there some other better way?
Can you guys provide a right answer with good explanation or if there is no right answer and it depends on situation how can I decide which way is suitable for my case?
.env files are recommended because you may have different endpoints depending on environment, that is to say are you running dev server with "npm run serve" or building for production with "npm run build". With .env config files they become environment variables and you don't need to hard code them into your app, it's just the most practical thing to do. With Vue CLI 3 you would have
//.env.development
VUE_APP_BASEURL = "http://localhost:8000"
And in your app you could access it with.
process.env.VUE_APP_BASEURL
What I use to do is just have the base in a variable and then concatenate rest.
const BASE_URL = process.env.VUE_APP_BASEURL
this.$http.post(BASE_URL + '/api/languages/', params)