Laravel Vite dominio propio

Use the following steps to install Bootstrap 5 in the laravel 9 with Vite.

  1. Install Laravel Project
  2. Install Laravel UI For Bootstrap 5
  3. Setup Auth Scaffolding with Bootstrap 5
  4. Install NPM Dependencies
  5. Import vite.config.js Bootstrap 5 Path
  6. Update bootstrap.js
  7. Import Bootstrap 5 SCSS in JS Folder
  8. Replace mix() with @vite Blade directive
  9. Running Vite Command to build Asset File
  10. Start the Local server

Step 1: Install Laravel Project

Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-bootstrap5-vite

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new laravel9-bootstrap5-vite

Step 2: Install Laravel UI For Bootstrap 5

Next, you need to run the below command in your terminal

composer require laravel/ui

Step 3: Setup Auth Scaffolding with Bootstrap 5

php artisan ui bootstrap --auth

 Step 4: Install NPM Dependencies

Run the following command to install frontend dependencies:

npm install

Step 5: Import vite.config.js Bootstrap 5 Path

First, you need to change vite.config.js and add the bootstrap 5 path & remove resources/css/app.css

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});

Step 6: Update bootstrap.js

We need to use import instead of require.

import loadash from 'lodash'
window._ = loadash


import * as Popper from '@popperjs/core'
window.Popper = Popper

import 'bootstrap'


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios'
window.axios = axios

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

Step 7: Import Bootstrap 5 SCSS in JS Folder

Now you need to import bootstrap 5 SCSS path in you resources/js/app.js or resources/js/bootstrap.js

resources/js/app.js

import './bootstrap';

import '../sass/app.scss'

Step 8: Replace mix() with @vite Blade directive

When using Vite, you will need to use the @vite Blade directive instead of the mix() helper. remove mix helper and add @vite directive.

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

use @vite directive

@vite(['resources/js/app.js'])

views/layouts/app.blade

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    @vite(['resources/js/app.js'])

</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

Step 9: Running Vite Command to build Asset File

You need to npm run build command to create asset bootstrap 5.

npm run build

Step 10: Start the Local server

Now open a new terminal and execute the following command from your terminal to run the development server.

php artisan serve

Para hacerlo funcionar en desarrollo hay que apuntar un subdominio específico para el vite e instalar el plugin de ssl del mkcert que genera un certificado auto signed para ese subdominio.

Igualmente hay que ver el código fuente y darle al menos una vez a aceptar el certificado.

https://github.com/liuweiGL/vite-plugin-mkcert

npm install vite-plugin-mkcert -D

My final vite.config.js file looked like this:

import laravel from 'laravel-vite-plugin'
import { defineConfig } from 'vite'
import mkcert from'vite-plugin-mkcert'

export default defineConfig({
    server: {
      https: true,
      host: 'vite.myproject.test',
    },
    plugins: [
        mkcert(),
        laravel({
          input: [
            'resources/css/app.css',
            'resources/js/app.js',
          ],
          refresh: true,
        }),
    ],
})

PHP 8.1 en servidores Moss.sh

Instalación de paquetes

apt install php8.1-bcmath php8.1-bz2 php8.1-cli php8.1-common php8.1-curl php8.1-dev php8.1-fpm php8.1-imap php8.1-intl php8.1-mbstring php8.1-mysql php8.1-opcache php8.1-pgsql php8.1-readline php8.1-soap php8.1-sqlite3 php8.1-xml php8.1-xmlrpc php8.1-zip php8.1-gd php8.1-igbinary php8.1-imagick php8.1-memcached php8.1-msgpack


Hay que lanzar estos comandos para que apliquen al usuario «aws»

cp /etc/php/8.1/fpm/pool.d/www.conf /etc/php/8.1/fpm/pool.d/aws.conf

sed -i 's/[www]/[aws]/g' /etc/php/8.1/fpm/pool.d/aws.conf

sed -i 's/www-data/aws/g' /etc/php/8.1/fpm/pool.d/aws.conf

sed -i 's/php8.1-fpm/php8.1-fpm-aws/g' /etc/php/8.1/fpm/pool.d/aws.conf

service php8.1-fpm reload


Asignación de php 8.1 al sitio que sea en moss

sed -i 's/php7.4-fpm-aws/php8.1-fpm-aws/g' /usr/local/openresty/nginx/sites/sitiocreadoenmoss.conf

service openresty restart


Si Una vez realizados todos los pasos si se hace algún cambio desde el panel de moss, hay que volver a configurar manualmente el sitio para que tire de php 8.1

su root

sed -i 's/php7.4-fpm-aws/php8.1-fpm-aws/g' /usr/local/openresty/nginx/sites/sitiocreadoenmoss.conf

service openresty restart

Oracle Cloud + HestiaCP

Habilitar puertos firewall

sudo iptables -F
sudo netfilter-persistent save

Descargar instalador

wget https://raw.githubusercontent.com/hestiacp/hestiacp/release/install/hst-install.sh

Instalar hestiacp con su script y todo lo que se necesite, para nuestro ejemplo Nginx + Php + Mysql. Para personalizar hay que ir a la web de ayuda para ello. Para que no salga advertencia de que ya hay un usuario admin hay que añadir al final --force

https://gabizz.github.io/hestiacp-scriptline-generator/

sudo bash hst-install.sh --apache no --phpfpm yes --multiphp yes --vsftpd no --proftpd no --named no --mysql yes --postgresql no --exim no --dovecot no --sieve no --clamav no --spamassassin no --iptables yes --fail2ban yes --quota no --api no --interactive yes --with-debs no --port 8083 --hostname hestiacp.innovacreaciones.es --email info@innovacreaciones.es --password 123456 --lang es --force

El puerto por defecto al admin es 8083

Crear el usuario con el que se van a gestionar las webs, por ejemplo aws

Hay que agregar la llave ssh de Cloud9 a este usuario, desde el panel de hestia.

Hay que instalar node y npm siguiendo la guía de instalación con nvm de DigitalOcean y previamente hay que conectarse como el usuario antes creado (aws) ya que se instala de manera «local» para cada usuario.
https://www.digitalocean.com/community/tutorials/como-instalar-node-js-en-ubuntu-18-04-es

Requisitos PREVIOS para AWS CLOUD9
apt install nodejs
apt install python
apt install nodejs
apt install libevent-dev
sudo apt-get install -y build-essential

Agregar usuario aws como sudo para que el instalador no falle
usermod -aG sudo aws

Para tener composer hay que añadirlo con un comando de hestiacp que hay que ejecutar como root
/usr/local/hestia/bin/v-add-user-composer aws

Se instala en la carpeta del usuario .composer de manera local por lo tanto tenemos que agregar un alias para poder usarlo normalmente con «composer» y para hacerlo permanente lo agregamos como primera línea en el fichero del bash
nano ~/.bashrc
alias composer="/home/aws/.composer/composer"

Para acceder remotamente hay que configurar en el panel de hestiacp el puerto 3306 habilitado en la parte de Configuración / Contafuegos y tocar el fichero de configuración para comentar la línea de bind-address

/etc/mysql/mariadb.conf.d/50-server.cnf

#Instead of skip-networking the default is now to listen only on
#localhost which is more compatible and is not less secure.
#bind-address = 127.0.0.1

systemctl restart mysql.service
systemctl daemon-reload

Para evitar que falle en Chrome al intentar acceder al admin con el puerto 8083 indicando que no es seguro el certificado hay que ejecutar estos dos comandos como root

v-change-sys-hostname host.domain.tld
v-add-letsencrypt-host


Instalar composer

sudo rm /usr/bin/composer

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php

php -r "unlink('composer-setup.php');"

Ejecutar alguno de estos 2, en base a donde queramos tener el ejecutable, normalmente la opción 2 (/usr/bin/composer)
sudo mv composer.phar /usr/local/bin/composer
sudo cp /usr/local/bin/composer /usr/bin/composer

Instalación limpia de Tabler.io

Tenemos que tener una instalación limpia Laravel



- Nos colocamos en la raíz y tenemos que instalar todas las dependencias básicas que trae Laravel con:
npm install



- Ahora ejecutamos la instalación específica de tabler
npm install @tabler/core



- Tocamos el webpack.mix.js dejandolo de la siguiente manera, ya que en "resources/scss" vamos a poner nuestras personalizaciones de tabler propias

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */


mix.js('resources/js/app.js', 'public/js').vue();
mix.sass('resources/scss/app.scss', 'public/css');

if(mix.inProduction()) {
    mix.version();
}



- Hay que ajustar el fichero resources/js/app.js
require('./bootstrap');

window.Vue = require('vue').default;

// Cargamos el tabler
require('@tabler/core/src/js/tabler.js');
//require('selectize');

// Si queremos cargar y usar los iconos de fontawesome
//require('@fortawesome/fontawesome-free/js/all.js');

// Esto es porque usamos la validación de bootstrap para que nos la haga antes del submit
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()


- Ajustamos el fichero resources/scss/app.scss ya que le hemos dicho en el webpackmix que pille este fichero
// Si queremos usar una font-family específica hay que ponerla primero para poder indicarla en el variables

// Primero hay que incluir las variables para que sobreescriban los que viene después
// Este fichero hay que crearlo para personalizar las variables por defecto del bootstrap/tabler
// Nosotros lo creamos como "_variables.scss" con guión y lo detecta
@import 'variables';


// Importamos el tabler css completo
@import '@tabler/core/src/scss/tabler';


- Hay que instalar "vue" si lo hemos incluído en el fichero de app.js por si queremos utilizar algo "a pelo" del vue (mostrar la contraseña con el iconito en el formulario de login)
npm install vue

- En la nueva versión de tabler hay que instalar varios módulos aparte para que no de fallo el "npm run"
npm install autosize
npm install imask

- Para que no falle la nueva versión en el tema de la fuente Inter, hay que ajustar el app.scss
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import 'variables';
@import '@tabler/core/src/scss/tabler';

y el  y el _variables.scss
$font-google: "'Open Sans', sans-serif";

- Ahora ya podemos lanzar el compilador de estilos y scripts (según corresponda dev, watch o production)
npm run watch
ó
npm run dev
ó
npm run production


- En nuestras vistas (main o donde corresponda) tenemos que enlazar estos ficheros generados con el Laravel Mix
<link rel="stylesheet" href="{{ mix('/css/app.css') }}" />
<script type="text/javascript" src="{{ mix('/js/app.js') }}"></script>

Crear sitio en AWS

  1. Instalar los componentes necesarios
apt install nodejs
apt install libevent-dev
sudo apt-get install -y build-essential

2. Agregar el usuario aws (o el que vaya a conectar) al grupo de sudo

usermod -aG sudo aws

3. Para evitar problemas con la instalación debes indicar en el path de node que tire directamente de /usr/bin/node en lugar del «usr/local…»

/usr/bin/node

EXTRAS

Para instalar node a una versión específica/final, se hace mediante nvm.

Instalamos nvm con
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Hay que cerrar y abrir el terminal para que pille la instalación.

source ~/.profile

nvm ls-remote

nvm install 16.6 (o la versión que se quiera)

Update node a la última versión

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Para usar vue y tabler en Laravel mix, hay que

  1. Indicar .vue() en el webpackmix.js
    mix.js('resources/js/app.js', 'public/js').vue();
  2. En nuestro resources/js/app.js
// Cargamos e inicializamos vue
window.Vue = require('vue').default;

// Cargamos el tabler
require('@tabler/core/dist/js/tabler.js');

Para asegurarnos de que funcionan bien los tooltips hay que instalar por npm el popper

npm i @popperjs/core

LEMP UBUNTU

apt update

apt install mysql

apt install php-fpm php-mysql php-mbstring php-curl php-xml php-gd

apt install mysql-server

mysql_secure_installation

MYSQL SERVER 8
CREATE USER ‘root’@’%’ IDENTIFIED BY ‘root’;
GRANT ALL PRIVILEGES ON aws.* TO ‘root’@’%’ WITH GRANT OPTION;
ALTER USER ‘root’@’%’ IDENTIFIED WITH mysql_native_password BY ‘root’;
FLUSH PRIVILEGES;

apt install python2.7

apt install nodejs

useradd -m -g sudo -s /bin/bash aws

passwd aws

su aws

ssh-keygen

En el directorio .ssh crear el archivo authorized_keys con la key de c9

Editar el fichero /etc/ssh/sshd_config y descomentar la línea de #PubkeyAuthentication yes