Phalcon 4.0 + Vue.js skeleton

The easies way to start off:

• Scaffold your Phalcon project with phalcon-devtools
• Scaffold your Vue project with vue-cli
• Use XHttpRequests as your communication channel
• Use $axios from Vuejs to call API endpoints
• In a dev environment you can have the backend and frontend run on a different port

• In production put a reverse proxy in front of the backend and frontend (upstream with nginx), route the backend with an /api prefix

  There are a myriad of other factors on how you would design your project. Ask yourself these questions:

• Is it a SPA?
• Is it using SSR?
• Are you supporting PWA?
• Is the communication channel asynchronous http requests? websockets? web application messaging on top of websocket?
• Do you have shell access to your host, or only remote file access?

The easies way to start off:

• Scaffold your Phalcon project with phalcon-devtools
• Scaffold your Vue project with vue-cli
• Use XHttpRequests as your communication channel
• Use $axios from Vuejs to call API endpoints
• In a dev environment you can have the backend and frontend run on a different port
• In production put a reverse proxy in front of the backend and frontend (upstream with nginx), route the backend with an /api prefix

There are a myriad of other factors on how you would design your project. Ask yourself these questions:

• Is it a SPA?
• Is it using SSR?
• Are you supporting PWA?
• Is the communication channel asynchronous http requests? websockets? web application messaging on top of websocket?
• Do you have shell access to your host, or only remote file access?

Thank you for reply Lajos,

I have an scaffolded Vue project and Phalcon MVC project. I did not use Phalcon project View folder and i deleted it. I can do axios request to my backend. First problem is my web browser(chrome) getting error like; ->Failed to load resource: the server responded with a status of 500 (Internal Server Error) ->Access to XMLHttpRequest at 'https://localhost:8000/User/' from origin 'https://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow- Origin' header is present on the requested resource. Second problem is some routes in my project, I want accept only post requests and deny other request methods in the Controller or route but I couldn't achieve this. How can I filter requests in Phalcon project ?

Ah, yes, the devtime cross-origin misery... :D

The issue is that you're technically running the backend on a different domain (the port is different), so the request from vue gets blocked. You could either setup a reverse proxy (which sits on port 90, and any route that starts with /api gets forwarded to port 8000, the rest is forwareded to port 8080). This way you simulate the production environment (where you NEED to set up this correctly).

The other solution is to allow cross-origin requests on your backend in you development environment. Here is a topic about just that: https://forum.phalcon.io/discussion/443/enable-cross-origin-resource-sharing But this introduces a fault-point, since your dev and prod code will differ.

Regarding how to only accept POST requests: https://docs.phalcon.io/4.0/en/routing

Basically you just specify a whitelist array in the httpMethods argument.

Thank you for everything. Have a nice day !