├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── SECURITY.md ├── composer.json └── src ├── Commands ├── Init.php └── Remove.php ├── Config ├── Registrar.php ├── Routes.php └── env.default ├── Decorator.php ├── Frameworks ├── default │ ├── package.json │ ├── resources │ │ └── main.js │ └── vite.config.js ├── react │ ├── package.json │ ├── resources │ │ ├── App.jsx │ │ ├── main.jsx │ │ ├── react.svg │ │ └── style.css │ └── vite.config.js ├── svelte │ ├── package.json │ ├── resources │ │ ├── App.svelte │ │ ├── app.css │ │ ├── main.js │ │ └── svelte.svg │ └── vite.config.js └── vue │ ├── package.json │ ├── resources │ ├── App.vue │ ├── main.js │ └── vue.svg │ └── vite.config.js ├── Helpers └── vite_helper.php ├── Vite.php └── logo.png /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | CodeIgniter version: 11 | Package version: 12 | 13 | **Describe the bug** 14 | A clear and concise description of what the bug is. 15 | 16 | **Expected behavior** 17 | A clear and concise description of what you expected to happen. 18 | 19 | **Additional context** 20 | Add any other context about the problem here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | To suggest a new feature, please feel free to start a new [discussion](https://github.com/firtadokei/codeigniter-vitejs/discussions). 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /vendor 2 | composer.lock -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Mihatori Kei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Codeigniter + viteJs

4 |

Vitejs Integration For Codeigniter4

5 |

6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 |
21 | 22 | Codeigniter vite is a package that aims to integrate [vitejs](https://vitejs.dev/) with [codeigniter4](https://codeigniter.com/) in a simple way. 23 | 24 | ## Features: 25 | - ⏱️ Almost zero configuration 26 | - 🧩 Easy to install and remove 27 | - 🔨 Easy to customize 28 | - ✌️ Support most used frameworks: `react`, `vue`, and `svlete`. (check [v2](https://github.com/firtadokei/codeigniter-vitejs/tree/v2) for SvelteKit support) 29 | - 🔥 Enjoy hot module replacement (HMR) 30 | 31 | ## Installation: 32 | 33 | ``` 34 | composer require mihatori/codeignitervite 35 | ``` 36 | 37 | then from your project root, run: 38 | 39 | ``` 40 | php spark vite:init --framework 41 | ``` 42 | 43 | replace `` with `vue`, `react`, `svelte`, or `none` 44 | 45 | or you can just run: 46 | 47 | ``` 48 | php spark vite:init 49 | ``` 50 | 51 | our buddy `spark` will handle the rest for you 🙃 52 | 53 | ## Getting Started: 54 | - Install your node dependencies: `npm install` 55 | - Start vite server: `npm run dev` 56 | - Start CI server: `php spark serve` or access it through your virtual host. 57 | - That's all =) 58 | 59 | > **NOTE:** 60 | > 61 | > `npm run dev` is not where you should work, it main purpose is to serve assets, such as scripts or stylesheets. 62 | > once you build your files, it becomes useless 63 | > but as long as it running, the package will use it instead of the bundled files. 64 | > So make sure to **access your project** from ci server or a vitual host. 65 | 66 | ## Build your files: 67 | 68 | to bundle your files, run: 69 | ``` 70 | npm run build 71 | ``` 72 | this command will generate the bundled assets in your public directory. 73 | 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. 74 | 75 | ## Uninitialize: 76 | 77 | `composer remove mihatori/codeignitervite` command will remove the package, but the generated files will remain there (package.json, vite.config.js ...etc). 78 | so to avoid that, make sure to run the following command first: 79 | 80 | ``` 81 | php spark vite:remove 82 | ``` 83 | This command will do the following: 84 | - delete `package.json`, `packages.lock.json` and `vite.config.js`. 85 | - delete `resources` folder. 86 | - And finally restore your `.env` file. 87 | 88 | ## 🔥 Need a quick start? 89 | Check out our starter apps for [svelte](https://github.com/firtadokei/ci-svelte-appstarter) and [vue](https://github.com/firtadokei/ci-vue-appstarter). 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | ## Contributing 99 | All contributions are welcome, it doesn't matter whether you can code, write documentation, or help find bugs. 100 | feel free to use issues or pull requests. 101 | 102 | ## Support 103 | Unfortunately, I don't drink coffee 💔, but you can star it instead 🙃 104 | 105 | ## License 106 | 107 | MIT License © 2022 [Mihatori Kei](https://github.com/firtadokei) 108 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | If you discover a security vulnerability please email [mihatorikei@gmail.com](mailto:mihatorikei@gmail.com) instead of using the issue tracker. 6 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mihatori/codeignitervite", 3 | "description": "Integrate viteJs in codeiginter4 framework", 4 | "license": "MIT", 5 | "type": "library", 6 | "homepage": "https://github.com/firtadokei/codeigniter-vitejs", 7 | "keywords": [ 8 | "codeigniter", 9 | "codeigniter4", 10 | "codeigniter-viteJs", 11 | "codeigniter-vueJs", 12 | "codeigniter-reactJs", 13 | "codeigniter-svelteJs", 14 | "codeigniter spa" 15 | ], 16 | "authors": [ 17 | { 18 | "name": "Mihatori Kei", 19 | "email": "mihatorikei@gmail.com", 20 | "homepage": "https://github.com/firtadokei/" 21 | } 22 | ], 23 | "require": { 24 | "php": "^7.4 || ^8.0" 25 | }, 26 | "autoload": { 27 | "psr-4": { 28 | "Mihatori\\CodeigniterVite\\": "src" 29 | } 30 | }, 31 | "minimum-stability": "dev", 32 | "prefer-stable": true 33 | } 34 | -------------------------------------------------------------------------------- /src/Commands/Init.php: -------------------------------------------------------------------------------- 1 | path = service('autoloader')->getNamespace('Mihatori\\CodeigniterVite')[0]; 25 | } 26 | 27 | public function run(array $params) 28 | { 29 | # Module start. 30 | CLI::write('Initializing Codeigniter Vite Package 🔥⚡', 'white', 'cyan'); 31 | CLI::newLine(); 32 | 33 | # Set framework. 34 | $this->framework = $params['framework'] ?? CLI::prompt('Choose a framework: ', $this->supportedFrameworks); 35 | CLI::newLine(); 36 | 37 | # But, what if user select a none supported framework ?! 38 | # if that's true, return an error message with available frameworks. 39 | if (!in_array($this->framework, $this->supportedFrameworks)) { 40 | CLI::error("❌ Sorry, but $this->framework is not supported!"); 41 | CLI::error('Available frameworks are: ' . CLI::color(implode(', ', $this->supportedFrameworks), 'green')); 42 | CLI::newLine(); 43 | return; 44 | } 45 | 46 | # Now let's generate vite necesary files (vite.config.js, package.json ...etc). 47 | $this->generateFrameworkFiles(); 48 | 49 | # Update .env file. 50 | $this->updateEnvFile(); 51 | 52 | # Everything is ready now. 53 | CLI::write('Codeigniter vite initialized successfully ✅', 'green'); 54 | CLI::newLine(); 55 | CLI::write('run: npm install && npm run dev'); 56 | CLI::newLine(); 57 | } 58 | 59 | /** 60 | * Generate vite files (vite.config.js, package.json & resources ...etc) 61 | * 62 | * @return void 63 | */ 64 | private function generateFrameworkFiles() 65 | { 66 | helper('filesystem'); 67 | 68 | CLI::write('⚡ Generating vite files...', 'yellow'); 69 | CLI::newLine(); 70 | 71 | # Framework files. 72 | $frameworkPath = ($this->framework === 'none') ? 'Frameworks/default' : "Frameworks/$this->framework"; 73 | 74 | $frameworkFiles = directory_map($this->path . $frameworkPath, 1, true); 75 | 76 | $publisher = new Publisher($this->path . $frameworkPath, ROOTPATH); 77 | 78 | # Publish them. 79 | try { 80 | $publisher->addPaths($frameworkFiles)->merge(true); 81 | } catch (Throwable $e) { 82 | $this->showError($e); 83 | return; 84 | } 85 | 86 | CLI::write('Vite files are ready ✅', 'green'); 87 | CLI::newLine(); 88 | } 89 | 90 | /** 91 | * Set vite configs in .env file 92 | * 93 | * @return void 94 | */ 95 | private function updateEnvFile() 96 | { 97 | CLI::write('Updating .env file...', 'yellow'); 98 | 99 | # Get the env file. 100 | $envFile = ROOTPATH . '.env'; 101 | 102 | # For backup. 103 | $backupFile = is_file($envFile) ? 'env-BACKUP-' . time() : null; 104 | 105 | # Does exist? if not, generate it =) 106 | if (is_file($envFile)) { 107 | # But first, let's take a backup. 108 | copy($envFile, ROOTPATH . $backupFile); 109 | 110 | # Get .env.default content 111 | $content = file_get_contents($this->path . 'Config/env.default'); 112 | 113 | # Append it. 114 | file_put_contents($envFile, "\n\n$content", FILE_APPEND); 115 | } else { 116 | # As we said before, generate it. 117 | copy($this->path . 'Config/env.default', ROOTPATH . '.env'); 118 | } 119 | 120 | # set the backup name in the current one. 121 | if ($backupFile) { 122 | $envContent = file_get_contents(ROOTPATH . '.env'); 123 | $backupUpdate = str_replace('VITE_BACKUP_FILE=', "VITE_BACKUP_FILE='$backupFile'", $envContent); 124 | file_put_contents($envFile, $backupUpdate); 125 | } 126 | 127 | # Define framework. 128 | if ($this->framework !== 'none') { 129 | # Get .env content. 130 | $envContent = file_get_contents($envFile); 131 | # Set framework. 132 | $updates = str_replace("VITE_FRAMEWORK='none'", "VITE_FRAMEWORK='$this->framework'", $envContent); 133 | 134 | file_put_contents($envFile, $updates); 135 | 136 | # React entry file (main.jsx). 137 | if ($this->framework === 'react') { 138 | $envContent = file_get_contents($envFile); 139 | $updates = str_replace("VITE_ENTRY_FILE='main.js'", "VITE_ENTRY_FILE='main.jsx'", $envContent); 140 | file_put_contents($envFile, $updates); 141 | } 142 | } 143 | 144 | # env updated. 145 | CLI::newLine(); 146 | CLI::write('.env file updated ✅', 'green'); 147 | CLI::newLine(); 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /src/Commands/Remove.php: -------------------------------------------------------------------------------- 1 | path = service('autoloader')->getNamespace('Mihatori\\CodeigniterVite')[0]; 24 | } 25 | 26 | public function run(array $params) 27 | { 28 | # cleaning start. 29 | CLI::write('Removing Codeigniter Vite 🔥⚡', 'white', 'red'); 30 | CLI::newLine(); 31 | 32 | # Now let's remove vite files (vite.config.js, package.json ...etc). 33 | $this->removeFrameworkFiles(); 34 | 35 | # Reset .env file. 36 | $this->resetEnvFile(); 37 | 38 | # Everything is ready now. 39 | CLI::write('Codeigniter vite has removed successfuly ✅', 'green'); 40 | CLI::newLine(); 41 | } 42 | 43 | /** 44 | * Remove vite files (vite.config.js, package.json ...etc). 45 | * 46 | * @return void 47 | */ 48 | private function removeFrameworkFiles() 49 | { 50 | helper('filesystem'); 51 | 52 | CLI::write('Removing vite files...', 'yellow'); 53 | CLI::newLine(); 54 | 55 | $framework = env('VITE_FRAMEWORK') ?? 'default'; 56 | 57 | $frameworkFiles = directory_map($this->path . "frameworks/$framework", 1, true); 58 | 59 | foreach ($frameworkFiles as $file) { 60 | # Remove resources|src dir. 61 | if (is_file(ROOTPATH . $file)) { 62 | unlink(ROOTPATH . $file); 63 | } elseif (is_dir(ROOTPATH . $file)) { 64 | (new Publisher(null, ROOTPATH . $file))->wipe(); 65 | } else { 66 | CLI::error("$file does not exist"); 67 | } 68 | } 69 | 70 | # Remove package-lock.json 71 | is_file(ROOTPATH . 'package-lock.json') ? unlink(ROOTPATH . 'package-lock.json') : CLI::error('package-lock.json does not exist'); 72 | 73 | # Just in case user has changed the resources directory. 74 | if (env('VITE_RESOURCES_DIR') && is_dir(ROOTPATH . env('VITE_RESOURCES_DIR'))) { 75 | (new Publisher(null, ROOTPATH . env('VITE_RESOURCES_DIR')))->wipe(); 76 | } 77 | } 78 | 79 | /** 80 | * Remove vite configs in .env file 81 | * 82 | * @return void 83 | */ 84 | private function resetEnvFile() 85 | { 86 | CLI::write('Reseting .env file...', 'yellow'); 87 | CLI::newLine(); 88 | 89 | # Get the env file. 90 | $envFile = ROOTPATH . '.env'; 91 | # Get last backup. 92 | $backupFile = ROOTPATH . env('VITE_BACKUP_FILE'); 93 | 94 | # Does exist? if not, generate it =) 95 | if (is_file($backupFile)) { 96 | # Remove current .env 97 | unlink($envFile); 98 | # Restore backup if exists 99 | if (is_file($backupFile)) { 100 | copy($backupFile, ROOTPATH . '.env'); 101 | unlink($backupFile); 102 | } 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/Config/Registrar.php: -------------------------------------------------------------------------------- 1 | ['Mihatori\CodeigniterVite\Decorator'], 11 | ]; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/Config/Routes.php: -------------------------------------------------------------------------------- 1 | get('(:any)', 'Home::index'); 7 | -------------------------------------------------------------------------------- /src/Config/env.default: -------------------------------------------------------------------------------- 1 | #-------------------------------------------------------------------- 2 | # Codeigniter vite 3 | #-------------------------------------------------------------------- 4 | 5 | VITE_AUTO_INJECTING=true 6 | VITE_EXCLUDED_ROUTES='' 7 | VITE_ORIGIN='http://localhost:3479' 8 | VITE_PORT=3479 9 | VITE_BUILD_DIR='build' 10 | VITE_ENTRY_FILE='main.js' 11 | VITE_RESOURCES_DIR='resources' 12 | VITE_FRAMEWORK='none' 13 | VITE_BACKUP_FILE= 14 | -------------------------------------------------------------------------------- /src/Decorator.php: -------------------------------------------------------------------------------- 1 | ', "\n\t
", $html); 21 | # Close the div 22 | $html = str_replace('', "\n\t
\n", $html); 23 | 24 | # Get generated tags. 25 | $tags = Vite::tags(); 26 | 27 | $jsTags = $tags['js']; 28 | 29 | # now inject css 30 | if (!empty($tags['css'])) 31 | { 32 | $cssTags = $tags['css']; 33 | 34 | $html = str_replace('', "\n\t$cssTags\n", $html); 35 | $html = str_replace('', "\n\t$jsTags\n", $html); 36 | } 37 | else 38 | { 39 | $html = str_replace('', "\n\t$jsTags\n", $html); 40 | } 41 | } 42 | 43 | return $html; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/Frameworks/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codeigniter-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "devDependencies": { 11 | "vite": "^2.9.13" 12 | } 13 | } -------------------------------------------------------------------------------- /src/Frameworks/default/resources/main.js: -------------------------------------------------------------------------------- 1 | //This is you main entry file, Be creative =) 2 | -------------------------------------------------------------------------------- /src/Frameworks/default/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig, loadEnv } from "vite"; 2 | import path from "path"; 3 | 4 | export default defineConfig(() => { 5 | const env = loadEnv(null, process.cwd()); 6 | 7 | return { 8 | plugins: [], 9 | 10 | build: { 11 | emptyOutDir: false, 12 | outDir: "./public/", 13 | assetsDir: env.VITE_BUILD_DIR, 14 | manifest: true, 15 | rollupOptions: { 16 | input: `./${env.VITE_RESOURCES_DIR}/${env.VITE_ENTRY_FILE}`, 17 | }, 18 | }, 19 | 20 | server: { 21 | origin: env.VITE_ORIGIN, 22 | port: env.VITE_PORT, 23 | strictPort: true, 24 | }, 25 | 26 | resolve: { 27 | alias: { 28 | "@": path.resolve(__dirname, `./${env.VITE_RESOURCES_DIR}`), 29 | }, 30 | }, 31 | }; 32 | }); 33 | -------------------------------------------------------------------------------- /src/Frameworks/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codeigniter-vite-react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^18.0.15", 16 | "@types/react-dom": "^18.0.6", 17 | "@vitejs/plugin-react": "^2.0.0", 18 | "vite": "^3.0.0" 19 | } 20 | } -------------------------------------------------------------------------------- /src/Frameworks/react/resources/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from '@/react.svg' 3 | 4 | function App() { 5 | const [count, setCount] = useState(0) 6 | return ( 7 |
8 |
9 | Codeigniter vite logo 10 | React logo 11 |
12 |

Codeigniter Vite + React

13 |

14 | 17 |

18 |

Edit resources/App.jsx and save to test HMR

19 |
20 | ) 21 | } 22 | 23 | export default App -------------------------------------------------------------------------------- /src/Frameworks/react/resources/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import '@/style.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('app')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /src/Frameworks/react/resources/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Frameworks/react/resources/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Helvetica, 3 | Arial, 4 | sans-serif; 5 | font-size: 16px; 6 | line-height: 24px; 7 | font-weight: 400; 8 | color-scheme: light 9 | dark; 10 | color: rgba( 11 | 255, 12 | 255, 13 | 255, 14 | 0.87 15 | ); 16 | background-color: #242424; 17 | text-rendering: optimizeLegibility; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | display: flex; 23 | place-items: center; 24 | min-width: 320px; 25 | min-height: 100vh; 26 | } 27 | 28 | #app { 29 | max-width: 1280px; 30 | margin: 0 31 | auto; 32 | padding: 2rem; 33 | text-align: center; 34 | } 35 | 36 | .logo { 37 | height: 6em; 38 | margin-inline: 10px; 39 | } 40 | 41 | button { 42 | padding: 10px 43 | 15px; 44 | border: 1px 45 | solid 46 | #6f6f6f; 47 | border-radius: 11px; 48 | cursor: pointer; 49 | } 50 | 51 | p { 52 | margin-block: 25px; 53 | } 54 | -------------------------------------------------------------------------------- /src/Frameworks/react/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig, loadEnv } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import path from "path"; 4 | 5 | export default defineConfig(() => { 6 | const env = loadEnv(null, process.cwd()); 7 | 8 | return { 9 | plugins: [react()], 10 | build: { 11 | emptyOutDir: false, 12 | outDir: "./public/", 13 | assetsDir: env.VITE_BUILD_DIR, 14 | manifest: true, 15 | rollupOptions: { 16 | input: `./${env.VITE_RESOURCES_DIR}/${env.VITE_ENTRY_FILE}`, 17 | }, 18 | }, 19 | server: { 20 | origin: env.VITE_ORIGIN, 21 | port: env.VITE_PORT, 22 | strictPort: true, 23 | }, 24 | resolve: { 25 | alias: { 26 | "@": path.resolve(__dirname, `./${env.VITE_RESOURCES_DIR}`), 27 | }, 28 | }, 29 | }; 30 | }); 31 | -------------------------------------------------------------------------------- /src/Frameworks/svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codeignitervite-svelte", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "devDependencies": { 11 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 12 | "svelte": "^3.49.0", 13 | "vite": "^3.0.0" 14 | } 15 | } -------------------------------------------------------------------------------- /src/Frameworks/svelte/resources/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
14 |
16 | 20 | 24 |
25 |

26 | Codeigniter 27 | Vite 28 | + 29 | Svelte 30 |

31 |

32 | 37 |

38 |

39 | Edit 40 | resources/App.svelte 41 | to 42 | test 43 | HMR 44 |

45 |
46 |
47 | 48 | 50 | -------------------------------------------------------------------------------- /src/Frameworks/svelte/resources/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Helvetica, 3 | Arial, 4 | sans-serif; 5 | font-size: 16px; 6 | line-height: 24px; 7 | font-weight: 400; 8 | color-scheme: light 9 | dark; 10 | color: rgba( 11 | 255, 12 | 255, 13 | 255, 14 | 0.87 15 | ); 16 | background-color: #242424; 17 | text-rendering: optimizeLegibility; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | display: flex; 23 | place-items: center; 24 | min-width: 320px; 25 | min-height: 100vh; 26 | } 27 | 28 | #app { 29 | max-width: 1280px; 30 | margin: 0 31 | auto; 32 | padding: 2rem; 33 | text-align: center; 34 | } 35 | 36 | .logo { 37 | height: 6em; 38 | margin-inline: 10px; 39 | } 40 | 41 | button { 42 | padding: 10px 43 | 15px; 44 | border: 1px 45 | solid#6f6f6f; 46 | border-radius: 11px; 47 | cursor: pointer; 48 | } 49 | 50 | p { 51 | margin-block: 25px; 52 | } 53 | -------------------------------------------------------------------------------- /src/Frameworks/svelte/resources/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app') 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /src/Frameworks/svelte/resources/svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/Frameworks/svelte/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig, loadEnv } from "vite"; 2 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 3 | import path from "path"; 4 | 5 | export default defineConfig(() => { 6 | const env = loadEnv(null, process.cwd()); 7 | 8 | return { 9 | plugins: [svelte()], 10 | build: { 11 | emptyOutDir: false, 12 | outDir: "./public/", 13 | assetsDir: env.VITE_BUILD_DIR, 14 | manifest: true, 15 | rollupOptions: { 16 | input: `./${env.VITE_RESOURCES_DIR}/${env.VITE_ENTRY_FILE}`, 17 | }, 18 | }, 19 | server: { 20 | origin: env.VITE_ORIGIN, 21 | port: env.VITE_PORT, 22 | strictPort: true, 23 | }, 24 | resolve: { 25 | alias: { 26 | "@": path.resolve(__dirname, `./${env.VITE_RESOURCES_DIR}`), 27 | }, 28 | }, 29 | }; 30 | }); 31 | -------------------------------------------------------------------------------- /src/Frameworks/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codeigniter-vite-vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "vue": "^3.2.37" 12 | }, 13 | "devDependencies": { 14 | "@vitejs/plugin-vue": "^3.0.0", 15 | "vite": "^3.0.0" 16 | } 17 | } -------------------------------------------------------------------------------- /src/Frameworks/vue/resources/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /src/Frameworks/vue/resources/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /src/Frameworks/vue/resources/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/Frameworks/vue/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig, loadEnv } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import path from "path"; 4 | 5 | export default defineConfig(() => { 6 | const env = loadEnv(null, process.cwd()); 7 | 8 | return { 9 | plugins: [vue()], 10 | build: { 11 | emptyOutDir: false, 12 | outDir: "./public/", 13 | assetsDir: env.VITE_BUILD_DIR, 14 | manifest: true, 15 | rollupOptions: { 16 | input: `./${env.VITE_RESOURCES_DIR}/${env.VITE_ENTRY_FILE}`, 17 | }, 18 | }, 19 | server: { 20 | origin: env.VITE_ORIGIN, 21 | port: env.VITE_PORT, 22 | strictPort: true, 23 | }, 24 | resolve: { 25 | alias: { 26 | "@": path.resolve(__dirname, `./${env.VITE_RESOURCES_DIR}`), 27 | }, 28 | }, 29 | }; 30 | }); 31 | -------------------------------------------------------------------------------- /src/Helpers/vite_helper.php: -------------------------------------------------------------------------------- 1 | null, 22 | 'css' => null 23 | ]; 24 | 25 | # Check if vite is running. 26 | $entryFile = env('VITE_ORIGIN') . '/' . env('VITE_RESOURCES_DIR') . '/' . env('VITE_ENTRY_FILE'); 27 | 28 | $result['js'] = @file_get_contents($entryFile) ? '' : null; 29 | 30 | # React HMR fix. 31 | if (!empty($result['js'])) 32 | { 33 | $result['js'] = self::getReactTag() . $result['js']; 34 | } 35 | 36 | # If vite isn't running, then return the bundled resources. 37 | if (empty($result['js']) && is_file(self::$manifest)) 38 | { 39 | # Get the manifest content. 40 | $manifest = file_get_contents(self::$manifest); 41 | # You look much pretty as a php object =). 42 | $manifest = json_decode($manifest); 43 | 44 | # Now, we will get all js files and css from the manifest. 45 | foreach ($manifest as $file) 46 | { 47 | # Check extension 48 | $fileExtension = substr($file->file, -3, 3); 49 | 50 | # Generate js tag. 51 | if ($fileExtension === '.js' && isset($file->isEntry) && $file->isEntry === true && (!isset($file->isDynamicEntry) || $file->isDynamicEntry !== true)) 52 | { 53 | $result['js'] .= ''; 54 | } 55 | 56 | if (!empty($file->css)) 57 | { 58 | foreach ($file->css as $cssFile) 59 | { 60 | $result['css'] .= ''; 61 | } 62 | } 63 | } 64 | } 65 | 66 | return $result; 67 | } 68 | 69 | /** 70 | * Enable HMR for react. 71 | * 72 | * @see https://vitejs.dev/guide/backend-integration.html 73 | * 74 | * @return string|null a simple module script 75 | */ 76 | public static function getReactTag(): ?string 77 | { 78 | if (env('VITE_FRAMEWORK') === 'react') 79 | { 80 | $origin = env('VITE_ORIGIN'); 81 | $result = ""; 82 | return "$result\n\t"; 83 | } 84 | 85 | return null; 86 | } 87 | 88 | /** 89 | * Check whether vite is running or manifest does exist. 90 | * 91 | * @return bool true if vite is runnig or if manifest does exist, otherwise false; 92 | */ 93 | public static function isReady(): bool 94 | { 95 | $entryFile = env('VITE_ORIGIN') . '/' . env('VITE_RESOURCES_DIR') . '/' . env('VITE_ENTRY_FILE'); 96 | 97 | switch (true) 98 | { 99 | case @file_get_contents($entryFile): 100 | $result = true; 101 | break; 102 | case is_file(self::$manifest): 103 | $result = true; 104 | break; 105 | 106 | default: 107 | $result = false; 108 | } 109 | 110 | return $result; 111 | } 112 | 113 | /** 114 | * Check whether the current route is exluded or not. 115 | * 116 | * @return bool 117 | */ 118 | public static function routeIsNotExluded(): bool 119 | { 120 | $routes = explode(',', env('VITE_EXCLUDED_ROUTES')); 121 | 122 | # remove spaces before and after the route. 123 | // foreach($routes as $i => $route) $routes[$i] = ltrim( rtrim($route) ); 124 | 125 | return !in_array(uri_string(), $routes); 126 | } 127 | } -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mihatorikei/codeigniter-vitejs/22c6c35d749057bb63b4e804a27219aa17757dca/src/logo.png --------------------------------------------------------------------------------