I am using Meteor and FlowRouter, and I would like to force my page to reload when I change the url (or alternatively one of the parameters of my route). Would anyone know a way to do so?
There has been a few debates over this, but I haven't found a satisfactory answer yet.
PS:
I know one suggested method is to put FlowRouter.watchPathChange() inside a Tracker.autorun() but this doesn't seem very satisfactory for what I want to do (changing css classes based on the route parameter), plus I'd like to have the effect of having a page reload.
FlowRouter has a few reactive APIs for accessing the URL state very efficiently:
FlowRouter.getParam("paramName")
FlowRouter.getQueryParam("queryParamName")
FlowRouter.getRouteName()
FlowRouter guide
Putting FlowRouter.watchPathChange() inside a Tracker.autorun() is not the only option. You can put in autorun some of functions listed above.
Related
in my Next.js app i want to render a mobile-/ desktop-header based on the width of the device. In general this is a simple task, i did many times in normal react, using hooks like useWindowDimensions, where I check the width of the window object and use this parameter for a simple condition.
In Next.js however I ran into the problem, that my app is pre-rendert on the server, so of course there is no window object, that I could use for the condition.
Things I tried:
dynamic import of the component, this means the component didn't get pre-rendert on the server, but only on the client. This would work, but I didn't use the benefit of SSR, and for SEO reasons I want to pre-render "key-components" like the header.
I just picked a condition for SSR like render always the mobile-header for example and on the CSR I just render on the real condition. This would solve my issue with render always "key-components" on server side, so SEO is happy, but i run in an ugly warning about content mismatch between server and client, because when I render the app on desktop device, my first render on client side of course would be the desktop-header. So this doesn't seem to be a good solution either.
Next I tried to render a certain condition like before, so render always the mobile-header on server AND client side and use a useEffect hook only on mount useEffect({...}, []) which then check the real condition and trigger a re-render with the correct condition. This would solve my SEO-thing, and also the ugly content mismatch warning. BUT I run into a noticeable layout-shift, where the user sees the mobile-header first and after half a second the header changes to the desktop-header. ugly stuff..
So I got my next idea, which was checking the user-agent or device type with getServersideProps and somehow use this info for a conditional rendering on server-side. This doesn't really work out to well, specially I would want to use it in my _app.tsx so I don't have to write this stuff for every page again and again. In a discussion thread in the official Next.js repo I found, that getServersideProps doesn't work in _app.js yet, only getInitialProps, which is deprecated, and shouldn't be used anymore...
So, to make things short, there has to be a good way to render components in Next.js without the above problems. I just couldn't figure out yet, what is best practice for this kind of stuff.
I would appreciate any hints, tipps or advices in this topic ❤️
I would like to change the look and feel of the login page that is served up by IdentityServer3.
Effectively i would like to add a selection of stylesheets (as its used across multiple sites) that can be added. I am also looking to include an additional "Register" button that will take you too another page along with a forgot password link.
I know i can add the forgot password link in the LoginPageLinks list on startup, but the modification for registration i dont think will work this way. (Please correct if im wrong)
I have read the ID3 documentation on modification and it appears i can get most of what i want by modifying the DefaultViewService, however a custom View service (implementing the IViewService) seems to give me everything, but you have to have all of the assets in place explicitly in my solution (js/css/html/less/fonts).
What i want to know is am i missing something here? is the DefaultViewService the answer? and how modifiable is it really? as i dont really want to go down the root of the implementing a custom view.
A 100% custom IViewService is rarely the way to go, as it's a lot of work. You can always implement custom HTML templates to add your CSS and whatever custom markup you want. If you need it to be dynamic, then you can look into deriving from the DefaultViewService and overriding the appropriate methods to add what you need at runtime.
I'm trying to understand how URL Mapping works. I've gone through numerous pages, but I can't seem to wrap my head around what I'm trying to do.
Its really simple, I use DataObjects as pages approach and I have a member extension written to the member class. And I have the typical actions, show, edit, add.
So if I go to www.mywebsite.com/members/show/1 I can see the first user. If I change show to edit, I can edit the first user. Now if I go to www.mywebsite.com/members/add I can create a new user. This is working all as expected due to the functionality I created in the add method.
My problem is in the fact that when you go any website, you don't register to the website by going to members/add, you register by going to website.com/Register or something similar. From code management perspective, it is a lot easier for me to leave the code the way it is now. I don't want to have to create a Register page and move the code there, instead I am trying to figure out if it is possible to go to www.mywebsite.com/Register and have it load www.mywebsite.com/members/add. I am not talking about a redirect link that would update the url, I want users to still see Register in the url and not see /members/add.
Vice versa, if users were to go to www.mywebsite.com/members/add I want the link to update to Register or say page not found.
Is this possible with Silverstripe Framework?
I am not 100% sure, but I believe this is called URL Masking.
This is very possible, firstly I'd advise that you look over...
silverstripe-memberprofiles
...because even if you dont' want to use an existing module I'm sure there would be useful information. There is a great example of "pure" routing (i.e. silverstripe no cms) that leads on to "nested" routes - which is what I think you are asking for, so I highly recommend reading the slides below and then the created todo app
silverstripe-framework-building-without-the-cms
todo app source
Every tutorial/example i can find for meteor shows a single view application. I would like to build something a little more complex. I'm unclear how to approach multiple views...preferably in a way that's somewhat scalable?
The iron-router package lets you access different views (layouts) by nice, REST-ful human-friendly clean URLs. It supports parameters in the URL, "loading" templates, waiting for subscriptions to finish loading, before and after hooks etc.
At this point you can only create Single Page applications with Meteor. Note that Single Page, doesn't mean you can't have several views - use iron-router for that.
But by design, Meteor serves a big fat unique JavaScript/HTML/CSS application down to the browser, though there's a feature request to allow incremental loading. It is then up to the application (or more precisely, the JavaScript framework), to dynamically render its views in order to display different "pages".
I was wondering the same thing and it took me way too much time getting something started. I finally got a paged app working solidly by using Backbone views and routes, so I created a simple boilerplate project to make setting up an app like this easier in the future.
Live demo here: backbone-boilerplate.meteor.com
Source code here: github.com/justinmc/meteor-backbone-boilerplate
Have you looked at madewith.meteor.com?
A bunch of apps there have multiple views using Backbone also Jonathan Kingston who created britto has started simple meteor framework called Stellar
At this stage of the game not sure if there really are best practices. But these two seem to be the current flow.
You can also make a tabbed interface for multiple views. There is a package project "Smart package for generating a tabbed interface with pushState" github project here: https://github.com/possibilities/meteor-tabs
The best solution right now is using a routing package (router is basic but works). The workflow is something like this:
declare routes; return a template name for each route
place the reactive helper provided by the package in your body tag
the reactive helper will return the template associated to that route
you create a template for each route and optionally set custom publish functions
Router will give you browser history (client side).
Note that at this time there are some limitation on the way Meteor handles html/js. They are load all at the same time. The bright side is that once the app is loaded, page transitions will be instant.
When the path refers to the actual folder structure and points to the page it's not a problem, i.e. "/Default.aspx/MyMethod", however if "/" brings up "Default.aspx", then "/MyMethod" means something different. Is it even possible at all?
A possible solution, and probably a better one, is to use a web service, which is what I'm using at the moment.
You can add the following:
PageMethods.set_path('/yourpage.aspx');
I found this solution here