dockerizada

Dockerfile

@@ -0,0 +1,35 @@
+FROM php:7.4-fpm
+
+# Arguments defined in docker-compose.yml
+ARG user
+ARG uid
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    git \
+    curl \
+    libpng-dev \
+    libonig-dev \
+    libxml2-dev \
+    zip \
+    unzip \
+    npm
+
+# Clear cache
+RUN apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Install PHP extensions
+RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
+
+# Get latest Composer
+COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
+
+# Create system user to run Composer and Artisan Commands
+RUN useradd -G www-data,root -u $uid -d /home/$user $user
+RUN mkdir -p /home/$user/.composer && \
+    chown -R $user:$user /home/$user
+
+# Set working directory
+WORKDIR /var/www
+
+USER $user

app/Services/CsvService.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Services;
+
+use League\Csv\Reader;
+use Iterator;
+
+class CsvService 
+{
+    private const BARRIOS = 'csv/barrios.csv';
+    private const PRODUCTOS = 'csv/productos.csv';
+
+    public static function reader(String $path) : Reader {
+        $csv = Reader::createFromPath(resource_path($path), 'r');
+        $csv->setDelimiter("|");
+        $csv->setEnclosure("'");
+        $csv->setHeaderOffset(0);
+        return $csv;
+    }
+
+    public static function getBarrios() : Iterator {
+        $csv = CsvService::reader(CsvService::BARRIOS);
+        return $csv->getRecords();
+    }
+
+    public static function getProductos() : Iterator {
+        $csv = CsvService::reader(CsvService::PRODUCTOS);
+        return $csv->getRecords();
+    }
+    
+}
+

composer.json

@@ -5,21 +5,22 @@
     "keywords": ["framework", "laravel"],
     "license": "MIT",
     "require": {
-        "php": "^7.4|^8.0",
+        "php": "^7.0.2",
         "ext-exif": "*",
         "ext-gd": "*",
+        "fakerphp/faker": "^1.9.1",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",
-        "inertiajs/inertia-laravel": "^0.4.5",
+        "inertiajs/inertia-laravel": "^0.6.4",
         "laravel/framework": "^8.65",
         "laravel/sanctum": "^2.11",
         "laravel/tinker": "^2.5",
+        "league/csv": "^9.8",
         "league/glide-laravel": "^1.0"
     },
     "require-dev": {
         "roave/security-advisories": "dev-latest",
         "facade/ignition": "^2.5",
-        "fakerphp/faker": "^1.9.1",
         "laravel/sail": "^1.0.1",
         "mockery/mockery": "^1.4.4",
         "nunomaduro/collision": "^5.10",

config/inertia.php

@@ -0,0 +1,62 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Server Side Rendering
+    |--------------------------------------------------------------------------
+    |
+    | These options configures if and how Inertia uses Server Side Rendering
+    | to pre-render the initial visits made to your application's pages.
+    |
+    | Do note that enabling these options will NOT automatically make SSR work,
+    | as a separate rendering service needs to be available. To learn more,
+    | please visit https://inertiajs.com/server-side-rendering
+    |
+    */
+
+    'ssr' => [
+
+        'enabled' => true,
+
+        'url' => 'http://127.0.0.1:13714/render',
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Testing
+    |--------------------------------------------------------------------------
+    |
+    | The values described here are used to locate Inertia components on the
+    | filesystem. For instance, when using `assertInertia`, the assertion
+    | attempts to locate the component as a file relative to any of the
+    | paths AND with any of the extensions specified here.
+    |
+    */
+
+    'testing' => [
+
+        'ensure_pages_exist' => true,
+
+        'page_paths' => [
+
+            resource_path('js/Pages'),
+
+        ],
+
+        'page_extensions' => [
+
+            'js',
+            'jsx',
+            'svelte',
+            'ts',
+            'tsx',
+            'vue',
+
+        ],
+
+    ],
+
+];

docker-compose.yml

@@ -0,0 +1,59 @@
+version: "3.3"
+services:
+  app:
+    build:
+      args:
+        user: www
+        uid: ${USERID}
+      context: ./
+      dockerfile: Dockerfile
+    image: laravel-image
+    container_name: pedi2-app
+    restart: unless-stopped
+    working_dir: /var/www/
+    volumes:
+      - ./:/var/www
+      - ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
+    networks:
+      - app-network
+
+  db:
+    image: mysql:5.7
+    container_name: pedi2-db
+    restart: unless-stopped
+    environment:
+      MYSQL_DATABASE: ${DB_DATABASE}
+      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
+      MYSQL_PASSWORD: ${DB_PASSWORD}
+      MYSQL_USER: ${DB_USERNAME}
+      SERVICE_TAGS: dev
+      SERVICE_NAME: mysql
+    volumes:
+      - ./mysql/my.cnf:/etc/mysql/my.cnf
+      - ./mysql/docker-entrypoint-initdb.d/:/docker-entrypoint-initdb.d/
+      - dbdata:/var/lib/mysql
+    networks:
+      - app-network
+    ports:
+      - ${DB_PORT_EXPOSED}:3306
+
+  nginx:
+    image: nginx:alpine
+    container_name: pedi2-nginx
+    restart: unless-stopped
+    ports:
+      - ${NGINX_PORT}:80
+    volumes:
+      - ./:/var/www
+      - ./nginx/conf.d/:/etc/nginx/conf.d/
+    networks:
+      - app-network
+
+networks:
+  app-network:
+    driver: bridge
+
+#Volumes
+volumes:
+  dbdata:
+    driver: local

mysql/my.cnf

@@ -0,0 +1,3 @@
+[mysqld]
+general_log = 1
+general_log_file = /var/lib/mysql/general.log

nginx/conf.d/app.conf

@@ -0,0 +1,20 @@
+server {
+    listen 80;
+    index index.php index.html;
+    error_log  /var/log/nginx/error.log;
+    access_log /var/log/nginx/access.log;
+    root /var/www/public;
+    location ~ \.php$ {
+        try_files $uri =404;
+        fastcgi_split_path_info ^(.+\.php)(/.+)$;
+        fastcgi_pass app:9000;
+        fastcgi_index index.php;
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        fastcgi_param PATH_INFO $fastcgi_path_info;
+    }
+    location / {
+        try_files $uri $uri/ /index.php?$query_string;
+        gzip_static on;
+    }
+}

package.json

@@ -2,7 +2,7 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "mix",
+        "development": "mix && npm run ssr:build",
         "fix:eslint": "eslint --ext .js,.vue resources/js/ --fix",
         "fix:prettier": "prettier --write --loglevel warn 'resources/js/**/*.vue'",
         "fix-code-style": "npm run fix:prettier && npm run fix:eslint",
@@ -10,18 +10,22 @@
         "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "mix --production",
-        "heroku-postbuild": "npm run prod"
+        "production": "mix --production && npm run ssr:build",
+        "heroku-postbuild": "npm run prod",
+        "ssr:build": "mix --production --mix-config=webpack.ssr.mix.js",
+        "ssr:serve": "node public/js/ssr.js"
     },
     "dependencies": {
-        "@inertiajs/inertia": "^0.10.1",
-        "@inertiajs/inertia-vue3": "^0.5.2",
-        "@inertiajs/progress": "^0.2.6",
+        "@inertiajs/inertia": "^0.11.0",
+        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@inertiajs/progress": "^0.2.7",
+        "@inertiajs/server": "^0.1.0",
         "@popperjs/core": "^2.11.0",
+        "@vue/server-renderer": "^3.2.27",
         "autoprefixer": "^10.4.0",
         "eslint": "^8.4.1",
         "eslint-plugin-vue": "^8.2.0",
-        "laravel-mix": "^6.0.39",
+        "laravel-mix": "^6.0.41",
         "lodash": "^4.17.21",
         "postcss": "^8.4.4",
         "postcss-import": "^12.0.1",
@@ -30,7 +34,8 @@
         "prettier-plugin-tailwind": "^2.2.12",
         "tailwindcss": "^2.0.3",
         "uuid": "^8.3.2",
-        "vue": "^3.2.24",
-        "vue-loader": "^16.2.0"
+        "vue": "^3.2.27",
+        "vue-loader": "^16.2.0",
+        "webpack-node-externals": "^3.0.0"
     }
 }

resources/csv/barrios.csv

@@ -0,0 +1,2 @@
+nombre|region
+EJEMPLO|SIN REGION

resources/js/app.js

@@ -6,7 +6,7 @@ InertiaProgress.init()
 
 createInertiaApp({
   resolve: name => require(`./Pages/${name}`),
-  title: title => `${title} - Ping CRM`,
+  title: title => title ? `${title} - Ping CRM` : 'Ping CRM',
   setup({ el, App, props, plugin }) {
     createApp({ render: () => h(App, props) })
       .use(plugin)

resources/js/ssr.js

@@ -0,0 +1,16 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from '@vue/server-renderer'
+import { createInertiaApp } from '@inertiajs/inertia-vue3'
+import createServer from '@inertiajs/server'
+
+createServer((page) => createInertiaApp({
+  page,
+  render: renderToString,
+  resolve: name => require(`./Pages/${name}`),
+  title: title => title ? `${title} - Ping CRM` : 'Ping CRM',
+  setup({ app, props, plugin }) {
+    return createSSRApp({
+      render: () => h(app, props),
+    }).use(plugin)
+  },
+}))

resources/views/app.blade.php

@@ -13,6 +13,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.startsWith" defer></script>
 
     <script src="{{ mix('/js/app.js') }}" defer></script>
+    @inertiaHead
 </head>
 <body class="font-sans leading-none text-gray-700 antialiased">
     @inertia

webpack.mix.js

@@ -1,4 +1,3 @@
-const path = require('path')
 const process = require('process')
 const mix = require('laravel-mix')
 const cssImport = require('postcss-import')

webpack.ssr.mix.js

@@ -0,0 +1,13 @@
+const mix = require('laravel-mix')
+const webpackNodeExternals = require('webpack-node-externals')
+const webpackConfig = require('./webpack.config')
+
+mix
+  .options({ manifest: false })
+  .js('resources/js/ssr.js', 'public/js')
+  .vue({ version: 3, options: { optimizeSSR: true } })
+  .webpackConfig({
+    ...webpackConfig,
+    target: 'node',
+    externals: [webpackNodeExternals()],
+  })