Ways to test Nuxt.js frontend and Laravel Backend - laravel

I am looking for ways to test both Laravel API and Nuxt.js (frontend) at the same time.
A simple case where I want to test is the contact form. I can use jest to test that I submited the form and confirmation message appeared and I can test the api that when receiving certain data it returns ok but what would be the correct way for an integration test of the two?
For example if I want to test that by submitting the form the data are stored in the database?
I think the way to go is Laravel Dusk. Is this right? Can it be used for testing Nuxt.js? If so, how would I do that?
I have two different repositories, and in my laravel travic ci i git clone the nuxt.js and build it.
Can I just target the nuxt url with dusk? Or are there any other alternatives?

Related

How to set up authorization using js-SSR and SPA?

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.

How to deploy vue-codeigniter separated logic app on shared hosting?

let me explain the situation.
I have two front-end apps build with vue, one for client and other for admin.
And I build rest api with CodeIgniter.
As you see I have a separated logic here.
When I run build for the two apps and upload them along with the rest api to the server.
It will not run !
There is No logic to Deploy Codeigniter
Simply deploy it.

How to store data in VueJS with Laravel 5.4

Im building application like real time dashboard. Using many databases and external APIs.
(The first Idea was AJAX + Laravel Queues, but I found VueJS and It's interesting.)
The idea is to get the data in background with Laravel Queues from all sources and then storage it localy. Next step is getting this data with VueJS.
The problem I have is the storage part. I dont have idea and actually dont know how to store it so VueJS can efficiently get this data from storage and on the other hand Laravel can save the data to it the same.
There will be many users loging in a system so I created the MySQL database for them but dont know, if it's a good solution.
Thanks for advices!
You create routes for Vue.js to make XHR(Ajax) requests to. If you want to save data this would be a post route. If you want to retrieve data this would be a get route.
How you handle the data you are sending or (directly)receiving is of no concern to Vue.js.
This would be a good start:
https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18

Consuming Laravel Passport API with javascript (React + Axios) from another application

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.

Laravel: Understanding which api framework to choose

Our company is about to start a real estate project and have decided to go with the laravel 5.3 framework. The first phase is to write the apis and then these apis will be consumed by the mobile team and the frontend team to build the official mobile app and the web portal respectively.
Now I am confused whether to use laravel's built-in Resource controllers (as instructed in this tutorial http://www.programmableweb.com/news/how-to-build-restful-apis-using-php-and-laravel/how-to/2014/08/13) or use the Dingo Api framework.
Could you please help me which one should I go for and why as per the requirements i mentioned above?
Thanks in advance
Since, Laravel 5.3 comes with Passport (for api authentication), I would suggest you to use Resource controller, which is very simple and easy to work with, and also it create a meaningful end points
Route::resource('post','PostController');
GET /post/{post}
POST /post
EDIT /post/{post}/edit
DELETE /post/{post}

Resources