PHP-Vite Starter Repo

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 PHP applications.\ This repository utilizes Vite and the vite-plugin-php plugin to improve developer experience and provide various features to streamline development.

Features

• Auto-refresh / auto-reloading
• 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

1. Clone the Repository: Start by cloning this repository to your local machine.

git clone https://github.com/nititech/php-vite-starter.git

2. Install Dependencies: Navigate into the project directory and install the necessary dependencies using npm or yarn.

cd php-vite-starter
npm install
npm run php-install

Development

3. 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.phar for the php-install command

/index.php

This is the new entry point ⚠️

• Routing is now programmatic -> You have one entry file which does the routing
• Non-PHP files will not go through this router
• Nonexisting files and paths will go through this router

/pages

├── pages
│   ├── **/*.php

• File based routing
• This .php files will be transpiled using Vite and the vite-plugin-php plugin
• These files will be publicly accessible by their name without .php file extension
  • This can be changed in the router located in the /index.php

/partials

├── partials
│   ├── **/*.php

• Includable files (like components)
• Not directly publicly accessible
• These .php files will be transpiled using Vite and the vite-plugin-php plugin

/public

├── public
│   ├── **/*

• Publicly accessible files should be placed here
• Can be accessed by /example-file.extension in 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)

/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.scss or /src/scripts/some-script.ts

/system

├── system
│   ├── **/*

• .php files in this folder will not be transpiled
• Usually used for autoloaders, database connections etc.

/vendor

├── vendor
│   ├── **/*

• Vendor files installed by Composer
• .php Files 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
│   ├── pages (Publicly accessible by name without .php file extension)
│   │   ├── **/* (Transpiled PHP files from your ./pages folder)
│   │
│   ├── 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:

• 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.
• tailwind.config.ts: Configuration file for Tailwind CSS. Customize this file to adjust Tailwind CSS settings.
• postcss.config.cjs: Configuration for PostCSS, which is used for processing CSS. Modify this file to include additional PostCSS plugins or 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, and other tools used in this starter repository for their fantastic work.