VirtualHost Apache + PHP-FPM

Cette configuration met en place un environnement local simple avec Apache et PHP-FPM, en isolant proprement le projet dans son propre VirtualHost.

cd /etc/apache2/sites-available
nano projet.conf
<VirtualHost *:80>
    ServerAdmin mon@email.fr
    ServerName projet.serveurdev.eu
    DocumentRoot /var/www/vhosts/projet/httpdocs
    <Directory /var/www/vhosts/projet>
        Options -Indexes +FollowSymLinks +ExecCGI
        AllowOverride All
    </Directory>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <FilesMatch \.php$>
        SetHandler "proxy:unix:/run/php/php8.3-fpm.sock|fcgi://localhost/"
    </FilesMatch>
</VirtualHost>

Créer ensuite l'arborescence du projet :

cd /var/www/vhosts/
mkdir -p projet/httpdocs/assets/{js,img,css}

echo "<?php phpinfo(); ?>" > projet/httpdocs/index.php
systemctl reload apache2
chown -R $USER:$USER projet/
chmod -R u+rwX,go+rX projet/

Mettre ensuite à jour le fichier hosts (sous Windows : C:\Windows\System32\drivers\etc\) :

192.168.100.200    projet.serveurdev.eu

Composer

cd projet
composer init
Generating autoload files
Generated autoload files
PSR-4 autoloading configured. Use "namespace Root\Projet;" in src/
Include the Composer autoloader with: require 'vendor/autoload.php';

Packagist recense les paquets disponibles : https://packagist.org/

composer.json :

{
    "name": "root/projet",
    "autoload": {
        "psr-4": {
            "Root\\Projet\\": "src/"
        }
    },
    "authors": [
        {
            "name": "Mon nom",
            "email": "Mon@email.fr"
        }
    ],
    "require": {}
}

Exemples de dépendances utiles :

composer require altorouter/altorouter
composer require symfony/yaml
composer require symfony/http-foundation
composer require twig/twig
composer require twig/intl-extra
composer require twig/extra-bundle
composer require dompdf/dompdf
composer require agenciasys/ofxparser
composer require phpmailer/phpmailer
composer require phpoffice/phpspreadsheet
composer require setasign/fpdf
composer require setasign/fpdi
composer require setasign/tfpdf
composer require eluceo/ical

Le registre npm est disponible ici : https://www.npmjs.com/

Webpack et JS

npm install --save-dev webpack-cli

npm init -y
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i --save bootstrap @popperjs/core
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
mkdir {src,src/js,src/scss}

touch src/index.html src/js/script.js src/scss/styles.scss webpack.config.js

package.json :

{
  "name": "monsite.fr",
  "version": "1.1.0",
  "description": "mon suppppper projet",
  "license": "ISC",
  "main": "webpack.config.js",
  "author": "",
  "dependencies": {
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  },
  "scripts": {
    "watch": "webpack --watch --mode development",
    "build": "webpack --mode production"
  }
}

webpack.config.js :

'use strict'
const path = require('path');
module.exports = {
   mode: 'production',
    entry: {
      script : './src/js/script.js',
    },
  output: {
    path: path.resolve(__dirname,'httpdocs','assets','js'),
    filename: '[name].min.js',
    clean: true,
    publicPath: '/'
  },
  optimization: {
    minimize: true // Active la minification
    },
};

projet/src/js/script.js :

'use strict'
console.log('Bonjour');
npm run watch
npm run build

projet/httpdocs/index.php :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>mon suppppper projet</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello, mon suppppper projet</h1>
    </div>

    <script src="/assets/js/script.min.js"></script>
  </body>
</html>

Sass

npm install -g sass

sass --watch --style=compressed src/scss/styles.scss httpdocs/assets/css/style.min.css