Develop Reference

How to programmatically navigate with preact-router?

I'm trying to figure out how to structure the frontend part of a web application using typescript, preact and preact-router. I've come a long way but I still need to figure out how to programmatically navigate (redirect) with preact-router. I can do history.replaceState(null, null, '/#/redirectedUrl');, but while that changes the URL in the location bar, preact-router doesn't route to the new URL.
What is the preferred way to programmatically navigate when using preact-router?

Importing the function route from 'preact-router' is the way to go:
import { route } from 'preact-router';
route('/url/to/rout/to');

You can do it in two ways based on your need
import { route } from 'preact-router';
route('url');
This will create a pushState in the history (i.e.,) it will create a new entry for this url
import { route } from 'preact-router';
route('url', true);
This will create a replaceState in the history (i.e.,) this will replace the current page url entry in the history with the url you will be routing to. You can make use of this in cases like, when routing from login screen to your home/dashbaord screen, where on click of browser back button, you don't want user to go back to login screen once the user has been logged in (thus replacing the login entry with your dashbaord entry).

Cannot perform routing with pushstate and various js routers

I am not sure if I understand well the situation with pushstate and routing but I am stuck trying to route a single page app using either pagejs or grapnel or other similar javascript routers.
What I want is to be able to navigate through my program and through manually entering routes in the location bar (so I can send links to various parts of my spa to third parties). I cannot navigate manually to the /test route for example with the below code.
The following is an example with pagejs.
I have also made my nodejs backend to redirect to /#login if it gets a request for /login.
How can I utilize pushstate so that I can both enter a manual address in the location bar and navigate through it from the router and html links?
What am I missing here?
Some sample code:
page('/',index);
page('/signin',signin);
page('/test',test)
page();
function index() {
console.log('in index')
new WelcomeView();
console.log('rerouting');
page('/signin');
}
function signin() {
console.log('in signin')
//new SigninFormView();
}
function test() {
console.log('in test');
}
in welcome.html
click lets see
in app.js (server side)
//router redirect to webapp
app.use(function(req, res, next) {
const redirectUrl=(req.secure ? 'https://' : 'http://') + req.headers.host +'/#'+req.originalUrl.substring(1);
res.redirect(redirectUrl);
});
This has the following outcomes:
1) navigating to / I get the welcome page and a console log that it has navigated to the signin route
2) writing the link manually /signin in the location bar I again navigate to the / route which redirects
3) writing the link manually /#signin in the location bar I again navigate to the / route which redirects
4) clicking the link in the welcome.html again redirects me through the / route
5) clicking the link in welcome.html and changing it to /test works.

Whenever you (manually or otherwise, usually by setting window.location = 'myurl') change anything in the address bar, the browser will always make a request for that, afaik there is no way around it, and if there was, it would be a security issue, as pages could hijack your browser, by not allowing to navigate away to any other url. If you want to be able to load a particular url in your SPA by typing it in the location bar, you need the server to respond with something. In an SPA, you would typically return the same html that loads your SPA. Now, it seems like pagejs doesn't' respect the url in the location bar, and keeps loading / (I believe I've seen that before), as a workaround, you can try setting page() to window.location.pathname when your app loads, and see if that will fix your second issue.
Also, hashbang urls, arent enabled by default with page, you need to enable them with page({hashbang: true}).

What is the use of HTML5 pushState in Backbone History Start method

I have a simple Backbone app. I am trying to understand the difference created by passing pusState: true when starting Backbone.History object.
JavaScript
var r = new (Backbone.Router.extend({
routes: {
"users": "allUsers",
"users/new": "createUser"
},
allUsers: function () {
v.render("showing all users");
},
createUser: function () {
v.render("showing form for creating new user");
}
}));
Backbone.history.start({ pushState: true });
Q1. When I pass pushState: true and I open localhost:3000/#/users/, this url automatically redirects to localhost:3000/users
Why does this redirect happen ?
Q2. When I do not pass pushState: true then redirect does not happen.
localhost:3000/#/users/ works fine but localhost:3000/users does not work ?
What is importance of passing this value in history.start method and why is it important.

Including the pushState option when starting Backbone.history tells Backbone to use the HTML5 history API. Basically, this API lets you change the URL in the address bar without reloading the page (see more about it here). Without pushState, Backbone will use hashes (#) to change the URL, so it doesn't have to reload the page.
When I pass pushState: true and I open localhost:3000/#/users/, this url automatically redirects to localhost:3000/users Why does this redirect happen ?
Since you've enabled the history API, Backbone will choose to use actual routes (localhost:3000/users) instead of hashed routes (localhost:3000/#/users/). However, it still understands the hashed routes, so it redirects them to the actual route. This way, if you enabled pushState in an existing application, any user who has a hashed route bookmarked will still be able to use that bookmark. (And of course, any new bookmarks will have the right route).
When I do not pass pushState: true then redirect does not happen. localhost:3000/#/users/ works fine but localhost:3000/users does not work ?
Answer to Q2: When pushState is not enabled, Backbone will only use hashed routes. So localhost:3000/#/users/ doesn't redirect because it is the "right" route: it will display the content. Depending on how you've set up your server, localhost:3000/users will either
Load your app but show no content (or default content)
Load whatever the /users resource is, OR
Give you a 404 error.

When using pushState, you're telling your Backbone application to fetch the HTML from the backend at the defined URL (without hash). This means that your backend needs to be prepared for that, which is why the localhost:3000/users doesn't work by default if you didn't foresee a backend resource. Fetching the HTML from the backend happens without page refresh though, so it doesn't interrupt the JS from running.
When using the hash without pushState, you're using the front end router (hashed routes) and its callbacks only, and no request to the backend is made.

Ember Simple Auth: how to keep data in a step by step process after redirection to login route

I'm creating an app using Ember.js. This application allows to book an appointment at the doctor.
You have a booking process with a few steps.
After step 1 (booking/start), you have a screen that shows up if the user isn't connected (booking/user). On this page, I have two links: one to the login page, another one to the registration page. All steps "needs" booking controller.
The link to login is basically a link to the next step (booking/confirmation), but since user isn't logged in, he's automatically redirected to login page by AuthenticatedRouteMixin. When I log in, everything works fine, I'm connected and redirected to booking/confirmation.
BUT, I lose all the data from my booking controller. It's obvious, since login doesn't have any connection with my booking controller.
I believe this is not a pure Ember Simple Auth question, but more a general Ember.js question. Do you have any idea about how I should change the login behavior to keep the data or change the logic of the app to save the data before going to the login page, then retrieve it on booking/confirmation?
My code is available here: https://github.com/lionelrudaz/wellnow-frontend
Let me know if you need more information.

I found a workaround. When I enter the process, I create and save a booking object, allowing me to have an id and to save the progress at every steps.
If you need more details, just let me know.

Single Page Application? Login Page

I'm a little new to programming and I'm still beginning on working with a lot of the languages.
Currently, I'm working on a project that requires me to create a login page. With a successful login, the page will change to an "Account Info" page; however, this has to be a single page application. My professor specified that the server will have no concept of "page", and that moving from "Login" to "AccountInfo" will not change the page/URL.
How do I go about calling this? We've done introduction into Angular JS, but he's never done a tutorial on single page applications.
My .js for the login looks like this:
Home.LoginClick = function () {
$.ajax({
url: "Home/Login",
data: {
Username: $(".Username").val(),
Password: $(".Password").val(),
},
success: function (result) { alert(result);
if (deserializedData.Message == "Success")
Home.ChangeToAccountInfo();
}
});
}

Single Page application means that the client loads all the HTML in one shot, thus preventing your browser to refresh the page every time you click somewhere or go a different page. You can witness this in action by going into most websites.
It is considered best practices to use services for back end interaction. Therefore you should create a Auth. service managing your login. Create a function login - and logout. and then inject that service in your controller associated with the view thats displays the login form.
You should upon submission of the form call this login function. you can use ng-submit. after submitting the form the function that you injected in your controller will check with you backend to see if the user exist or not and then you can redirect the user toward the page you want.
You should look into the ui router for more details about how to handles your routes.