I need to execute a Firebase function AND load a page using a single URL.
e.g.
URL = "localhost:5000/cars?make=hyundai&model=elantra"
This URL will load the views/cars/index.html webpage.
This URL will also call the loadCar() Firebase function.
...How can I achieve these two goals? (or is there a better way to achieve this - load a page AND invoke a function)
Current behaviour: It loads the page (achieve 1), but doesn't invoke the loadCar() function (doesn't achieve 2).
FYI my firebase.json:
{
"hosting": {
"public": "functions/views",
"rewrites": [
{
"source": "/cars/**",
"function": "loadCar"
}
]
}
My file directory (arrows pointing to relevant files):
loadCar():
exports.loadCar= functions.https.onRequest((req, res) => {
// const requestedCar = Get requested car info from URL queries.
// Save requestedCar to Firestore DB, so it can be loaded in the html view.
// ... etc.
res.end();
});
If you're asking if it's possible for a single Firebase Hosting URL to both load static content and trigger a function, it's not possible. It has to be either one, not both.
You could instead have some JavaScript code in the static content invoke the function through another URL. Or you could have the URL invoke the function, which returns HTML to display, in addition to performing other work. But the destination of the requested URL can only go to static content or a function, not both.
Related
I just started playing around with strapi using it for my next project with nextjs and i got stuck a little bit on the slug part.
I have installed the slugify plugin in the strapi admin panel, restarted the server and in the roles(permissions) section i enabled it for both authenticated and public roles.After this i created a collection type name Blog. I added some fields to it title, content, cover, slug(short text).
After this i created some blog posts and listed them out on the page. The problem began when i tried to access the blog post using the slug:
`${process.env.NEXT_PUBLIC_STRAPI_URL}/slugify/slugs/blog/${slug}?populate=*`,
The url is ok as the slug part is populated and is the value that i have given the slug field when created the blog post. The error that i get is the following:
blog model name not found, all models must be defined in the settings and are case sensitive.
The problem is that the slugify plugin is trying to match the model name to the existing ones and its not finding it so throws this error.
I started to dig a little bit deeper and began to console log in the slugify plugin inside strapi node_module:
module.exports = ({ strapi }) => ({
async findSlug(ctx) {
const { models } = getPluginService(strapi, 'settingsService').get();
const { modelName, slug } = ctx.request.params;
const { auth } = ctx.state;
console.log(getPluginService(strapi, 'settingsService').get());
isValidFindSlugParams({
modelName,
slug,
models,
});
As you can see it should container a models param aswell that should contain all the current models created in strapi. However the model paramateres comes back as an empty object, its like the plugin does not see the created collections.
The collections were created after the instalation of the slugify plugin.
I am developing on localhost using sqlite with strapi v4.
Any ideas why is this happening? Anyone else encountered this error?
Thanks,
Trix
Firstly, you have to install Slugify plugin.
After that you have to do some config steps.
To do all of that:
As you mentioned, you found Slugify folder in node_modules so you can skip first step:
npm install strapi-plugin-slugify
in the ./config/ folder create a file named plugins.js
./config/plugins.js
Paste this code there it will let you see the endpoint path in the right side of the screen:
module.exports = ({ env }) => ({
// ...
slugify: {
enabled: true,
config: {
contentTypes: {
blog: { //write what your collection type's name is this case we should use "blog"
field: "slug",
references: "title",
},
},
},
},
// ...
});
The endpoint example
fetcher(`${API}/slugify/slugs/blog/${slug}`)
I'm working with nextjs and this example https://github.com/zeit/next.js/tree/master/examples/with-static-export
in next.config.js i have code:
module.exports = {
async exportPathMap(defaultPathMap, { dev, dir, outDir, distDir, buildId, incremental }) {
// we fetch our list of posts, this allow us to dynamically generate the exported pages
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=3'
)
const postList = await response.json()
// tranform the list of posts into a map of pages with the pathname `/post/:id`
const pages = postList.reduce(
(pages, post) =>
Object.assign({}, pages, {
[`/post/${post.id}`]: { page: '/post/[id]' },
}),
{}
)
// combine the map of post pages with the home
return Object.assign({}, pages, {
'/': { page: '/' },
})
},
}
Its fetch 3 posts and generate files - [id].html - its great!
But now i need to fetch new post and build page only for this new post but commad next export remove all files from out and create only one post.
What i need to do to keep old post and add new one on next export?
Example:
First next export with request for 3 posts from api
generate 3 post in folder "out"
change api url and run next export for 1 new post
summary i have 3 old post pages and 1 new in my "out" directory
How to do that?
Next can't do this out of the box, but you can set it up to do so. First, you'll need a system (database) of which pages have already been built. Second, you'll need some method of communicating with that database (api) to ask which pages should be built (eg, send over a list of pages and the api responds telling you which ones have not yet bene built). Then, tell your exportPathMap which pages to build. And finally, move your built pages out of out and into a new final/public directory.
By default, Next will build/export anything in the pages directory plus anything you set in exportPathMap, and put all of those in the out directory. You can override what it builds by passing a custom exportPathMap, and how you handle what goes into the out directory is up to you, so you can move those files to a different actual public directory and merge them with the old files.
I'm trying to use Cloud Functions for Firebase to serve content and I'd like to detect whether a user is logged in or not. I've set up a rewrite in my firebase.json that looks like this:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"function": "getProfile"
}]
}
}
This works fine and I'm serving appropriate content based on the path that's being requested. However, because I'm not doing anything on the client side (i.e. I'm using rewrites rather than client-side redirects), I'm missing the opportunity to get the current user from a client-side script.
Is there some way I can use a header or a property of the request object so that I can serve different content to logged in vs. non-logged in users in my server-side rewrites scenario?
Firebase Hosting passes along any cookie named __session when it calls a Cloud Function. An easy way to do this is to simply listen for ID tokens in your web app and set the cookie appropriately:
firebase.auth().onIdTokenChanged(user => {
if (user) {
user.getIdToken().then(token => {
document.cookie = `__session=${token};max-age=3600`;
});
} else {
document.cookie = '__session=;max-age=0';
}
});
Then, in your Cloud Function, you can parse the ID token out of the cookie and verify it using code like in this sample.
In my scenario, I want everyone that visits our root URL to be auto-redirected to a url containing a document for collaboration and instant gratification.
Here, the router.coffee code is:
FlowRouter.route '/',
action: ->
console.log "I'm home!"
FlowRouter.go 'myProject'
name: 'myHome'
FlowRouter.route '/my/:projectId',
subscriptions: (params) ->
#register 'currentProject', Meteor.subscribe 'project', params.projectId
action: ->
BlazeLayout.render 'myBody'
name: 'myProject'
I want the root URL to redirect to /my/:projectId but I'm unsure of how to retrieve the auto-generated projectId and redirect using with either FlowRouter.go or FlowRouter.redirect.
Is this possible?
If yes, how?
Thanks for your help!
Since the data may not be available when the route action execute,
the best is to re-route at the template level.
It might be a good idea to use the Template.[name].onCreated() function
and put inside it something like the following code:
pID = ... // Get the user project ID from wherever you saved it
var params = {projectId: pID};
// Set the project URL including the :projectId parameter and re-route the user
FlowRouter.go("myProject", params);
For the URL to which a route applies I have a part defined in settings.json, like this
baseUrl: '/private'
My settings are published and accessible through the collections 'Settings' (on the client). So I tried the following:
Meteor.subscribe('settings');
Deps.autorun(function () {
var settings = Settings.findOne():
if (settings) {
Router.map(function () {
this.route('project', {
path: settings.baseUrl + '/:projectId,
controller: 'ProjectController'
});
});
}
});
The problem is that during initialisation the data is not yet on the client available, so I have to wait until the data is present. So far this approach doesn't work (yet). But before spending many hours I was wondering if someone has done this before or can tell me if this is the right approach ?
Updated answer:
I published solution in repository : https://github.com/parhelium/meteor-so-inject-data-to-html
. Test it by opening url : localhost:3000/test
In this case FastRender package is useless as it injects collection data in the end of head tag -> line 63.
Inject-Initial package injects data in the beginning of head tag -> line 106.
Needed packages:
mrt add iron-router
mrt add inject-initial
Source code:
Settings = new Meteor.Collection("settings");
if (Meteor.isClient) {
var settings = Injected.obj('settings');
console.log(settings);
Router.map(function () {
this.route('postShow', {
path: '/'+settings.path,
action: function () {
console.log("dynamic route !");
}
});
});
}
if (Meteor.isServer){
if(Settings.find().count() == 0){
Settings.insert({path:"test",data:"null"});
}
Inject.obj('settings', Settings.findOne());
}
Read about security in the bottom of the page : https://github.com/gadicc/meteor-inject-initial/
OLD ANSWER :
Below solution won't work in this specific case as FastRender injects data in the end of head tag. Because of that Routes are being initialized before injected data is present.
It will work when data from Settings collection will be sent together with html.
You can do that using package FastRender.
Create file server/router.js :
FastRender.onAllRoutes(function(path) {
// don't subscribe if client is downloading resources
if(/(css|js|html|map)/.test(path)) {
return;
}
this.subscribe('settings');
});
Create also publish function:
Meteor.publish('settings', function () {
return Settings.find({});
});
The above code means that if user open any url of your app then client will subscribe to "settings" publication and data will be injected on the server into html and available for client immediately.
I use this approach to be able to connect many different domains to meteor app and accordingly sent proper data.