Questions about pusher do vue js

0

I'm following a tutorial that has to enter the following command to create a project vue:

It creates a folder called music-db, then it enters this command while inside the folder;

vue init webpack frondend

When you type this command, only one folder with the name of frondend is created, and when you go into the frondend folder there are other folders.

then the following command is typed below;

yarn install

And then type this command below;

yarn add vuex vuex-router-sync vue-router axios animate.css google-material-color material-design-icons laravel-echo pusher-js

After these commands, he re-enters this command:

yarn install

And then it exits the frondend folder and goes into a folder named API that is inside the music-db folder, this in the tutorial, but this folder was not created in my project.

Previously when I ran the command vue init webpack frondend

It had only just created the frondend folder and nothing else, now inside the music-db folder it has an API folder.

What's inside the api folder? has a file named .env

There it picks up a password that is one in a file like this below;

It takes this pusher_app_key password and puts it inside the project vue.

What's my question?

  • How do I create this API folder within the music-db folder?
  • Did I miss any commands in the tutorial above?
  • And what is Pusher for in a project?

The questions seem very stupid, but it's because I'm still learning and there's no one to ask for help about it.

    
asked by anonymous 27.09.2017 / 11:05

1 answer

1

I'm new to StackOverflow, and I do not know if I understand very well, but I'll try to help.

  • How do I create this API folder within the music-db folder?

Answer: Probably the tutorial is about an application in Vuejs2 and Laravel, in the case there are two separate folders, the frondend which is the front-end application in Vuejs2, api "which is the backend folder in Laravel. I could not verify the creation of the api folder in really at any point in your code. If the tutorial is for you, it is probably teaching you with the focus on the front end, and it is not really explaining the creation and operation of the backend. If you want to create a backend from the beginning, assuming you already have some necessary tools installed, such as php 7.1, an editor that has extensions compatible with Vuejs2 and Laravel, etc, I'll cite those with a focus on Laravel. First you need the composer if it is not installed, you can check in getcomposer (if you do not know about the composer, it is a dependency manager of php, find out more). Then go to the laravel documentation and select the best way to create a new project, I recommend the composer with the command composer create-project --prefer-dist laravel/laravel api (the last parameter is the folder name). To run the application on a local server, use the php artisan serve command. It will run a local server on port 8000. After that, you should check what exactly the front end is consuming in the API for you to implement the entire process. The basic flow of a tutorial is usually to create a model using the php artisan make:model NomeDaClasse -m command (the "-m" is to create the migration that will communicate with the database). A route in the api.php file in the routes folder. Finally, create a controller php artisan make:controller PhotoController --resource (the "--resource" laravel already provides the entire system of get, post, put and delete routes with only one line). Now just implement it according to the front end. Everything can be found in the laravel documentation.

  • Did I miss any commands in the tutorial above?

Answer: I can not be absolutely sure but I do not think so. A command containing vue init webpack frondend only initializes a Vuejs2 project, not an API files in Laravel. In this case, .env is the location where all environment variables are stored. It is taking the password to probably synchronize pusher events and have real-time access to the API application with Vuejs2 (front-end).

  • And what is Pusher for in a project?

Answer: I honestly have never used it, but I will try to answer based on the little knowledge I have. The Pusher in the tutorial can be used next to laravel-echo, which is a library for holding events on a WebSocket connection. In the case of Vuejs2, it may be necessary to synchronize the key, to synchronize in real-time (live-update) the Vuejs2 screens, that is, when some data is updated on the server, a message is sent to WebSocket connection in order to be handled by the front-end. Basically it is "trigger" events, where you can share the same name of the event triggered in Laravel, from the server, with your client application (front-end) in Vuejs2, or any other application in javascript.

I hope I have helped.

    
06.01.2018 / 02:57