Download the PHP package kresnasatya/wp-vite-theme without Composer
On this page you can find all versions of the php package kresnasatya/wp-vite-theme. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download kresnasatya/wp-vite-theme
More information about kresnasatya/wp-vite-theme
Files in kresnasatya/wp-vite-theme
Package wp-vite-theme
Short Description Generic WordPress theme integrate with ViteJS
License MIT
Informations about the package wp-vite-theme
WordPress Vite Theme
Proof of Concept (PoC) WordPress theme integrate with ViteJS. Motivated from wp-theme-vite-tailwind.
Requirements
- PHP version >= 8.2
- NodeJS version >= 18
Brief Setup for Development Mode
- You have WordPress project that run with
wp server
or any other development tools like Laragon or Valet. It will shows URL likehttp://localhost:8080
if you usewp server
oryour-wp-project.test
if you use Laragon or Valet. -
Go to
wp-content/themes
directory. Then downloadwp-vite-theme
project with command below. - Run
composer install
. - Run
pnpm install
ornpm install
. - Run
pnpm run dev
ornpm run dev
. - Change
VITE_SERVER
value in.env
file with the Vite URL.
If you open the Vite URL it will contain empty file because it serves as a runner for your assets such as CSS and JavaScript.
Try to edit index.php
or any file with .php
extension then save it! Vite will trigger full-reload event so browser reload the page automatically. Thanks to handleHotUpdate
hook from Vite.
How to handling static assets in CSS and JS in WordPress + Vite Environment?
In production mode, static assets like images, fonts work well BUT not in development mode!
In order to make it works, you need to set a symbolic link or symlink from source folder to destination folder. Here's the example.
Brief Setup for Production Mode
- Stop
wp server
andpnpm run dev
ornpm run dev
. - Change the value of
VITE_ENV
in.env
file fromdevelopment
toproduction
. - Run command
pnpm run build
ornpm run build
. - Run
wp server
again.
Credits
- Photo by Tom Delanoue on Unsplash
- Photo by mono-log on Unsplash