OctoberCMS (Laravel) + Vue.js + Tailwind CSS Best Setup - laravel

I am new with OctoberCMS. There are few tutorials in the internet. May I ask what is the best setup may I use or possible setup may I use with this web tech stacks?
We have a project and the requirement is we need to use octobercms so that's why we have to used this octobercms.
Possible Setup:
Micro Service Setup?
Two seperate folder for OctoberCMS and Vue.js. The communication would be an API Request calls.
Then for the deployment part for the production, we will use the dist folder from Vue.js Folder. I'm not 100% sure but I think this will be my initial thought that will be possible.
May I ask for any suggestions or clarifications on what will I use project setup. Thank you.

While it would be entirely possible to have two separate web properties with October providing the API, you can also just use Vue within an October CMS theme itself. See https://github.com/scottbedard/vuetober for more information on doing that.
If your project is more of a traditional CMS requirement then I would recommend at least trying the Vuetober approach. If it's a lot more complex and is mostly utilizing October for its powerful backend features, then the API-only approach could work fine too.
The main reason you'd want to go with running vuetober is if you were going to be utilizing the AJAX framework provided by October. You can still technically use it even when October is being run as a headless CMS just providing an API, but it gets more complicated with CORS and some other stuff you have to setup to make sure it works properly.

Related

Web Dev stacks - GONE WILD --- Best Practice Architecture & Deployment?

I've run into a problem that I'm sure many new/junior web developers are facing. Before I state the problem, it's best if I first list the events that drove me to the "issue".
Step 1 - The Front-End:
I followed tutorials which allowed me to create a Vue project using the vue-cli - I now have a nice front-end ready to go, albeit it is in a way "standalone". It sits in its own directory.
Step 2 - The Back-End:
I move on, I start to look at the back-end. Laravel plays well with Vue so I go with it. Once again I follow tutorials, I create a database and an API. Fantastic.
I now have the barebones core elements for a CRUD application. However, the way the back and front end are connected seems to be convoluted (although this may be due to my inexperience and improper understanding).
Solution 1:
Some tutorials insist that the Vue project is "re-created" within the Laravel directories so Laravel is in charge of rendering the views.
Solution 2:
Others, from what I can tell keep them physically separate and have the front-end interact with Laravels API only.
What are the best practices when it comes to stack architecture? Should we aim to bundle the stack together as proposed in solution 1? Is solution 2 even possible or is that due to my misunderstanding? If it is, how is deployment handled?
From my point of experience, both are correct and the answer depends on what you want to build 😀
First, if you have a simple website and you want to make the front-end of it in vue and it is only this one website, you can put it all together and make the frontend in Vue, which is handled by laravel in the backend and you are done.
Second, the step further, is for this case, that you can have several frontends for your project. Example: You have a website and several (native or universal) apps to display your data. In this case, you can build an API, that handles all the logic, all the business secrets, and this stuff, that no one should know in detail. After that, you are free to build any frontend (Vue, native, plain-HTML), whatever) you like, that's the only purpose is to display the data the API gives back (with some little logic in it, of the cause, but the secret business logic is hidden in the API). You can even outsource the generation of an app, so you build the website frontend in Vue and another one can build an ios-app with swift or an android app with kotlin.
Hope, you get the point, the answer is, as often: it depends 😉

Plain MEAN Stack or a MEAN Framework like mean.io?

I have very decent HTML and CSS skills and a basic understanding of JavaScript. I'm currently designing a system where different users can store an inventory list (a separate list for each user).
I started with plain Mongo, Express, Angular and Node Stack. But when researching about user authentication in MEAN-Stack I stumbled across Mean.io which seems to have a build-in user auth/management.
Is it usefull for a beginner to start with such a MEAN Framework or better to stay at the basics for a first try?
MEAN frameworks like MEAN.io or MEAN.js are great for structuring an app but you still have to understand how everything works. It may be better to go with tutorials from scratch to learn then use a framework once you want to actually build an app. Start with a node/express server using a simple html/js page to understand API creation then add angular to learn the frontend stuff. This will help you understand what MEAN.xx is doing with regards to the frontend vs backend. MEAN.js for example puts all the backend (E and N) stuff in the server/ folders and the frontend (A) stuff in client/ folders.

Building an app with Yeoman + Laravel

I would like to build an application using Laravel as backend and Yeoman to build and manage my frontend. I know quite a few of these technologies.
I did not found a lot of worflows that would explain how to communicate between separate Laravel app and yeoman app (on different servers e.g). Maybe CORS is a good option.
Is anyone ever try to separate backend and frontend (with these technologies)?
Yeoman is not a front end framework - rather an application scaffold for generating a starting point for your front end.
Angular JS is my preferred option when using Laravel as a backend. You can use Yeoman to set up an Angular front end using this:
https://github.com/yeoman/generator-angular
An excellent tutorial series that helped me a lot when setting AngularJS up to talk to Laravel is here:
https://github.com/davemo/end-to-end-with-angularjs
Included is quite an extensive explanation on AngularJS security.
The Laravel backend should be setup as an API in the first instance to accept requests, heres a starting point to setup a basic API in Laravel from Laracon 2013
https://github.com/akuzemchak/laracon-todo-api
Laracasts also has a great series for building API's:
https://laracasts.com/series/incremental-api-development
Laracasts is a paid subscription service but would fully recommend it to Laravel beginners/intermediates
I know it's a long time ago since the question was asked, but perhaps it helps someone on it's way..
I would start with this package:
https://github.com/jadjoubran/laravel5-angular-material-starter
Overview: http://www.laravel-angular.io/#/
which gives you:
Laravel 5.1
Angular
Angular Material
and much other stuff, preconfigurated, out of the box..
In short:
CORS is a bad option.
Issue all the requests to the frontend server and make it forward backend-specific requests to the backend server.
In production have all the stuff served exclusively by backend server.
Here's how to achieve that for Java-based frameworks and also for Django: https://stackoverflow.com/a/20680962/1432478
Should look similar for your framework & build system.

RESTful API with CMS Made Simple

I have a client with a content-heavy site built in CMS Made Simple. The redesign requires a mostly AJAX interface, and I think a frontend framework like Backbone or Angular would be the way to go.
I want to avoid moving off CMS Made Simple, though (client is used to that interface, it will be annoying to migrate all the data).
I think if I could find or create a RESTful api for CMS Made Simple, I'd solve my problem. But after searching around online, I only found CGSocialApp module, which seems to provide a limited API for things like user management. I've also looked into other AJAX solutions for CMS Made Simple, and there don't seem to be good modules for it.
If there is no ready-made solution for me, how complex would building a RESTful API module be? I haven't built a RESTFUL api in a PHP framework before.
Thanks for any guidance!
So, there is no easy answer for this question, as the CMSMS doesn't have a build-in RESTful API.
I would go for one of the two solutions:
1. Output the content as hand made json.
In CMSMS, you really have a lot of control on the templates. You could change the default templates to output json content instead of HTML content. The only issue is that the CMSMS will still send an http content-type header, that you can try to ignore in the JS part.
To access the menu, just remove it from the main template and create an empty page who output the {menu}with a custom template that also build json content.
That's the quick and dirty solution, but it should be very accessible in terms of doing it.
2. Create a dedicated module.
As far as I know, there are no modules that expose the CMSMS in RESTFul format, but a module is really very easy to build. Well, you can try to build it yourself, with the help of the community. It don't really solve the current problem, but it's a hint.
I hope it shed some light on the problem.

Codeigniter admin/auth system?

I'm starting a new project with codeigniter, and I'd like to start on a system that's already built so I can reduce the time of development.
Is there a good system that handles user authentication along with an admin interface to manage users that can be easily expanded to a web-app?
If this is too vague, I can expand
This thread here appears to have some answers
But the question was more about libraries. Either way, implementing some of the things on that thread would save you time.
You're looking for is a Content Management System (CMS).
There are a few ones out there that use Codeigniter as a framework for their CMS.
Edit: Even if you can't find a boilerplate CMS that you like, you can google about CMS's to design a simple one of your own as there's LOTS of tutorials and information about requirements and such when you know the term CMS.
I recommend Redux Auth for CodeIgniter. It comes with an example implementation, and can easily be used to manage user authentication for your CodeIgniter site. I just implemented Beta2 with the latest version of CodeIgniter, so while it's not actively updated, it still works with the latest build.
I'm using Bonfire as default admin interface.
I've just started looking into Bonfire:
Bonfire helps you build CodeIgniter-based PHP web applications even faster, by providing powerful tools and a beautiful interface you won't be ashamed to show your client.
Ready to customize Admin Interface.
User Management with Role-Based Access Control.
Fully Modular codebase.
Built around HMVC.
Database backup, migration, and maintenance.
Powerful, parent/child capable theme engine.
Simple Email Queue to keep your ISP happy.
UI-based module builder.
Looks good at first glance!

Resources