DCSLab Upgrade Steps - GitzJoey/DCSLab GitHub Wiki

Steps when major changes (either Laravel or Vue) happen.

Root (DCSLab) folder

  • Create README.md and update the contents
  • Create CHANGELOG.md and update the contents
  • Create .gitignore
    node_modules
    /.vscode
    
  • Clone Laravel
    composer create-project laravel/laravel api
    
  • Create Vue with Vite
    npm create vite@latest
    
    √ Project name: ... web
    √ Select a framework: » vue
    √ Select a variant: » TypeScript
    
  • Activating ESLint in the project
    create .vscode/settings.json
    
    {
       "eslint.workingDirectories": [
            "./web"
       ]
    }
    

API (Laravel)

  • Composer install
    composer require laravel/fortify pusher/pusher-php-server santigarcor/laratrust tightenco/ziggy vinkla/hashids
    
  • Update composer.json
    "name": "gitzjoey/dcslab",
    "type": "project",
    "description": "DCSLab - Laravel Always Updated ERP System",
    "keywords": ["ERP", "framework", "laravel", "gitzjoey"],
    
    ...
    
       "psr-4": {
           "Tests\\": "tests/",
           "Tests\\Unit\\Actions\\": "tests/Unit/Actions/",
           "Tests\\Feature\\API\\": "tests/Feature/API/"
       }
    
  • Update README.md
  • Remove Unused FrontEnd Files
    1. vite.config.js
    2. views/welcome.blade.php
       create .gitkeep file
    3. remove resources/css folder
    4. remove resources/js folder
    
  • Install Vendor
    1. Fortify
    php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
    
    2. Laratrust
    php artisan vendor:publish --tag="laratrust"
    php artisan vendor:publish --tag="laratrust-seeder"
    
    php artisan laratrust:setup 
    php artisan laratrust:seeder 
    
    3. Lang
    php artisan lang:publish
    
  • Copy Sources
    1. database
       a. factories
       b. migrations
       c. seeders
    2. lang
    3. stubs
    4. app
       a. Actions
       b. Console/Commands
       c. Enums
       d. Events
       e. Http [Controllers, Requests, Resources]
       f. Listeners
       g. Models
       h. Policies
       i. Rules
       j. Services
       k. Traits
    
  • Config
    1. app.php
      a. Enable App\Providers\BroadcastServiceProvider::class,
      b. Add
         App\Providers\FortifyServiceProvider::class,
      
         App\Providers\ResponseMacroServiceProvider::class,
      
    2. broadcasting.php
       'soketi' => [
           'driver' => 'pusher',
           'key' => env('SOKETI_APP_KEY', 'app-key'),
           'secret' => env('SOKETI_APP_SECRET', 'app-secret'),
           'app_id' => env('SOKETI_APP_ID', 'app-id'),
           'options' => [
               'host' => env('SOKETI_HOST', '127.0.0.1'),
               'port' => env('SOKETI_PORT', 6001),
               'scheme' => env('SOKETI_SCHEME', 'http'),
               'encrypted' => true,
               'useTLS' => env('SOKETI_SCHEME') === 'https',
           ],
       ],
      
    3. database.php
           'database' => database_path(env('DB_DATABASE', 'database.sqlite')),
      
      
       'mysql' => [
           'driver' => 'mysql',
           'url' => env('DATABASE_URL'),
           'host' => env('DB_HOST', '127.0.0.1'),
           'port' => env('DB_PORT', '3306'),
           'database' => env('DB_DATABASE', 'forge'),
           'username' => env('DB_USERNAME', 'forge'),
           'password' => env('DB_PASSWORD', ''),
           'unix_socket' => env('DB_SOCKET', ''),
           'charset' => 'utf8mb4',
           'collation' => 'utf8mb4_unicode_ci',
           'prefix' => '',
           'prefix_indexes' => true,
           'strict' => true,
           'engine' => null,
           'options' => extension_loaded('pdo_mysql') ? array_filter([
               PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
               PDO::MYSQL_ATTR_SSL_CERT => env('MYSQL_ATTR_SSL_CERT'),
               PDO::MYSQL_ATTR_SSL_KEY => env('MYSQL_ATTR_SSL_KEY'),
           ]) + [PDO::MYSQL_ATTR_SSL_VERIFY_SERVER_CERT => false] : [],
       ],
      
    4. cors.php
           'paths' => [
               'api/*',
               'sanctum/csrf-cookie',
               'login'
           ],
      
      
           'supports_credentials' => true,
      
    5. laratrust_seeder.php
      Copy over.
      
    6. logging.php
       'cachehits' => [
           'driver' => 'single',
           'path' => storage_path('logs/cachehits.log'),
           'level' => 'info',
       ],
      
       'perfs' => [
           'driver' => 'single',
           'path' => storage_path('logs/performances.log'),
           'level' => 'info',
       ],
      
    7. dcslab.php
      Copy over.
      
  • Update after copy sources
    1. Kernel.php
       a. Enable \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
       b. Replace  
          'guest' => \App\Http\Middleware\RedirectIfAuthenticatedJson::class,  
           
    2. EventServiceProvider.php       
    
    3. AppServiceProvider.php
       JsonResource::withoutWrapping();
    

Web (Vue)

  • Copy from Starter folder
  • Update package.json
    1. Change Name
    "name": "web",
    
    2. Remove unused dependencies packages
    "@ckeditor/ckeditor5-build-classic"
    "@ckeditor/ckeditor5-build-decoupled-document"
    "@ckeditor/ckeditor5-build-inline"
    "@fullcalendar/daygrid"
    "@fullcalendar/interaction"
    "@fullcalendar/list"
    "@fullcalendar/timegrid"
    "@fullcalendar/vue3"
    "@googlemaps/js-api-loader"
    "@googlemaps/markerclusterer"
    
    "@vuelidate/core"
    "@vuelidate/validators"
    "chart.js"
    
    "dropzone"
    
    "highlight.js"
    "js-beautify"
    "leaflet"
    "leaflet.markercluster"
    
    "xlsx"
    "zoom-vanilla.js"
    
    3. Remove unused devDependencies packages
    "@types/dropzone"
    
    "@types/google.maps"
    "@types/js-beautify"
    "@types/leaflet"
    "@types/leaflet.markercluster"
    
    
  • NPM Install
    npm install --save-dev path @types/ziggy-js @types/node
    
    npm install --save-dev eslint vue-eslint-parser @typescript-eslint/parser eslint-plugin-vue@next @typescript-eslint/eslint-plugin eslint-config-prettier
    
    npm install dotenv vue-router vue-i18n ziggy-js axios
    
  • Remove unused folder
    src\assets\images
    src\assets\json
    
    src\base-components\Calendar
    src\base-components\Chart
    src\base-components\Ckeditor
    src\base-components\Dropzone
    src\base-components\FileIcon
    src\base-components\GoogleMapLoader
    src\base-components\ImageZoom
    src\base-components\LeafletMapLoader
    src\base-components\Preview
    src\base-components\Progress
    src\base-components\TinySlider
    
    src\layouts\SimpleMenu\Divider.vue
    src\layouts\SimpleMenu\SimpleMenu.vue
    src\layouts\TopMenu
    
    src\stores\simple-menu.ts
    src\stores\top-menu.ts
    
    src\types\ckeditor.d.ts
    
  • Add/Copy New Folder/Files
    src\assets\css\customs
    
    src\base-components\AlertPlaceholder
    src\base-components\DataList
    src\base-components\Form\FormLayout
    src\base-components\LoadingOverlay
    src\base-components\UserLocation
    
    src\axios
    src\lang
    src\services
    src\validation
    
    src\types\enums
    src\types\resources
    src\types\systems
    
  • Require To Update
    1. app.css
      @import "simplebar/src/simplebar.css";
      /* @import "dropzone/dist/dropzone.css"; */
      @import "tabulator-tables/dist/css/tabulator.css";
      @import "tom-select/dist/css/tom-select.css";
      /* @import "zoom-vanilla.js/dist/zoom.css"; */
      @import "toastify-js/src/toastify.css";
      /* @import "highlight.js/styles/github.css"; */
      @import "tippy.js/dist/tippy.css";
      @import "tippy.js/themes/light.css";
      @import "tippy.js/dist/svg-arrow.css";
      @import "tippy.js/animations/shift-away.css";
      /* @import "tiny-slider/dist/tiny-slider.css"; */
      /* @import "leaflet/dist/leaflet.css"; */
      /* @import "leaflet.markercluster/dist/MarkerCluster.css"; */
      
      
      @import "./components/_global.css";
      @import "./components/_intro.css";
      /* @import "./components/_zoom-in.css"; */
      @import "./components/_image-fit.css";
      @import "./components/_typing-dots.css";
      @import "./components/_scrollbar-hidden.css";
      @import "./components/_box.css";
      /* @import "./components/_tiny-slider.css"; */
      @import "./components/_tippy.css";
      @import "./components/_toastify.css";
      /* @import "./components/_zoom-vanilla.css"; */
      @import "./components/_tom-select.css";
      /* @import "./components/_ckeditor.css"; */
      @import "./components/_litepicker.css";
      /* @import "./components/_full-calendar.css"; */
      @import "./components/_tabulator.css";
      
      
      @import "./customs/_loading-overlay.css";
      
    2. Update src/utils/faker.ts
    3. Update README.md
    4. Update index.html
  • Create env file
    .env.example & .env.production
    
    VITE_APP_NAME=DCSLab
    VITE_BACKEND_URL=http://localhost:8000
    
    VITE_PUSHER_APP_ID=
    VITE_PUSHER_APP_KEY=
    VITE_PUSHER_APP_SECRET=
    VITE_PUSHER_APP_CLUSTER=ap1
    
    VITE_SOKETI_HOST=
    VITE_SOKETI_PORT=
    VITE_SOKETI_APP_KEY=    
    
  • Add entry to .gitignore
    /.vscode
    .env