I am just starting with ReactJS and trying to integrate with Stormpath for user login. They provide default behaviors for /register and /login path.
I want ReactJS to redirect to those local links for now rather than creating new routes and components. How can this be achieved.
Thanks!
I also work at Stormpath and just a few days ago I released the Stormpath React SDK. With this you'll be able to integrate Stormpath into your React application with very little effort.
To get started checkout our example application or read the blog post I wrote for it.
And if you have any questions, feel free to hit me up at robin [at] stormpath [dot] com.
Cheers!
I work at Stormpath. We're recommending that you try to use our express-stormpath module. But we do have some issues that we're working on fixing.
It is not yet possible to disable the default HTML views, but still retain the JSON API. We will be fixing this in a future release. This creates a problem for React Flux applications that want to use the /login route in their browser application, but not use our default HTML views.
To work around the problem, you can change the uri of the route to a different URL than /login. For example:
app.use(stormpath.init(app, {
website: true,
web: {
login: {
uri: '/api/login'
}
}
}));
Your browser code will need to make it’s login POST to /api/login
Can you give this a try and let me know if is helps? Thanks!
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.
So I am quite new to this, and have a tight timeline, so here goes nothing. I am trying to create a login system using express and passport for the backend, and react redux in the front end wrapped into electron. I have the login working for the backend when using postman, but when I am using react the session cookie is not being passed to the frontend, so it is not allowing me to login or stay logged in.
I should add I am also using isomorphic fetch.
So essentially Electron doesn't play nice with cookies by default, so the cookie was being passed to the FrontEnd, but electron wouldn't see it.
There are two ways to solve, one for more up to date versions of Electron and one for other versions.
For newer versions, include this in your main render path. (Not in the one with the browser info).
const {session} = require('electron')
It should allow from there. Otherwise refer to
Where to place electron-cookies?
Have a hack is not and can post later if someone can't get either to work. Thought I would comment so others know.
I have recently been migrating my app from Meteor JS to Ionic Framework. One that has been a struggle is finding a really good plug and play Facebook login oAuth.
Currently it just needs to control view access based on logged in or logged off. As well as returning the Facebook user id.
I have searched for many with Ionic and the best I have gotten to work so far is ng-cordova. But it is rather confusing because it references another git repo from Wizcorp, and seems to run several errors upon setup.
So I am curious is anyone has a better tutorial to follow, or an overall sure fire plugin.
I did facebook login using Openfb+ InAPP Browser .
First create App on developer.facebook.com and then use In App Browser plugin
And adding to the answer, you have to build the login flow, manually.
Facebook: Build the login flow manually
I will be glad if someone could answer the following questions
How does it work?
Why is it necessary?
What does it improve?
Client side routing is the same as server side routing, but it's ran in the browser.
In a typical web application you have several pages which map into different URLs, and each of the pages has some logic and a template which is then rendered.
Client-side routing simply runs this process in the browser, using JavaScript for the logic and some JS based template engine or other such approaches to render the pages.
Typically it's used in single page applications, where the server-side code is primarily used to provide a RESTful API the client-side code uses via Ajax.
I was trying to build a Single page application and came to know about client side routing.
By implementing client side routing I was able to achieve the following
The front and back buttons in the browser started working for my single page JavaScript application. This was very important while accessing the page from a mobile browser.
The user was able to Bookmark/share a URL which was not possible earlier.
I know that it's late but I have some information about how the client side routing (CSR) works. This answer does not try to provide a full js implementation of client side routing but rather tries to shed some light on what concepts will help you implement one of your own. It's true that when user click an anchor tag, the browser sends a request to the server. But we will be able to intercept the event and prevent it's default behavior, i.e sending a request to the server by using "event.preventDefault();". Below is snippet from React routers web page.
<a
href="/contact"
onClick={event => {
// stop the browser from changing the URL and requesting the new document
event.preventDefault();
// push an entry into the browser history stack and change the URL
window.history.pushState({}, undefined, "/contact");
}}
/>
Also listening to forward/backward button click is important. This can be done by,
window.addEventListener("popstate", () => {
// URL changed!
});
But looking at the above two snippets you can imagine how a CSR could be implemented. There is much more to it. That's why libraries like React Router exists and web frameworks like angular provide CSR by default.
If you want more information please visit the link below, it will take your the concepts page of react router.
https://reactrouter.com/docs/en/v6/getting-started/concepts
Also if you want to get more depth into the topic your could check out the code of Angular router. Comparing the two implementations will give a much more insight.
What :
In react the history object takes care of that what it does..it keeps track of all the addresses and the Router defines all the different routes. So Router takes the help of this History object to keep a track of various addresses / History of the current URL and based on that location it serves the appropriate content.
Why :
To reduce unnecessary reloads.
For better user experience.
It's internally handled by JS.