I have a Lumen application which frontends uses ReactJS and on backend Lumen acts as a rest-api. With ReactJS I use react-router and when I refresh a react route than Lumen tries to find it's own.
$app->get('client', 'ApiController#index');
is the entry point to my ReactApp and I wonder if I could allocate all routes like client/* for React.
Is there a a way to do this?
Yes, you'll just have to define one more route:
$app->get('client/{namedParamEventhoughYouDoNotUseIt:.+}', 'ApiController#index');
Related
I have a la laravel breeze api app i just created, then associated a next.js app as frontend. I am trying to spscify a middleware from laravel into next.js pages but i am not sure how it works. documentation is not clear either.
Read the documentation, when through several vdieos but i am not finding anything realted
I am trying to access $axios in Vue composition API without using useContext() because the current app is not a Nuxt app and is like a library that either can be used inside a Nuxt app or Vue app. So if I use $axios in the code then in Nuxt app it can be called serverside too. if anyone can help it would be very helpful, even if we can made this mechanism with inject/provide.
Nuxt 3 officially recommends using $fetch for making http request
Note that $fetch is the preferred way to make HTTP calls in Nuxt 3 instead of #nuxt/http and #nuxtjs/axios that are made for Nuxt 2.
https://nuxt.com/docs/api/utils/dollarfetch
However if you want to set it up for example to add headers, you can create a composable and work with it throughout the nuxt app
import axios from "axios";
export const $axios = axios.create({
baseURL: BASE_URL,
headers: {
...headers
},
});
I am working on an app right now I just want to know is it possible to create a separate backend for the next js application because I want to connect react native app and web application with the same backend. Is it possible? and can I use getinitialprops and server-side props while having separate backend???
Yes, you can.
API Routes of Next Js can be use as backend, but it is optional.
getinitialprops, getServerSideProps, getStaticProps, are fetching methods of Next Js to handle the data and APIs in a headless way, so you can use any backend that expose an API.
Here are few ides for the arquitecture:
Next JS for webapp and Backend, React Native fetching Next Js API Routes
Next JS and react native in one project https://docs.expo.dev/guides/using-nextjs/ and any backend that you want to use
The last is project for each (Next, React Native, Backend)
Backend is all about having the data. Nextjs has many fetching methods for both server side rendering and static generation. To fetch the data from backend, you can go with getStaticProps, getServerSideProps or getInitialProps. You can also fetch data locally by providing a simple json file within the application.
I have seen many people using nextjs with expressjs and without expressjs framwork. Can someone please explain why do we need expressjs with nextjs? Nextjs works as SSR without expressjs. What does expressjs add to nextjs when we use it together? Assuming that we are using different rest api server.
You don't need to use expressjs if all you want is server-side rendering. But if you want to go beyond that by adding an API, as an example, then you need to be able to override the routing and that's when you'd add expressjs in front. Express will get the request and see if it is for the API or if it's just a normal nextjs page. LogRocket has a very good tutorial on this https://blog.logrocket.com/how-to-build-a-server-rendered-react-app-with-next-express-d5a389e7ab2f/
You most likely don't need to override Next's default server. For edge cases where you do, you'll see examples showing a custom server extending Next's default. You can use whatever server framework you want – Express, Hapi, etc.
https://nextjs.org/docs/advanced-features/custom-server
I am doing a project using react, redux and express, I don't understand what is the difference between react-router and the express routes.js, did I need to combine the two or just use one ?
https://github.com/reactjs/react-router
Thanks for the help :)
Note: this stackoverflow post contains examples and codes that could help you a lot.
It's a classical misunderstanding. Express will handle your backend routes whereas React (with react-router or any front-end routing lib) will handle frontend routes.
Your React application will probably be an SPA (single page application), meaning that your server (express or something else) will have to serve the index.html and react will handle your application from here. Which mean that React will evaluate the routes and decide which view to render.
Therefore, you have to ensure that when a users goes on a route like /accounts/me, the servers serves your frontend (react) application if needed, but something like /api/users/me would render data. It's just an example.
A "normal" usage would be to handle your data (via an API) with express and the application (pages and views) only with React.
If you are using server-rendering, it becomes a bit more complicated.
In most cases, yes, you will have to use both.
Edit: it would be easier to answer if your question was more specific about your usage and what you want to do.
Edit 2: Most of the time, it's not the same servers serving the frontend application and the API (data), if it is, just ensure that the application is send when some routes hit the serve: i.e /home, /about (which are obviously -here- not api routes) should be send serve index.html as your frontend application, and React will take care of the routes to decide what to render.