Questions about Vue js Pusher

Question

I am following a tutorial that has to type the following command to create a Vue project:

It create a folder called music-db, then it type this command being inside the folder;

vue init webpack frondend

When typing this command only a folder with the name of frondend, and when entering the frondend folder there are other folders.

then this 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 type this command again:

yarn install

And then it leaves the folder frondend and enters a folder with the API name that is inside the music-db folder, this in the tutorial, however this folder was not created in my project.

Earlier when I executed the command vue init webpack frondend

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

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

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

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

What is my doubt?

• How do I create this API folder inside the music-db folder?
• Did I miss some command in the tutorial above?
• And what is Pusher for in a Vue project?

The questions seem really stupid, but it’s because I’m still learning and there’s no one to ask for help on this.

Answer 1

I’m new to Stackoverflow, and I don’t know if I understand you very well, but I’ll try to help.

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

Answer: Probably the tutorial refers to an application in Vuejs2 and Laravel, in the case there are two separate folders, the "frondend" which is the front-end application in Vuejs2, and the "api" folder which is the back-end folder in Laravel. I couldn’t verify the creation of the api folder in actually at any time of your code. If the tutorial is vuejs, it’s probably teaching with a focus on the front end, and it’s not really explaining the creation and functioning of the back end. If you want to create a start back-end, 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 will cite those focused on Laravel. First you need Poser if it is not installed, you can check in getcomposer (If you don’t know about Composer, it’s a php dependency manager, find out more). Then go to the documentation on Larable and select the best way to create a new project, recommend by Composer with the command composer create-project --prefer-dist laravel/laravel api (the last parameter is the folder name). Do this, to run the application on a local server use the command php artisan serve. It will run a local server on port 8000. After this, you should check what exactly the front end is consuming from the API, so you can implement the whole process. The basic flow of a tutorial is usually to create a model using the command php artisan make:model NomeDaClasse -m ("-m" is for creating Migration that will communicate with database). A route in the api.php file in the Routes folder. Finally, create a controller php artisan make:controller PhotoController --resource (the "-Resource" the Laravel already provides the whole system of get, post, put and delete routes with only one line). Now just implement according to the front-end. Everything can be found in the documentation.

• Did I miss some command in the tutorial above?

Answer: I can’t be absolutely sure but I don’t think so. A command containing vue init webpack frondend just initializes a Vuejs2 project, not an API file in Laravel. In this case, the . env is the location where all the environment variables are stored. He 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 Vue project?

Answer: Frankly, I have never used it, but I will try to respond on the basis of the little knowledge I have. The Pusher in the tutorial can be used next to the Laravel-echo, which is a library for holding events on a Websocket connection. In the case of Vuejs2, key synchronization may be required to synchronize in real-time (live-update) Vuejs2 screens, that is, when some data is updated on the server, a message is sent to the 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 shot in Laravel, the server, with your client application (front-end) in Vuejs2 , or any other javascript application.

I hope I’ve helped.