App development setup with PHP and Vue.js - php

I am new to Nextcloud app development and would like to create a simple app to play around. I saw that some apps are made with Vue.js, so I’m asking if there is a guide out there?
I generated an app skeleton and played around with the PHP templates but unfortunately I don’t know PHP and would like to create a Vue.js project into this existing demo app.
I found some premade Vue components for Nextcloud
https://github.com/nextcloud/nextcloud-vue
but no step by step guide on how to setup the Vue project after creating the skeleton app. I just saw that the Nextcloud app Tasks is also using Vue.js within the PHP code:
https://github.com/nextcloud/tasks
Thanks a lot for help.

I've looked at the repository you mentioned and it's fairly easy to setup, the question is what would you deserve after setup? If you clone the repository you have something like a 'working copy' of the plugin. But this Plugin needs to be build and the resulting package needs to be copied to right location at the nextcloud server (or maybe you have to install the package over frontend). This is some type of plugin and not a full web application which could run standalone, as I understood.
It's not like you said:
Nextcloud app Tasks is also using Vue.js within the PHP code
It's more like PHP is used for Backend and Vue is used for Frontend, these two 'projects' are completely independent from each other (PHP is backend and Vue is frontend there are no direct dependencies). Just create your Vue application (after build you will have an index.html and several js and css files) these files have to be available from browser. Then your applications entrypoint is the index.html. For PHP: You will just define Interfaces and Routes here which will give you the possibility to interact with the serverside. Then later to deploy your plugin, you have to package it in the format nextcloud needs. You can read from Makefile in the Tasks repository what happens if package is created.
I think a good starting point for you would be: https://docs.nextcloud.com/server/15/developer_manual/app/tutorial.html

Related

Deploying Laravel and Nuxt.js application. Combine them, or deploy separately?

I have been developing a website that uses Laravel (v6) on the backend, and Nuxt.js (v2) on the frontend. The idea was for laravel to act as an api & oauth2 server, that also server side rendered the Nuxt.js app. From my research, it seemed like this was not only a common route, but not too much hassle to implement.
While developing, I have kept the backend and frontend as completely separate projects with their own git repos and all that jazz. This is my first time deploying/developing a project like this, where there are two completely applications for the backend and frontend, so all this is very new and a little challenging at times. Now when it came time to deploy them, I always imagined that I would somehow merge the projects and that I would be able to setup Laravel to server side render the Nuxt.js app. However, I am now at that stage and trying to merge them with great difficulty.
Currently I am using the "laravel-nuxt" composer package and "laravel-nuxt" npm package in an attempt to connect the projects in one repo. However, I am having difficulty doing this. I've searched far and wide for a good resource on this process and have yet to find one that explains the process thoroughly. I even purchased a course on Udemy on the topic only to find out they didn't merge the projects! They deployed Nuxt to firebase and didn't even cover how the deployment of laravel.
Anyway, this is my question(s): should or could I keep the projects separate and have 2 completely separate deployments? Or rather, if I keep them separate, how do I deploy nuxt in a way that still gets server side rendered? To me it doesn't matter if they are separate or together, but the most important part is that the nuxt app utlitlizes SSR (server side rendering) for SEO purposes. So am I on the right track? Should I keep these projects separate or should I continue trying to merge them?
Sorry if this is unclear, I am rather frustrated and kind of losing my mind. I would really appreciate any feedback or point in the right direction. Thank you for your time in reading this, and I otherwise hope you have a good day :)
I recently developed something with a similar structure, Nuxt.js frontend and Directus CMS as backend.
I kept backend and frontend separated repositories and also deployed both separately. The reason why I decided to do it that way was because both need different packages on the server side and use different eco systems.
Frontend needs only Node.js backend needs a webserver, database and PHP. I think this should not be mixed.
For backend I used my existing server where I already have stuff running like Nextcloud or a blog behind a nginx webserver.
For frontend I used Dokku which I can only recommend for deploying Node.js apps. Nuxt.js has instructions on how to deploy to it.
Most important for you is that SSR is done by Nuxt.js, you don't need a separate webserver for that. Just build it and use npm start. Depending on your installation/deployment you have to use nginx as proxy to avoid calling the app with a port number. Another thing that Dokku does for me automatically, if the app respects the PORT environment variable.

How to make desktop .exe of web application in Laravel or PHP?

I want to make desktop .exe of web application like laravel web application or php.
Look into PHP Desktop
https://github.com/cztomczak/phpdesktop
This project that was created to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite.
That said, Laravel is a web application framework, and is not optimized to be run as a desktop application out of the box.
I would consider something like Electron:
https://electronjs.org
To name a few of the applications created with this wrapper:
Slack
Github desktop
Atom editor
Visual studio code
...and more.
Please note that this is just a wrapper for the frontend of your application. While you can still use Laravel as a backend API for your application you would still need to build the application itself as a separate javascript frontend.
If you are familiar with VueJS that ships with Laravel you should be able to use that framework for your Electron-frontend.
A couple of tutorials that might be interesting for this approach:
https://scotch.io/tutorials/create-a-desktop-quiz-application-using-vue-js-and-electron
https://www.toptal.com/laravel/restful-laravel-api-tutorial
Making desktop .exe of Laravel application is easy!
GitHub Repository: https://github.com/laravelarticle/laravel-desktop
Download the repository & extract.
Put your Laravel application into www directory.
You can use this : https://github.com/cztomczak/phpdesktop
and then check Downloads section for more detail.
When you download this extract it on your wamp or xamp then put your code in www and check you can run your app by clicking on phpdesktop-chrome.exe its just simple.For more details you can ask any query.

Best practice for Laravel 4 + Zurb Foundation 5?

TL;DR: what is the best way to arrange files, package managers and build tools for Laravel 4 + Zurb Foundation 5 combo (with Compass) as one consistent repository with clean public (static) section?
I wanted to start a fresh project, based on latest Laravel on the backend side and using Foundation for the frontend. I am new to both of these and apparently I missed some of the tooling that was developed meanwhile when I wasn't doing PHP for some time.
My confusion:
Laravel uses Composer for installation and dependency/module management. (Ok, I'm new to Composer)
Foundation is available as a Composer module (but then what?), but generally also as a CLI tool that creates a new project and uses bower for module/dependency management. But then I have two repositories.
Is it required for me to expose all my .scss files, or maybe even put the whole Foundation project into laravel's public dir to make all work?
How do people usually approach using these frameworks together? They shouldn't interfere, but they still have totally different tooling.
Where do I put my foundation files? Keep it as composer module or inside public? How to refer to them? How to have one build everything command?
I have the same issue as using Bootstrap SCSS version for Admin & Foundation SCSS for the frontend. I noticed also that both css frameworks come as composer packages however the issue you have with this approach is that you generally use other Javascript files in a development that will be merged also so using the composer versions just adds to the confusion.
The best solution i found was using either gulp or grunt with bower at the top level of your Laravel build. Rather that go through the configuration for you there is a good article at http://blog.elenakolevska.com/using-grunt-with-laravel-and-bootstrap/ that goes over a bootstrap integration but this can be tweaked for Foundation. This solution is good as grunt has many of the other popular javascript libraries that you may use in your project also..
Alternatively you could use an application like codekit and create a compass project to manage the merging & compiling of your assets into the public folder. As a side note if using git again your would need to exclude additional folders from your project.
If you think of your SCSS framework files as development assets there is no real need for them to be in the project as you only really need one version of Foundation on your development machine.
Your custom SCSS changes can be added to your Laravel project as modules ie a navigation module, via a private composer repo for the project or just added to the Compass project at development time. Your public folder should only be referencing the final merged style.css & java.js files for example. Any images from the framework can then just be copied over to the public folder ie icons etc.. Hope that helps..
Personally I have a "static" directory which houses static files. That is where I use SASS watchers, grunt tasks and basically the entire front-end workflow. The results of that front-end build process gets added to a "production" Laravel public directory after getting built, etc.
A pro of this is that everything (static assets and laravel application) is separate.
A con is that updating Laravel views with any updates in HTML templates you may build in the static directory. If you update the templates, you may also need to update the view files, which becomes more tedious as you add more templating logic around the HTML in the views.
Just one suggestion.

Creating a Yii application setup / installation page

I am creating an application and will be deployed to production soon.
For the ease of convenience, I would like to create a custom setup and installation page which will allow users to input variable values to be used in config/main.php as well as to execute the RBAC setup and create necessary tables.
For most web application, there is an 'install' folder which users point their browsers to and begin the app installation. How do I implement something similar in Yii?
I think a great start were the app manager extension which provides much of what you need. It doesn't do anything with the RBAC setup, though. Perhaps you want the auth extension as well?
Yii does not have an installation folder, you just download and extract it and put in your server like Wamp/Xampp or etc. and then you can install a new Yii application through command prompt.
C:\wamp\bin\php\php5.4.16> "c:\wamp\www\yii\framework\yiic.bat" webapp "c:\wamp\
www\newyii"
When you run above command, then you will see the following command.
Create a web application under 'c:\wamp\www\newyii'? [no]:
You write Y. and then create your new application.
For more understanding. you should follow the below link.
http://www.yiiframework.com/doc/guide/1.1/en/quickstart.installation
Thanks.

Where can I find detailed resource about application structure with Laravel 4 and AngularJS?

I recently started to develop a social network, but the problem is i started to mix my Laravel view with AngularJS what led me to a few problems.
I was searching around the net but was not able to find any info about this.
Could someone help me out with this or give me a hint?
I prefer to decouple my Angular.js application from the backend (any backend). You can pick a tool like Linemanjs or Yeoman.
With Lineman (which is the one I use) you develop your app without any backend, in an "isolated way". You can use a fake backend while you are in development mode or even you can have laravel running at port 4567 (just an example) and tell lineman that there is a real backend at 4567 to create a proxy (so you can use your real backend even when your app is in a different folder).
The advantages are many. Decoupled from any backend, so you can switch it to others without any change in Angular. You can take advantage of a pre-configure set of tasks for grunt like Coffeescript, lint, sourcemaps, auto creation of $templateCache, ngmin to avoid minification problems, minification, concatenation... And more if you want.
You also have unit and e2e tests preconfigured...
In short, using this workflow you can create an Angular.js app which plays with any backend and provides you with a lot of tools to create your app easily.
To deploy, both lineman and yeoman creates a "dist" folder with your app itself, just a bunch of static files.
To deploy it with laravel, you just need to drop everything (except the index.html) to the /public folder of laravel. Then convert the index.html to something like home.php in the laravel's /view folder and create a route for it.
We only need to be able to serve the index.html with laravel and that is the best way I found. With that we are able to use html5 mode and make everything work perfect and both part decoupled.
Cheers.

Categories