Which backend for Quasar ?

Incremental

Hi, after a lot of time spent on Joomla, I moved to October CMS, but getting frustrated by the unavailability of some backend widgets in the frontend, I moved to Vue.js for the frontend.
After trying some framework, I ended on Quasar which is for me the best

Now I’m still struggling to interface my Quasar frontend with October backend for simple things like :

uploading a profile avatar…
authentication with JWT auth

I discovered by chance a new tuto serie of Watch&Learn about STRAPI
https://watch-learn.com/dev-tools/lets-checkout-strapi-cms

Does anybody have advice on the best backend for a Quasar app ?
… and some feedback about Strapi ?
Thanks

s.molinari

Any backend you can connect to via REST or GraphQL is going to work with Quasar. Quasar is backend agnostic and there is no “best” backend for it. It’s 100% your preference.

Scott

dobbel

@incremental

Strapi plays very nice with Quasar. Especially with Vuex. Combined with vuex-orm and vuex-axios you won’t have to write any api calls yourself. And you get a nice backend app as a bonus to manage your data.

https://vuex-orm.org/
https://github.com/vuex-orm/plugin-axios

For prototyping , real time data apps or community apps nothing beats Meteor.js

Incremental

@dobbel thanks for these discovers !
I thought that I was starting to control axios, but I have to restart with new concepts…

The kind of backend I hope is something light and scalable avoiding to reinvent hot water at each project.
I thought October would be simple, but with the routes API it’s quiet touchy…

Meteor seems very interesting, but I don’t really see how it could integrate or replace Quasar ? It seems to be a full JS solution !

dobbel

@incremental

Meteor seems very interesting, but I don’t really see how it could integrate or replace Quasar ? It seems to be a full JS solution !

Correct , but meteor can also function as a headless backend.

Vue’s reactivity works very well with meteor’s build in reactivity. If for example you change a value in the database (directly or by a client app) you will instantly see the change in all your Quasar clients without any extra code.

Btw I use this to connect my Quasar app with a meteor backend:

https://github.com/Urigo/meteor-client-bundler

Incremental

@dobbel
Hi dobbel,
well I have a long experience in IT and started with assembly, worked with many alnguages including C, C++ and C#.
Now, I developp for fun as it’s my passion and I’d like to developp powerfull applications like we can see everywhere.
But I’m also very frustrated because trying to developp simple stuff with clients, categories, products and commands, is still a pain !
I have the feeling to return to assembly or C language, always having to redo the mechanic !!!

I thought that with October and Builder it could be easily done. It’s true from the backend, but false from the frontend, that’s why I moved to Vue.
I designed easily the database, (and the frontend with Quasar) but I’m really struggling with the route API to interface both with database.
Apart of that, the October plugin used for JWT and CORS has some problems and I’m completely stucked. Then I start to consider a restart of the server on an other “ideal” plateform…

As everything should be now kickly developped, I want to rely on :

a persistent plateform
one or two plateform, avoiding using my time to always udpdate and migrate…
well documented or supported architecture (ie: October people only focused on the CMS and doesn’t consider Vue interfaces)
a simple learning curve

Then to be able to set up :

simple websites (corporate or small and simple e-commerce).
October seems to be fine as it is sober and there are many templates and plugins.
For modern frontend templates :

Strapi is React --> another techno to learn ! Could it be used as a blackbox ? With Quasar or Frontend apps ?
Is Meteor applicable for that ? I’ve not seen any frontend template on the web

business applications.
Headless servers seems ideals. Not struggling with API should allow to concentrate efforts on business logic.
Does Meteor has a DB wizard like Strapi ?

At the moment, I use Quasar with Vuex, Axios and JWT.
Do you mean that installations should be :

Strapi + Vuex + vuex-orm + Axios + vuex-orm/plugin-axios + Quasar ?
or
Meteor headless + Vuex + Axios + meteor-client-bundler without Quasar ?
But the github project doesn’t seems to be very active…

Do you know good installations tutos for starting, I’m afraid to restart from scratch… ?
Thanks

Incremental

@dobbel and what about GraphCMS ?

dobbel

@incremental

Hi, that’s a long story with a lot of questions. I will try to answer them to the best of my knowledge and experience.

“ideal” plateform

There’s no ideal platform (like you said) for every situation, but for the frontend Quasar comes pretty close. From a backend perspective it really depends on a LOT of things.

For example Strapi as a ‘headless’ backend is awesome if you can create/fit your backend logic with the inbuild wizard and the available plugins/features. On the other hand if you need to heavily modify what happens on the server (because you need to do complicated things), Strapi is probably not the best choice. But to be fair I don’t know how (easily) customizable it is.

What makes Strapi great:

you don’t have to write API end points for your data (or authentication).
Strapi will be able to use a LOT of different kinds of databases( from MYSQL to mongodb).
It comes with a backend CMS dashboard where non developers can maintain content (with different roles) ala Wordpress. Yes it uses react but you probably never have to customize the backend dashboard GUI. ( if you do it’s probably not the best choice)
great doc and big community.

Strapi + Vuex + vuex-orm + Axios + vuex-orm/plugin-axios + Quasar ?

Yes but I would not use vuex-orm/plugin-axios immediately, I would first ‘just’ use explicit axios calls to test the Strapi API. Besides that I was pleasantly surprised how well the vuex-orm && plugin-axios worked together with the Strapi API. (removes a lot of boiler plate code). An alternative for Strapi with almost the same features is Directus v9.
https://directus.io/
https://github.com/directus/directus

Directus compared to Strapi:

it uses Laravel as a backend that uses Vue for its backend dashboard.
only support for SQL DBs, no Mongodb support.

Now to my favorite Meteor.js

Meteor headless + Vuex + Axios + meteor-client-bundler without Quasar ?

With Meteor as a headless backend( headless is optional) , you use Quasar in CLI mode to develop you frontend as you would normally do. Meteor-client-bundler is a (deluxe) connector that connects meteor with your Quasar app. It’s pretty simple therefor it doesn’t need frequent updates.( I tested it today and works for the latest Qv1 and Meteor.js V2)

Some things about Meteor:

Meteor is one of the few REAL full stack (web)frameworks frontend + backend. But because Quasar is awesome we use meteor as a headless backend.
default it uses mongodb ( I love it). No DB table/field/constraint configuration is necessary to get going ( it’s possible of course). Creating a ‘table’ (collection in Mongodb) is done by defining a collection in your code.
default it uses sockets with a pub/sub system instead of REST calls.( So no need for axios or JWT)
default all data is reactive from the database to every client. ( very awesome to see manual database changes being reflected to all your active Quasar clients instantly without any extra code)
1 codebase/repo for your entire app as Meteor is a subfolder(api) inside my Quasar repo. Therefor I can share code from meteor backend with my Quasar app with regular .js/json/ect. imports. ( very nice)
Meteor has a free hosting/DBs tier to deploy your (headless) meteor app instantly. ( I personally use mup to deploy the backend as a docker container on my own server)
Meteor has it’s own Chrome dev extension.
Meteor compared to Strapi is more of a traditional developer friendly backend.( more customizable )
Has a free tier monitoring service. https://montiapm.com/

Do you know good installations tutos for starting, I’m afraid to > restart from scratch… ?

Well for Strapi there’s no tutorial with Quasar, but I had no problems connecting it with a Quasar CLI generated app( with axios rest calls).

For Meteor I used this starter kit to show me the way:
https://github.com/alexandesigner/quasar-meteor

It’s a bit outdated but still works ( with some minor tweaks). I today locally created a new app with this repo and updated it to the latest Qv1 and Meteor V2. If you’re interested in using Meteor I could share this up to date starter kit.

Here’s recommended udemy tutorial for using Quasar with Firebase.( very good starting point if Firebase is for you)
https://www.udemy.com/course/pwa-with-vuejs-quasar-firebase/
https://www.udemy.com/course/quasarframework/
and another firebase starter kit:
https://github.com/steveclarke/quasar-firebase-example

Here’s a Laravel + Quasar starter kit:
https://github.com/training-yoyosan/example-frontend
https://github.com/training-yoyosan/example-backend

Hope all his info will help. If you have more questions then ask.

dobbel

@incremental

and what about GraphCMS ?

https://graphcms.com/pricing

You will end up very quickly in the paid tiers, and it is cloud based only, so no self hosting GraphCMS.(as far as I could see)

Incremental

@dobbel thanks for your detailed responses
Your Meteor arguments seduces me ! In particular the real-time synchro.
But what I’ve seen of it seems to be a blank sheet start.
It’s not clear for me how to :

build a corporate site, like meteor’s one ? I haven’t find a kind of market place…
have a backend to design database like in Strapi and with GraphQL
have a Quasar app with features like (authent/security, data sync and queries)

In other words, should I rebuild anything from scratch with a text editor ?
Thanks

Incremental

@dobbel Hi, I’m very interested by the websockets and I watched a lot of things on the web but don’t understand how I could modify an existing Quasar app with https://github.com/Urigo/meteor-client-bundler

I understood that Mongo DB is working with collections, but is there a tool to design collections and relationships, or should it be done always with a text editor inside the server code ?
Meteor concept is fine, but not very ergonomic…
Thanks

dobbel

@incremental said in Which backend for Quasar ?:

existing Quasar app with https://github.com/Urigo/meteor-client-bundler

I never said you should. Not recommended to go complicated the first time you use a new tech you don’t yet fully understand. Start small.

I you’re really interested in Meteor you should read up the meteor site docs for a few days and try to get a general idea what it can do and how it works. Play with their examples /demos. Then try to get this repo starter kit going:
https://github.com/alexandesigner/quasar-meteor

build a corporate site, like meteor’s one ? I haven’t find a kind of market place…

Nobody has ever build a beautiful corporate site with Quasar. You create web applications with Quasar not landing pages / corporate design heavy sites. Quasar is awesome but pretty useless for creating unique custom design / beautiful looking landing pages.( never seen any)

have a backend to design database like in Strapi and with GraphQL

Yes. Read the meteor site doc.

have a Quasar app with features like (authent/security, data sync and queries)

Yes. Read the meteor site doc.

Meteor concept is fine, but not very ergonomic…
In other words, should I rebuild anything from scratch with a text editor ?
or should it be done always with a text editor inside the server code ?

I am not going / don’t know how to respond to this

If you want more support about Quasar + Meteor you will have to do some self study first.

DamienDeville

@dobbel said in Which backend for Quasar ?:

For Meteor I used this starter kit to show me the way:
https://github.com/alexandesigner/quasar-meteor
It’s a bit outdated but still works ( with some minor tweaks). I today locally created a new app with this repo and updated it to the latest Qv1 and Meteor V2. If you’re interested in using Meteor I could share this up to date starter kit.

@dobbel
I would be interested in a starter-kit based on Quasar CLI and Urigo’s meteor-client-bundler with … explanations, since I never quite managed to understand Alexandesigner’s.

Among other confusing stuff:
a) The commands to create the project do not mention neither meteor nor quasar

b) The code in quasar-meteor/api/client/main.js/ contains Blaze code; why should it be needed it if the client is made of Quasar/Vue components?

c) It does not use the standard meteor-vue integration packages [https://github.com/meteor-vue/vue-meteor](link url) and therefore it does not use the meteor vue option provided by these packages, but rather calls meteor code by using a $meteor special variable anywhere in the Vue view (e.g., method option, created hook).

Any clarification on all those points would greatly help.

DamienDeville

@damiendeville said in Which backend for Quasar ?:

c) It does not use the standard meteor-vue integration packages [https://github.com/meteor-vue/vue-meteor](link url) and therefore it does not use the meteor vue option provided by these packages, but rather calls meteor code by using a $meteor special variable anywhere in the Vue view (e.g., method option, created hook).

@dobbel
Thinking more about it, I guess those vue-meteor packages are needed to let the meteor build tool recognize the .vue files and the lang=pug, lang=ts, lang=stylus and such attributes in the .vue files and call the appropriate transpilers for each piece of code inside those .vue files.

Now if one creates an app using the Quasar build tool, it does all this source code analysis, transpiling and build stuff out-of-the-box and therefore there is no need to use those packages and thanks to the meteor-client-bundler any function of the meteor object can be called anywhere in the Quasar client app instead of being circumscribed to the meteor vue option created by the vue-meteor-tracker package.

Hence, all this hard work by the 25 contributors of the vue-meteor project is only needed when one creates a Quasar-Meteor stack project as a Meteor app using Quasar as front-end but if one creates a Quasar-Meteor stack project as a Quasar app using Meteor as back-end all is needed is the meteor-client-bundler module.

Is that correct?

dobbel

@damiendeville

100% correct.

dobbel

@damiendeville

a) The commands to create the project do not mention neither meteor nor quasar

Every thing under api is managed by meteor. So for example to start the meteor backend you use Meteor CLI to start it. Also to update meteor you use meteor cli. And of course Quasar Cli is used to manage and start client.

The code in quasar-meteor/api/client/main.js/ contains Blaze code; why should it be needed it if the client is made of Quasar/Vue components?

I have not seen that, because I run meteor headless. But you could create a gui in the api backend part of meteor, for admin things. Its’ optional/just a bonus.

No More Posting New Topics!

Which backend for Quasar ?