Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nititech/php-vite-starter
A modern vanilla PHP-Vite starter repo, utilizing vite-plugin-php
https://github.com/nititech/php-vite-starter
development php php7 php8 starter starter-kit starter-template vite vite-php vite-plugin-php vitejs website
Last synced: about 2 months ago
JSON representation
A modern vanilla PHP-Vite starter repo, utilizing vite-plugin-php
- Host: GitHub
- URL: https://github.com/nititech/php-vite-starter
- Owner: nititech
- License: mit
- Created: 2024-02-17T13:19:57.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-07-13T12:39:07.000Z (2 months ago)
- Last Synced: 2024-07-14T10:22:21.982Z (2 months ago)
- Topics: development, php, php7, php8, starter, starter-kit, starter-template, vite, vite-php, vite-plugin-php, vitejs, website
- Language: PHP
- Homepage: https://github.com/nititech/php-vite-starter
- Size: 776 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - PHP-Vite Starter Repo - Starter repository, with TypeScript/JavaScript, Tailwind CSS, SASS/SCSS, EJS, SVG and image support. (Integrations with Backends / PHP)
- awesome-vite - PHP-Vite Starter Repo - Starter repository, with TypeScript/JavaScript, Tailwind CSS, SASS/SCSS, EJS, SVG and image support. (Integrations with Backends / PHP)
README
# 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. It integrates various features to streamline the development process, including TypeScript/JavaScript transpilation, Tailwind CSS implementation, SASS/SCSS support, EJS template language support, image transformation tools, and SVG loader.
## Features
- **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.
```bash
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.
```bash
cd php-vite-starter
npm install
npm run php-install
```
## Development
3. Start the development server, just run the following command:
```bash
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/pages 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`
##### /pages
```
├── pages
│ ├── **/*.php
```
- File based routing
- These files will be publicly accessible by name without `.php` file extension
- The `.php` files will be transpiled using Vite and the `vite-plugin-php` plugin
##### /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:
```bash
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.