I have managed to make run Laravel 5.4 and implemented the API Authentication (Passport).
What I would try to achieve is to make this as my API server and build React applications that would interact on this API.
Does this mean I have to make routes on routes\api.php?
Let's say I have a React app name requestform on development and running on http://127.0.0.1:8080. How will I consume an api route with axios or jquery?
I can't seem to make the correct keyword to search on google and all the samples I can get are the ones that the API and the javascript application is on the same domain.
This post may have been answered by now. But if not then...
I think you are in the right track..
Does this mean I have to make routes on routes\api.php?
Yes. Your API routes will depend on this file.
Let's say I have a React app name requestform on development and running on http://127.0.0.1:8080. How will I consume an api route with axios or jquery?
Make sure your API Server is running, say it's on http://server.dev, you can consume the API in another app by http://server.dev/api/[your-routes].
I can't seem to make the correct keyword to search on google and all the samples I can get are the ones that the API and the javascript application is on the same domain.
This is a matter of what front-end programming you know. You can use any javascript knowledge to consume your own API with the same domain. There is already a Vue integration packaged in Laravel 5.4+ or just plain vanilla javascript or jQuery.
Related
I want to develop my own single page web application (SPA) to get to grips with the modern and highly fluid world of web development. At the same time, I would like to use the page rendering technology (SSR) with built in data into html. However, there is an authorization problem.
Suppose that the user has already logged into the account before, as I imagine re-opening the site:
First request: the client makes a request to the frontend server along with identification and authorization data (for example, user id and token; the only option is to save them in cookies), the frontend server makes a request to the api server, transferring these service data, then the api server gives the information about the user and the content of the current page (in the same json), the frontend server renders this into a finished page and delivers it to the client.
Subsequent requests: the client directly addresses the api server, transferring the same (or updated after the first request) authorization data, receives json and processes it independently.
Actually, I want to move on to the question. Do I understand this interaction correctly? Can you do it differently / better? Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests? Or a unified tool that includes the same coding for the frontend and backend to solve these problems? I will say right away that I would not like to write a backend in JS.
I can roughly imagine how you can get by with one request when using AngularJS (with a module for single page applications) and any backend MVC framework; although there will not be a full-fledged render, but search robots will not have to wait for my first fetch, since the data will be delivered initially, for example, through the data attribute. But in this case, I plan to choose Svelte (Sapper) and Ruby on Rails as the stack, although I think this is not important.
Thank you for your attention to the question!
Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests?
If that's what you want you can install a frontend framework in Rails using webpacker. After that you will have a folder in your rails project that will contain your Svelte components. Then you import Svelte components in erb templates and pass data as props.
I have tried that approach but personally I prefer a separate frontend and backend talking through API calls. Then in your frontend you need something like Sapper if you need SSR. With webpacker you don't(assuming you mostly use Rails for routing).
If you are worried about authorization it's not really hard to implement. And after login you can store user info on local storage for instance for subsequent requests. But of course if you install with webpacker it's all done within Rails hence it's easier.
From my experience, using webpacker it's easy and quick in the beginning but you are more likely to get headaches in the future. With separate backend and frontend takes a bit more work, especially in the beginning, but it's smoother in the long run.
This helped me set the authentication between rails api and vue frontend.
So, if you wish to separate them, just install Rails as API only and I suggest you to use Jbuilder to build your jsons and serve them to the frontend as you need them.
I'm working on a project where Laravel is the back-end and front-end is a ReactJS. I'm responsible for back-end only and we are building back-end as a restful api, so I'm using sanctum to authenticate user, there are no sessions, stateless flow. Now I need to implement a real time in web notifications. I was thinking about using Laravel Broadcasting: Redis + Laravel echo server. But the problem is, that frontend is not made on laravel. Its a simple ReactJS SPA, that uses back-end as an API.
My question is what is the best way to implement this functionality? I guess listening to standard events from that ReactJS app is not going to work?
while building with Laravel probably you may have faced the same situation where you have a RESTful service with JSON replies and, at the same time, you need to have a frontend able to consume those APIs to offer a web interface.
Now, the most obvious solution would be to use Laravel Blade template engine and to diversify routes according to the address (/resource or /api/resource). However, this approach brings in an additional burden, directly reflected in controllers, where are you have to consider not only the reply itself but also whether it comes from a device or from the web interface and reply accordingly.
I have also seen a lot of frontends actually detached from the backend and built using serverless technologies such as Angular or React, so that both the web interface and the mobile app consume the same APIs and the backend can be much simplified.
Let's take as an example a "Uber for..." service consisting of a native app, a PWA and an admin interface (web), which approach would be the most advisable and why?
Hi I have made a web app to practice Meteor and am now trying to make a companion chrome extension. I am having difficulty finding resources on how to make AJAX calls to my meteor app/mongodb.
An example of what I am trying to do is find specific words on a webpage and search them in my mongodb.
Any resources or information on how to best do this would be appreciated.
I suppose you know how to make Ajax call from client. So you are having difficulty in building a REST API in Meteor. Although it is not recommended to build a REST API with Meteor, you can still do it. If you use case just require a REST API and does not have much to do with reactivity, I think you should not go with Meteor, just Node and Express should be fine.
But if you really want to use Meteor, here is the solution: Meteor has a package named webapp which let you handle HTTP requests, that is enough for building a simple REST API. If you API is more complex, check out this community package nimble:restivus it has a better API and useful functions
I'm trying to build an app with comment system and wanna know if
is there any safe way to use the mongolab api without share my key with everyone?
if not what you guys recommend to use instead of mongolab api key with ajax.
Thanks.
Unfortunately there is no way to use the mLab Data API with Ajax and keep the API Key safe. We recommend implementing your own RESTful API server on top of your mLab database that can act as a gatekeeper to the database. Your client application would then make Ajax requests to the API server.
Although this tutorial uses Angular instead of Ajax, here is a good example of the architecture I've described: https://devcenter.heroku.com/articles/mean-apps-restful-api.