PrestaShop : Mode Développement VS Mode Production

Image de l'article de blog sur la série PrestaShop. Episode consacré aux réglages en mode développement et en mode production.
Image de l'article de blog sur la série PrestaShop. Episode consacré aux réglages en mode développement et en mode production.

Introduction

Dans cet article consacré à PrestaShop, comme dans tous mes articles d’ailleurs, je partage avec vous mes connaissances sur le sujet de l’article, de l’épisode proposé. Bien entendu, toutes les informations, que je donne, sont vérifiées et testées. Sachez toutefois que je ne me définis en aucun cas comme un expert, et qu’il existe certainement d’autres façons de faire, que ce soit dans le code ou toute autres choses. 

Mon but est vraiment de partager, de réfléchir ensemble, et de vous apporter ma modeste contribution, et évidemment d’arriver aux résultats escomptés. 

N’hésitez surtout pas à laisser vos commentaires, si vous avez des informations, ou des façons de faire que je ne connais pas.

Mais vous pouvez aussi laisser un commentaire pour me dire ce que vous pensez du sujet, si celui-ci vous a apporté une aide, les éventuelles questions ou problèmes que vous avez rencontré. Bref, vous l’avez compris, n’hésitons pas à communiquer !

Le choix du roi

Comme toujours sur le blog Activateur Web, vous le savez, vous avez le choix entre suivre ce tutoriel par le biais du tutoriel vidéo, ou vous pouvez également suivre ce tutoriel à lire où je vous guide pas à pas dans la mise en place des différentes étapes.

A vous de voir, mais vous êtes libres de faire les 2 à la fois, bien entendu.

Je vous mets également à disposition, en téléchargement, une présentation des différents réglages vus dans ce tutoriel, à la fin de celui-ci.

Bon visionnage ou bonne lecture. 

Tutoriel Vidéo : PrestaShop : Mode Développement VS Mode Production

Tutoriel à lire et à suivre pas à pas

Cliquez sur la double flèche de la table des matières pour ouvrir ou fermer celle-ci.

Table des matières - Sommaire

Préambule Série PrestaShop

De retour sur la série PrestaShop, ou j’ai décidé de créer un tutoriel, concernant les réglages, et paramètres à utiliser lorsque vous suivrez, peut-être, les différents tutoriels et épisodes faisant partie de cette série. Plutôt que de devoir répéter ce sujet à chaque épisode, je pense qu’il sera utile d’avoir ce guide, une fois pour toutes. Cela permettra également de faire une comparaison entre les réglages version développement et les réglages version production.

Dans ce tutoriel, nous allons voir comment paramétrer sa boutique PrestaShop en fonction de son mode de fonctionnement.
Premièrement, nous verrons les réglages à effectuer lorsque nous sommes en mode développement, c’est-à-dire lorsque, nous modifions le code de nos fichiers. A la suite de quoi, nous verrons, à l’inverse, la configuration lorsque notre boutique est en mode production, autrement dit en ligne et disponible pour nos utilisateurs. 

Le mode Développement avec PrestaShop

Pourquoi être en mode développement ?

Pour être clair, ce qui suit ne s’adresse pas aux développeurs confirmés, mais à toutes les personnes possédant une boutique PrestaShop, et désireux de vouloir personnaliser son site. Et pour cela, pas d’autres choix que de mettre les mains dans le code.

Il faut bien comprendre que vous êtes en mode développement dès lors que vous modifiez, ajoutez, ou supprimez du code dans les fichiers de votre boutique PrestaShop. Et ce, que ce soit dans un fichier .php, .tpl, .yml ( / .yaml), ou encore .twig.
À partir du moment où vous touchez à ces fichiers, il vous faudra mettre votre boutique en mode maintenance. Si vous ne le faites pas, sachez que vous prenez un risque de faire planter le site, et quoi de plus désagréable pour vos clients lorsqu’ils sont en train de naviguer ou peut être même de payer, de se retrouver avec une page 404, ou Erreur 500 ?
C’est un coup, à ne plus jamais les revoir.

Environnement de développement plutôt que site en maintenance

Plutôt que de mettre votre boutique en mode maintenance, mieux vaut se configurer un environnement de développement. Vous travaillerez sur cet environnement, vous ferez tous les tests de fonctionnalités nécessaires. Enfin, après validation de ces tests, alors vous mettrez votre boutique en mode maintenance, seulement le temps de pousser vos fichiers sur votre boutique en ligne. Voyons cela un peu plus en détail et pourquoi je vous conseille cela.

Pourquoi un environnement de développement ?

Lorsque je parle d’environnement de développement, je pense en premier lieu à un serveur local, et évidemment à une boutique PrestaShop, et un gestionnaire de bases de données.

Cet environnement vous permettra de faire vos modifications sans devoir mettre votre boutique en mode maintenance, pendant la période de développement de vos nouvelles fonctionnalités. De surcroit, il vous permettra également de faire les tests en rapport avec les modifications apportées à votre code. De cette façon, lorsque vous mettrez à disposition une nouvelle fonctionnalité, ou un nouveau design, ou tout autre chose, pour vos utilisateurs (sur le front-office), ou pour vous-même (sur le back-office), vous serez sûr de son fonctionnement.

Prendre le temps de développer

Croyez-moi, développer prend du temps et parfois de nombreuses erreurs peuvent survenir pendant cette phase. Il faut donc prendre le temps de le faire, sans avoir la pression de savoir notre boutique en mode maintenance, et de penser à l’argent perdu.

D’autant plus qu’avec les solutions (gratuites) qui existent aujourd’hui, on peut facilement mettre en place son environnement de développement. Attention toutefois, à bien penser que votre boutique test qui sera donc sur votre serveur local, doit être un clone de votre boutique en ligne, ou au minimum être de la même version.

Je vous en parlerai dans la suite.

Créer son environnement de développement PrestaShop

Serveur Local

En premier lieu, pour mettre en place une boutique test, il vous faudra un serveur local. Autrement dit, un serveur que vous installerez sur votre ordinateur, et qui utilisera le nom de domaine “localhost” ou l’adresse 127.0.0.1 (qui appellera le domaine localhost). Avec lui, vous n’avez même pas besoin d’Internet pour vous connecter.
Et mieux encore, ce qu’il nous faut, c’est un serveur AMP. 

Serveur AMP

AMP est un acronyme (dérivé de LAMP) désignant un ensemble de logiciels libres permettant de construire une architecture de serveur web sur n’importe quelle plateforme.
Le AMP original se référer aux logiciels suivants :

  • Apache : le serveur web
  • MySQL ou MariaDB : gestionnaires de bases de données
  • PHP, Perl, ou Python : les langages de script

Dans le cadre de notre boutique PrestaShop, nous aurons donc besoin de Apache, MySQL ou MariaDB, et de PHP.

Et bien, vous pouvez donc mettre un serveur AMP en place sur votre ordinateur, et vous aurez ainsi de quoi faire tourner votre boutique test en local. Suivant le système d’exploitation de votre ordinateur, il en existe plusieurs :

  • LAMP (Linux, Apache, MySQL, PHP)
  • WAMP (Windows, Apache, MySQL, PHP)
  • MAMP(Macintosh, Apache, MySQL, PHP)
  • XAMPP (Multi-plateformes, Apache, MySQL,Perl, PHP)

Vous n’avez pas encore installé de serveur local AMP, je vous invite à aller voir le tutoriel que j’ai publié sur l’installation de WampServer. C’est celui que j’utilise et il convient parfaitement.

Boutique PrestaShop de tests (dite locale)

Concernant la boutique PrestaShop de tests, et qui sera donc sur votre serveur local, le mieux est de posséder un clone de votre boutique en ligne (boutique en production), ainsi que celui de votre base de données.

Je publierai certainement prochainement un tutoriel pour vous expliquer comment créer un véritable clone de votre boutique. Publiez vos commentaires pour me dire si cela peut vous être utile.

Mais un clone n’est pas une obligation. Vous pouvez vous en passer, dans certains cas, mais cela dépendra du projet de développement que vous prévoyez de faire.
Si vous souhaitez mettre en place des choses simples, qui nécessitent peu de modifications ou d’implémentations de code, vous pouvez utiliser la boutique PrestaShop dans sa version de base.

La boutique en ligne et la boutique locale doivent posséder des versions identiques.

ATTENTION, vous devez tout de même installer la boutique suivant la même version que votre boutique en ligne. Admettons que votre boutique en ligne est une version de PrestaShop 1.7.5, par exemple, alors vous installerez cette même version, comme boutique tests, sur le serveur local.
Vous pouvez retrouver toutes les versions de PrestaShop en suivant ce lien.

Et vous savez quoi, si vous ne savez pas comment vous y prendre pour installer votre boutique tests, sur votre serveur local, et bien rendez-vous sur le blog Activateur Web, pour voir l’épisode 1, consacré à la série PrestaShop : installation du CMS PrestaShop sur serveur local. 

Installer un thème enfant - boutique locale et boutique en ligne

De manière générale, lorsque nous modifierons du code dans les fichiers de notre boutique PrestaShop, nous ferons toujours en sorte de ne pas toucher au cœur de PrestaShop. Concernant le thème, il est primordial de mettre en place un thème enfant, et là encore, je vous encourage vivement à le faire. Si ce n’est pas encore fait, vous pouvez suivre l’épisode 2 de cette série, ou je vous explique comment créer et mettre en place un thème enfant.

Attention lors de modifications dans le thème parent

Pour ceux qui ne veulent pas mettre en place de thème enfant, vous pouvez bien entendu faire les modifications du code, directement sur les fichiers du thème parent. Mais sachez, qu’à la première mise à jour de votre version de PrestaShop, vous devrez recommencer tout le travail car tout sera perdu. Ce qui ne sera pas le cas, si vous mettez en place un thème enfant. Mais c’est à vous de voir.

Éditeur de code

De même, pour développer et coder, il vous faudra un éditeur de code. Là aussi, il existe de nombreuses solutions, gratuites ou payantes. (Sublime Text, Pycharm, Notepad++,NetBeans, Visual Studio Code, etc.).

Pour ma part, j’utilise Visual Studio Code, qui est gratuit, et qui me convient parfaitement. De plus, on peut le synchroniser avec GitHub (pour conserver les différentes versions de son code), et il possède de nombreuses extensions développées par la communauté, pour nous aider à coder, suivant le langage utilisé.

Si vous n’avez pas encore d’éditeur de code, et que vous souhaitez utiliser Visual Studio Code, je vous explique comment l’installer et le mettre en français, sur cet article de blog Activateur Web : Installation de Visual Studio Code.

Navigateur

Enfin, il vous faudra un navigateur pour afficher votre tableau de bord et votre boutique depuis votre serveur local.
Dans mon cas, j’utilise Google Chrome surtout pour ses outils d’inspection, bien que maintenant, que ce soit Firefox, Edge, ou autres, ils possèdent tous des outils d’inspection.

Que ce soit pour l’éditeur de code ou le navigateur, à vous de voir avec lequel vous êtes le plus à l’aise.

Réglages mode Développement PrestaShop

Afin de gagner du temps, lors du développement, des réglages sont à faire dans PrestaShop, et nous le verrons des paramètres dans l’éditeur de code et dans les outils du navigateur peuvent nous aider également.

Les principaux paramètres concernent le cache.

Tableau de bord PrestaShop

Onglet Paramètres avancés - Performances

Paramètres Smarty :

Désactiver le cache et forcer la compilation Smarty.

  • Compilation des templates : Forcer la compilation à chaque appel
  • Cache : Non

Activation Mode Debug (facultatif):

Activation du mode débogage.

  • Mode Debug : Oui

Ce mode vous permet d’accéder à la barre de debug. Surtout utile lorsque vous développez des thèmes ou modules. Mais aussi, lors d’erreurs pour voir les messages d’erreur du serveur ou les codes de débogage.
ATTENTION, ce mode produit une dégradation significative des performances.

Image représentant les réglages de Smarty et outils de debug dans PrestaShop.
Onglets Paramètres avancés / Performances : Smarty et Debug - Mode Développement

CCC (Concaténation, Compression et mise en Cache)

  • Smart cache pour les feuilles de style : Non
  • Smart cache pour le code JavaScript : Non
  • Optimisation Apache :Non
Image des réglages de concaténation, compression, mise en cache dans PrestaShop en mode développement
Concaténation, Compression, mise en Cache : Désactivés en Mode Développement

Paramètres de la boutique - Trafic et SEO - SEO et URL

Configuration des URLs
Afin de pouvoir utiliser des images et leur chemin relatif, nous allons configurer les URLs pour le développement :

  • URL simplifiée => Non
  • Rediriger vers l’URL canonique => Aucune redirection
Image de configuration des URLs dans PrestaShop en mode Développement
Configuration des URLs en mode Développement

Les outils de navigateur

De même, je vous conseille d’ouvrir les outils de navigateur. Pour cela, placez vous sur la page d’accueil de votre boutique et tapez sur la touche F12 de votre clavier. Vous pouvez également les ouvrir en faisant un clic droit puis sélectionner “Inspecter”.
Une fois les outils ouverts, rendez vous dans l’onglet “Réseau” puis cochez la case à cocher “Désactiver le cache”.

Image de la configuration du cache du navigateur.
Configuration du cache du navigateur

Sauvegarde du code dans l’éditeur

Enfin, dans votre éditeur de code, si vous avez la possibilité de régler l’enregistrement en automatique, faites le. Cela permet de prendre en compte les modifications au fur et à mesure qu’on code, sans avoir à enregistrer à chaque modification. Vous vous êtes trompez ? Pas de soucis, tapez sur les touches Ctrl + Z en même temps pour revenir en arrière, autant de fois qu’il le faut, pour supprimer les modifications.
En ce qui concerne Visual Studio Code, vous allez dans l’onglet “Fichier” et cocher le paramètre “enregistrement automatique”. 

Image du paramétrage de l'enregistrement automatique dans Visual Studio Code.
Paramétrage de l'enregistrement automatique dans Visual Studio Code.

Réglages Mode Production PrestaShop

Lorsque vous mettez votre boutique en ligne, pensez à modifier ces paramètres de nouveau.

Dans PrestaShop

Paramètres avancés - Performances

Smarty :

  • Compilation des templates : Recompiler les fichiers de templates s’ils ont été mis à jour.
  • Cache : Oui

Mode Debug (facultatif):

  • Mode Debug : Non

ATTENTION, ce mode produit une dégradation significative des performances. C’est pourquoi, il sera désactivé en production.

Image représentant les réglages de Smarty et outils de debug dans PrestaShop, en mode Production.
Onglets Paramètres avancés / Performances : Smarty et Debug - Mode Production

Concaténation, Compression et mise en Cache (CCC)

  • Smart cache pour les feuilles de style : Oui
  • Smart cache pour le code JavaScript : Oui
  • Optimisation Apache : Oui
Image des réglages de concaténation, compression, mise en cache dans PrestaShop en mode Production.
Concaténation, Compression, mise en Cache : Activés en Mode Production

Paramètres de la boutique - Trafic et SEO - SEO et URL

Configuration des URLs

  • URL simplifiée => Oui
  • Rediriger vers l’URL canonique => 301 Déplacé définitivement
Image de configuration des URLs dans PrestaShop en mode Production.
Configuration des URLs en mode Production

Suivez Moi !

Voilà, ce tutoriel est maintenant terminé. J’espère qu’il aura pu vous aider, et que vous pourrez mettre en place votre environnement de développement. Vous le voyez entre le mode développement et le mode production, certains paramètres doivent être configurés différemment. C’est pourquoi, lorsque vous aurez d’un côté un environnement de production et de l’autre un environnement de développement, vous n’aurez plus à modifier ces paramètres à chaque fois. 

J’espère avoir été clair, et que vous viendrez partager avec moi, sur les différents tutoriels qui seront consacrés à cette série. A me dire ce qui vous serez utile comme tutoriel. N’hésitez pas à me suivre, et à commenter : 

Prenez quelques secondes/minutes svp :  cela m’encouragera dans la création de contenu comme celui-ci. Merci par avance.

Je vous remercie d’avoir suivi ce tutoriel, je vous dis à très vite pour de beaux projets de développement.

En attendant, prenez soin de vous, et surtout : Restez curieux !! 

Télécharger le Guide

Si cela peut vous aider, je partage volontiers les slides de présentation des différents réglages. 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

Développeur indépendant

Passionné par le développement web, j’aime créer les contenus web qui permettent à mes clients d’obtenir une marque, un style, un site à leur image.

Catégories
Les catégories d’articles
Mes Articles Préférés
Retrouvez Moi
Sur YouTube

Sur ma chaine Youtube, je partage avec vous sur différents sujets.

Sur Facebook
Liens Amis
Le Fouet Enchanté
Site e-commerce Le Fouet Enchanté
A découvrir

Connectez Vous à votre compte