Skip to content

mihatorikei/codeigniter-vitejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Codeigniter + viteJs

Vitejs Integration For Codeigniter4

Codeigniter vite is a package that aims to integrate vitejs with codeigniter4 in a simple way.

Features:

  • ⏱️ Almost zero configuration
  • 🧩 Easy to install and remove
  • πŸ”¨ Easy to customize
  • ✌️ Support most used frameworks: react, vue, and svlete. (check v2 for SvelteKit support)
  • πŸ”₯ Enjoy hot module replacement (HMR)

Installation:

composer require mihatori/codeignitervite

then from your project root, run:

php spark vite:init --framework <framework>

replace <framework> with vue, react, svelte, or none

or you can just run:

php spark vite:init

our buddy spark will handle the rest for you πŸ™ƒ

Getting Started:

  • Install your node dependencies: npm install
  • Start vite server: npm run dev
  • Start CI server: php spark serve or access it through your virtual host.
  • That's all =)

NOTE:

npm run dev is not where you should work, it main purpose is to serve assets, such as scripts or stylesheets. once you build your files, it becomes useless but as long as it running, the package will use it instead of the bundled files. So make sure to access your project from ci server or a vitual host.

Build your files:

to bundle your files, run:

npm run build

this command will generate the bundled assets in your public directory. but as we said before, as long as vite server is running, the package will use it instead of bundled files, so make sure to stop it when you're done developing.

Uninitialize:

composer remove mihatori/codeignitervite command will remove the package, but the generated files will remain there (package.json, vite.config.js ...etc). so to avoid that, make sure to run the following command first:

php spark vite:remove

This command will do the following:

  • delete package.json, packages.lock.json and vite.config.js.
  • delete resources folder.
  • And finally restore your .env file.

πŸ”₯ Need a quick start?

Check out our starter apps for svelte and vue.

Contributing

All contributions are welcome, it doesn't matter whether you can code, write documentation, or help find bugs. feel free to use issues or pull requests.

Support

Unfortunately, I don't drink coffee πŸ’”, but you can star it instead πŸ™ƒ

License

MIT License Β© 2022 Mihatori Kei