Default JAMStack project

Contains:

• A Makefile that self-documents a lot of commands to run on the project
• A whole Docker-based setup for development
• PostgreSQL as default database
• A standard static-site SvelteKit application for frontend
• A PHP/Symfony app with Api Platform for backend
• An OpenApi spec export/import process to allow frontend client to call the backend API
• An administration panel powered by EasyAdmin
• Unit tests made simple with Vitest
• E2E/Browser testing with Playwright
• Some default droppable code to allow you to quickly get into the project's whereabouts

Create a new project

There are two solutions:

• Click on the Use this template button on the top-right of this repository's page, this will create a repository in whichever Github profile or organization you want.
• Run one of these scripts:
  • With Git:

    git clone https://github.com/Pierstoval/php-js-boilerplate.git && cd php-js-boilerplate && rm -rf .git/ && git init && git checkout -b main && git add . && git commit -a -m "Init project"
    

  • With curl and unzip:

    curl -sSL "https://github.com/Pierstoval/php-js-boilerplate/archive/refs/heads/main.zip" -o main.zip && unzip main.zip && rm main.zip && cd php-js-boilerplate-main && rm -rf .git/ && git init && git checkout -b main && git add . && git commit -a -m "Init project"
    

  • With wget and unzip:

    wget "https://github.com/Pierstoval/php-js-boilerplate/archive/refs/heads/main.zip" && unzip main.zip && rm main.zip && cd php-js-boilerplate-main && rm -rf .git/ && git init && git checkout -b main && git add . && git commit -a -m "Init project"
    

Usage

Run make install.

Then, you can visit the different parts of the app:

• https://localhost/ for the frontend app.
• https://localhost/api/ for the API.
• https://localhost/admin/ for the administration panel.

HTTP

The application is served through several endpoints:

• Static file server for all the assets in backend/public/
• PHP for the backend server, serving the API and administration panel.
• Node.js for the SvelteKit frontend server.
• A WebSocket connection, passed to the frontend server for HMR (Hot Module Replacement). This is a behavior that is not present in production mode.

All of these different HTTP endpoints are configured using Caddy, one of the most modern and customizable HTTP servers.

Check also the Caddyfile for details about HTTP routing.

Backend

The backend app exposes only two endpoints:

• An API through the /api endpoint, and it is defined with Api Platform.
• An administration panel via /admin, configured with EasyAdmin.

You can customize the API and admin panel like you want, but if you need to change the HTTP paths, don't forget to check the Caddyfile to update HTTP routing.

Frontend

The frontend is served via SvelteKit, and is only a fallback after all other HTTP routes (static files, websocket and API).

So basically, everything that is not a file in the backend/public/ directory and that does not begin with /api or /admin will be served by SvelteKit.

API

The API is defined in the Api Platform schema, and exported to OpenAPI.

This OpenAPI export is then used by the frontend app, with the help of the orval CLI tool, to generate an HTTP client with endpoints, structs/classes and axios as HTTP client.