README

Skeleton application using Phalcon framework and Vite + React.

Requirements

• PHP >= 7.4.1
• Phalcon >= 5.0.0
• Node >= 18.0.0

Structure

my-project/
  ¦
  ├-- backend/
  ¦
  └-- frontend/

Backend

Phalcon micro application that provides a RESTful API running port 8000

Frontend

Vite + React application running port 5173

Proxying to a backend

http://localhost:5173/api -> http://localhost:8000

// vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const BACKEND_PORT = process.env.BACKEND_PORT || 8000;

export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    proxy: {
      "/api": {
        target: `http://127.0.0.1:${BACKEND_PORT}`,
        // changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

Installing via Composer

composer create-project escribiendocodigo/phalcon-react-project-skeleton my-project

Once installed, you can test it out immediately using PHP's built-in web server:

cd my-project

Run backend

cd backend
composer serve
# OR use the composer alias:
composer serve-backend

Run frontend

cd frontend
npm run dev
# OR use the composer alias:
composer serve-frontend

Build frontend

cd frontend
npm run build
# OR use the composer alias:
composer build-frontend

Web server setup

Nginx

server {
    listen 80;
    server_name my-domain www.my-domain;

    index index.html index.php;

    access_log /var/log/nginx/my-domain.access.log;
    error_log /var/log/nginx/my-domain.error.log;

    location / {
        root /var/www/my-project/frontend/dist;

        try_files $uri $uri/ /index.html;
    }

    location /api {
        rewrite ^/api(.*)$ /index.php;
        set $request_url $1;
    }

    location ~ \.php$ {
        root /var/www/my-project/backend/public;

        include /etc/nginx/snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_param REQUEST_URI $request_url;
    }

    location ~ /\.ht {
        deny all;
    }

}