I am a beginner with react and redux. I have searched a lot but all I get is server-side rendering, but I don't want that (correct me if I'm wrong). What I want is this:
My react-redux app calls an API to get some JSON response. The problem is that there is no user authentication (and won't be). Therefore I want to have a Token for my API calls. I need my react-redux app to obtain a token on the server-side from my locally hosted PHP (Laravel) app through an API or HTTP request. Then set that token for my client-side of the react-redux app.
I simply don't know where to start and how to have this server.js in my react-redux app.
Here is a good starter tutorial explaining how to hookup use Node and React together.
https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app
Related
I am aware that this does not seem sound, especially given that NextAuth is supposed to provide client-side authentication.
But I'm in a situation where I am required to test a repo with NextAuth, but I can't migrate my original code yet. This results in the workflow to separate the code into repos for client and server, yet still using NextAuth on both repos.
I am currently trying to implement the signIn() method in the client side and get the credentials from the server side, but the signIn flow is always trying to access the api from the same domain where the signIn() method launches.
ie. Client is on http://localhost:3010 and I expect it to connect to http://localhost:3000/api/auth/ but instead it attempts to connect to http://localhost:3010/api/auth/.
I saw that I can configure environment variables to specify different routes such as NEXTAUTH_URL and NEXTAUTH_URL_INTERNAL but I'm unsure if these modify the parameters I need to make it work how I need it to work...
How does NextJS with API routes differ technically from running an Node.js server with Express.js?
For example - If I want to develop a full-stack web application with MongoDB, can I use only Next.js with API routes for that purpose? Is connecting and modifying the database safe from the API routes, or is it a security risk?
In other words, are the Next.js API routes exposed into the client browser where the end user would be able to modify the code?
Nextjs API routes are ran serverside. Per the docs,
They are server-side only bundles and won't increase your client-side bundle size
So the end user is unable to modify the code. Just make sure they are in the /pages/api folder. Read the docs for more info: https://nextjs.org/docs/api-routes/introduction
I am looking for some Next.js Architecture advise please 🙏
I am in the middle of migrating a very large express NodeJS app which has a custom SSR setup over to a Next.js setup.
For the current NodeJS site I have:
A bunch of routes (which hook up controllers / apis, do fancy redirections etc)
Have a ton of middlewares
Ton of logic in a bunch of express controllers (these controllers do things like API calls, transforming data, validation and the SSR of some React components to form the application)
Most of the time the NodeJS server calls other Microservice APIs (on the same VPC) to fetch data within these controllers (eg: search api, auth api, location api etc - which are all seperate REST api servers) Note: when it fetches from these APIs its done so on an internal api address only
The React Website itself calls the same NodeJS server to fetch data via client side JS when there is a route change eg: The frontend URL would be: www.mywebsite.com.au
And any api call done from the frontend is done with route: www.mywebsite.com.au/api/*
Based on all the docs i have read so far, I figure the best setup is:
To keep my existing express setup for routes / middlewares (for which I have a ton of) this includes the /api/* ones
Migrate controller fetching logic to the publically accessible express apis /api/* (which I kind of already have but need to clean up)
For the existing express controller routes, route these to Next.js instead and use nextApp.render to specific next pages
Use getInitialProps in the Next.js pages to fetch data from those apis I mentioned in 2.
Also add the old prop transform logic that was in the express controllers to getInitialProps
This is so that the server and client share the same logic of whats in getInitialProps - and this will make the architecture clean and give me the ability to have smooth transition to use Link.
The thing im struggling with it is step 4.
It means now on SSR of a page request it needs to call out to the public api (www.mywebsite.com.au/api/*) on getInitialProps to fetch its data.
To me seems like a performance overhead to do this as it requires a network hop to public domain mywebsite.com.au to fetch data it could have got locally on that same request (by calling localhost:3000/api/* for instance)
Any advise on how to avoid the network hop outside for server render?
Can I detect if its a server render and then use an internal URL (eg: use localhost:3000/api/* on the request to the same web server) or is that not best practices when using Next.js?
The server needs to call out to itself to fetch its data, alot of the overhead involved with fetching data is around the delay (I.E Between the client and nearest datacenter) this will be less of a concern when its (datacenter -> datacenter).
If performance is still an issue, your next best bet will be to do SSR caching, of which there are many different methods alot you can find in a quick google search however it will depend on your hosting/setup.
I treat listing-page.jsx and handler for api/listing route to be the same. You may need to write 2 small functions to extract the parameters passed into the request and pass it down to your service module function like ListingService.getSingleListisng(id)
I have a few applications. For each I need an authentication service, I have written this service separately. How is it possible to use this authentication service in different web applications?
The reason for separating is that I do not want to rewrite this service multiple times.
Would lerna.js be an idea to implement such a construct?
Or are there any more sensible solutions?
So you are using microservice architecture where you have written a completely separate application for authentication. This is completely fine.
Now what you would do is, deploy all the microservices and let other services to use auth server for authentication. How would you do that? Well, you can do it using our friendly RESTful architecture. Lets say you have a service X. When you try to access X, X would send a request to Auth server. Auth server will response back to the service X if you have access or not. If you have access then X service would response you back with data or authentication error.
Do you get me?
I am building my first full stack application. I have two seperate apps, a client app built with create-react-app and a node express server to serve json.
Currently, my create-react-app which uses Redux, makes ajax calls using axios to the port that my server is running on. I have set up authentication for the server to exchange a token with my client upon success.
My goal is to make use of the Spotify API. For their authentication, it says I need to get a authentication token from their server via my server.
I am not sure the proper way to go about this.
Currently my thought process is to have my client hit a new route in my server via a axios ajax call to have my server asynchronously exchange the token with the spotify api and then send it back to the client.. is this the proper way?
I've seen various other examples of this being done but they have their node/express app manage the routes for their entire application.
Any help would be greatly appreciated thanks.