In my express backend, this is the order of my routers:
1.All the api routes (example: /notes)
2.The catch all route which sends back all the frontend code. (the react build folder)
On the client side I'm using React Router and all my routes are named differently from the api routes. (example: /me/notes)
However now when I go to the route /notes (my-website-name.com/notes), it sends me back the json data instead of the client side code.
Any way how I can always send back the frontend code instead of the json data?
API and Frontend are generally served from 2 different domain names in such cases.
And the host of the frontend application should return index.html on all the routes.
Example:
API:
https://api.myapp.com/notes -> responds with notes list
Frontend:
1. https://myapp.com -> returns index.html
2. https://myapp.com/<path> -> still returns index.html.
React Router handles dynamic <path> when frontend app is loaded.
It really depends on the hosting how to make server requests to always respond with index.html, but I hope it gives you an idea.
Related
I'm currently working on BigCommerce application using Reactjs and Laravel. To install app in BigCommerce, there are three important routes (install, load and uninstall). I placed them in the web.php file. The view route is also in the web.php file. All others routes are placed in api.php file.
At the start, I get the logged in client in PHP and I store the data in the session. But after redirect, the session is lost and a new one is created for each request (redirection and api calls).
The only way I keep the same session is when I return a view instead of redirect url. However, I can't return view because I'm using React and not blade views as front.
Has anyone ever had this problem before and find a way to persist session ?
Per the comments -- This was solved by having all routes in the web.php file and utilizing Laravel Sanctum to allow the persistence of the session and protect to the routes access. :)
I have an angularjs module deployed on a nodejs server. The nodejs also has an REST end point.
Whenever I get a hit in the nodejs REST end point, I want to update a scope variable in angularjs script and then I have to redirect the user to a page after that.
I thought of using event emitter, but i couldn't do that since the event emitter require response.write, and I couldn't redirect to the page after this.
Is there any way I can do achieve this ?
You should use EventSource to send notifications to client. It's built for that purpose. You can use EventSource package for that purpose in Node.js.
You shouldn't redirect the client from the server, if you're using Angular's routing. Instead let the Angular Router redirect after it receives the push notification.
That question has a lot of articles around the web discussing it, but given how recent I am to web dev I think I am missing a few pieces to get the full picture.
My understanding is as follows:
Let us assume we have a Node.js server and we're using express for our web app. Client rendering is when I don't enter a URL in the web browser that creates an HTTP request to my server. Instead, the client requests comes from a JS script(that was loaded from the server initially when I accessed the application using the root route for example: http://localhost:SOME_PORT/). So, let's say my request is to fetch some information about a certain user from a database. Instead of going through the server, the JS script(using AJAX) for example does an XMLHTTPRequest directly to the database(say I trigger this by a button called Fetch) instead of going through my server and then the client(the browser) will get a response and in turn will create an HTML document and render it. As opposed to server-side rendering, where I for example enter a URL in the browser, and the server intercepts the request, and prepares the HTML document along with the data requested(if any) and sends it back in HTML form for the browser to render(hence server-side, no work was done on the client-side but actually displaying the page).
Is this accurate? What am I missing in my understanding of both and when to utilize either style?
Let us assume we have a Node.js server and we're using express for our web app.
It doesn't really matter what software you use on the server, but we'll use that for the example.
Client rendering is when I don't enter a URL in the web browser that creates an HTTP request to my server. Instead, the client requests comes from a JS script (that was loaded from the server initially when I accessed the application using the root route for example: http://localhost:SOME_PORT/).
That would have loaded an HTML document which loaded the JS with a script element. You wouldn't load the script directly.
So, let's say my request is to fetch some information about a certain user from a database. Instead of going through the server, the JS script(using AJAX) for example does an XMLHTTPRequest directly to the database
No. You still make an HTTP request to the HTTP server.
(say I trigger this by a button called Fetch) instead of going through my server and then the client(the browser) will get a response and in turn will create an HTML document and render it.
Ish.
The client already has an HTML document. With client side rendering, the DOM generated from that document is modified (usually with new data requested from the server).
As opposed to server-side rendering, where I for example enter a URL in the browser
To keep the scenario as close to the Client-side rendering example as possible, let's say you click a link instead of entering a URL.
, and the server intercepts the request,
The request is explicitly made to the server, it isn't intercepted. That would imply it was intended for somewhere else.
and prepares the HTML document along with the data requested(if any) and sends it back in HTML form for the browser to render(hence server-side, no work was done on the client-side but actually displaying the page).
Basically.
The short version is:
With server side rendering, a complete HTML document is prepared on the server and delivered to the browser.
With client side rendering, the DOM is manipulated on the client to produce the same document.
My app's frontend is done in Angular while the backend is in PHP. For this last reason, I am using Apache as app server.
I want to use Angular's routing feature, that is, $routeProvider.when(), with conditional params (aka named groups) such as /user/:id/, where :id would be a parameter passed to the controller specified in the route.
Obviously, Apache tries to handle the request e.g., /user/21 by looking for a resource called 21 inside of the user directory, and thus returns a 404 error, instead of letting Angular routing load the resource at /user and using the value 21 to do internal stuff (such as calling an API).
How would I have to setup Apache so that some requests are left to be handled by Angular?
If I run gunicorn can I support pushState and the HTML History API on my Heroku-hosted app?
I would like to not have hashes in my Backbone/Marionette app.
Unless I'm mistaken, gunicorn will have nothing to do with this. To use pushState, your server must return a valid page for any URL your client-side application generates.
For example, if your Marionette app has a "/articles/5/comments" URL, the server MUST respond with valid content when it receives that URL.
That said, your server can systematically return the same content (e.g. via a catch all route) that simply contains your complete Marionette app. Then, the client side app will take over, aprsing the route, and loading the data.