PHP-Vite Starter Repo by nititech
modern-php-vite-starter is a modern vanilla PHP-Vite starter repository designed to provide developers with the essential tools to kickstart their development of modern componentized PHP applications. This repository utilizes Vite, vite-plugin-php plugin and PHP-Components + vite-plugin-php-componetns plugin to improve developer experience and provide various features to streamline development.
Features
- Auto-refresh / auto-reloading
- PHP-Components: Use components in your PHP code to reuse existing code and improve DX.
- **JS environmentβ¦
PHP-Vite Starter Repo by nititech
modern-php-vite-starter is a modern vanilla PHP-Vite starter repository designed to provide developers with the essential tools to kickstart their development of modern componentized PHP applications. This repository utilizes Vite, vite-plugin-php plugin and PHP-Components + vite-plugin-php-componetns plugin to improve developer experience and provide various features to streamline development.
Features
- Auto-refresh / auto-reloading
- PHP-Components: Use components in your PHP code to reuse existing code and improve DX.
- JS environmental variables in PHP: Use environmental variables supplied in
.envor to Vite in your PHP code. - FastRoute router: Fast and simple preconfigured router.
- TypeScript / JavaScript Transpilation: Write modern JavaScript or TypeScript code, which will be automatically transpiled to browser-compatible JavaScript.
- Tailwind CSS Implementation: Utilize Tailwind CSS for rapid UI development with utility-first classes.
- SASS / SCSS Support: Write styles using SASS or SCSS syntax, with built-in support for compilation.
- EJS Template Language Support: Use the EJS (Embedded JavaScript) templating language for using JavaScript pieces in your PHP-files.
- Image Transform Tools: Easily manage and transform images as needed for your application.
- SVG Loader: Load SVG files directly into your project, allowing for scalable vector graphics usage.
Usage
- Clone the Repository: Start by cloning this repository to your local machine.
git clone https://github.com/nititech/modern-php-vite-starter.git
- Install Dependencies: Navigate into the project directory and install the necessary dependencies using npm or yarn.
cd modern-php-vite-starter
npm install
npm run composer install
Development
- Start the development server, just run the following command:
npm run dev
Now you can access your application. Once the server is running, you can access your application by navigating to http://localhost:3000/ in your web browser.
Project Structure
/bin
βββ bin
β βββ composer.phar
β βββ **/*
- This folder is supposed to hold binaries that are needed for project compilations and such
- Currently holds only
composer.pharfor thecomposercommand
/index.php
This is the app entry point β οΈ
- Routing is now programmatic and uses nikicβ FastRoute router -> for configuration see the
/configs/routes.phpfile - Non-PHP files will not go through this router
- Nonexisting files and paths will go through this router
/configs
βββ configs
β βββ env.php
β βββ routes.php
β βββ **/*
env.phpwill be transpiled using Vite and thevite-plugin-phpplugin -> here you can store tokens or other constants that should be reused through the app. We use it to define the constants that we import from Vite.routes.phpholds the routing configuration that is being used by FastRoute
/pages
βββ pages
β βββ **/*.php
- This
.phpfiles will be transpiled using Vite and thevite-plugin-phpplugin
/src
βββ src
β βββ scripts
β β βββ **/*
β βββ styles
β β βββ **/*
- This folder should be used for files that need be handled by Vite
- Files can be accessed for example by
/src/styles/example-style.scssor/src/scripts/some-script.ts
/src/partials
βββ src
β βββ partials
β β βββ **/*.php
- Folder for the PHP-Components
- The components should be placed into sub folders and under the same namespace - a
spl_autoload_register()handles the automatic inclusion of these files, see/system/main.php. - These
.phpfiles will be transpiled using Vite and thevite-plugin-phpplugin
/public
βββ public
β βββ **/*
- Publicly accessible files should be placed here
- Can be accessed by
/example-file.extensionin image, script, style, ... tags - Files will not be transpiled
/raw
βββ raw
β βββ .htaccess
β βββ **/*
- These files will be copied into the root of your build
- Usually used for configurations, routers and so on (like the included
.htaccess)
/system
βββ system
β βββ main.php
β βββ **/*
.phpfiles in this folder will not be transpiled- Usually used for autoloaders, database connections etc.
- Contains
main.phpwith the autoloader for PHP-Components
/vendor
βββ vendor
β βββ **/*
- Vendor files installed by Composer
.phpFiles will not be transpiled
Production Build
To generate a production build of your project, use:
npm run build
Output
All files will be generated and copied into the /dist folder.
βββ dist
β βββ configs (Files copied from the ./configs folder)
β β βββ env.php (Transpiled to include environmental variables)
β β βββ routes.php
β β βββ **/*
β βββ pages
β β βββ **/* (Transpiled PHP files from your ./pages folder)
β β
β βββ src
β β βββ partials
β β β βββ **/* (Transpiled PHP files from your ./partials folder)
β β
β βββ public (Publicly accessible files, usually assets)
β β βββ **/* (Files copied from the ./src/public folder)
β β
β βββ system
β β βββ **/* (Files copied from the ./system folder)
β β
β βββ vendor
β β βββ **/* (Files copied from the ./vendor folder, usually Composer packages)
β β
β βββ .htaccess
β βββ **/* (Files copied from the ./raw folder)
Configuration
This starter repository comes with default configurations for various tools. However, you can customize these configurations according to your project requirements. Key configuration files include:
- configs/routes.php: Routing configuration.
- configs/env.php: Globally accessible constants for PHP.
- tsconfig.json: TypeScript configuration file. Modify this file to adjust TypeScript compiler options.
- .prettierrc: Prettier configuration file for code formatting. Modify this file to customize code formatting rules.
- vite.config.ts: Contains configuration settings for Vite, such as plugins, build options, and server settings.
License
This project is licensed under the MIT license, see LICENSE.
Contributing
Contributions are welcome! If you have any suggestions, improvements, or bug fixes, please feel free to open an issue or submit a pull request.
| via Ko-Fi | Buy me a coffee | via PayPal |
|---|---|---|
Acknowledgments
Special thanks to the developers of Vite, Tailwind CSS, FastRoutes, and other tools used in this starter repository for their fantastic work.