samsonasik/ci4-vue

CodeIgniter4 starter app with Vue.js Integration

0.9.1 2024-04-25 08:57 UTC

Requires

• php: ~8.1.0 || ~8.2.0 || ~8.3.0
• codeigniter4/framework: ^4.5.1

Requires (Dev)

• codeigniter/coding-standard: ^1.0
• infection/infection: ^0.26.4
• mikey179/vfsstream: 1.6.*
• phpspec/prophecy-phpunit: ^2.0
• phpunit/phpunit: ^9.0
• rector/rector: ^0.15.0

MIT

• Abdul Malik Ikhsan

README

Version ^0.1.0 is for Vue 3 usage in CodeIgniter 4 application

For Vue 2 usage in CodeIgniter 4 application, you can use version ~0.0.17

Introduction

A CodeIgniter 4 Skeleton Application with Vue.js integration.

Features

• SPA application with Vue Router with cached pages after visited.
• Using server side template from CodeIgniter 4, compiled with Vue.compile() in Vue.js component's render().
• Using Vuex for state management library, combo with sessionStorage on portfolio page.
• Webpack support for production

Setup

1. Run composer create-project command:

composer create-project samsonasik/ci4-vue

2. Copy file ci4-vue/env to ci4-vue/.env:

cp ci4-vue/env ci4-vue/.env

3. Set environment and app configuration

Open ci4-vue/.env and set CI_ENVIRONMENT, app.baseURL, app.indexPage:

# file ci4-vue/.env
CI_ENVIRONMENT = development

app.baseURL    = 'http://localhost:8080'
app.indexPage  = ''

4. Run PHP Development server

# go to ci4-vue directory
cd ci4-vue

# run php development server inside ci4-vue directory
php spark serve

5. Open web browser http://localhost:8080

Production

For deploy to production purpose, it has webpack.config.js in root directory that when we run webpack command, we can get public/js/dist/bundle.js after run it. If you don't have a webpack installed yet in your system, you can install nodejs and install webpack and webpack-cli:

sudo npm install -g webpack
sudo npm install -g webpack-cli

So, we can run:

webpack

Hash: 8e63a0daee1be975aeb3
Version: webpack 4.43.0
Time: 469ms
Built at: 07/02/2020 6:13:41 PM
                   Asset     Size  Chunks             Chunk Names
public/js/dist/bundle.js  2.7 KiB       0  [emitted]  main
Entrypoint main = public/js/dist/bundle.js
[0] ./public/js/app.js + 4 modules 3.85 KiB {0} [built]
    | ./public/js/app.js 772 bytes [built]
    | ./public/js/create-page.js 924 bytes [built]
    | ./public/js/portfolio.js 1.67 KiB [built]
    | ./public/js/store.js 183 bytes [built]
    | ./public/js/portfolio-store-module.js 353 bytes [built]

After it generated, we can update .env file as follow:

# file .env
CI_ENVIRONMENT = production

app.baseURL    = 'https://www.your-website.com'
app.indexPage  = ''

In app/Views/layout.php, we have a ENVIRONMENT check to use js/app.js when on development, and use /js/dist/bundle.js on production when exists.

// src/App/templates/layout/default.phtml
<?php $isDevelopment = ENVIRONMENT === 'development'; ?>

// ...
    <script src="<?php echo base_url($isDevelopment
            ? '/js/app.js'
            : (
                // when after run webpack, allow to use bundled js
                // fallback to use /js/app.js when not
                file_exists(ROOTPATH . 'public/js/dist/bundle.js')
                    ? '/js/dist/bundle.js'
                    : '/js/app.js'
            )) ?>" type="module"></script>
// ...

that will automatically take care of that.