Ceci est un projet Next.js créé avec create-next-app.
Site Internet de ByLudivine.com
Vous trouverez, dans ce dépot, le code source de mon site Internet.
il s'agit d'un environnement de développement, n'utilisez pas ce code et la configuration Docker associée en production
Il est à votre disposition pour vous aider à :
- Voir comment implémenter une fonctionnalité particulière :
- Docker (pour un environnement de dev nodejs)
- NodeMailer pour le formulaire de contact
- Google reCAPTCHA pour l'anti spam
- Sitemap pour le SEO
- Ajout des meta property og pour les réseaux sociaux
- Les animations
- ....
- Vous inspirer de la structure
- Apprendre à développer
- ...
Docker est utilisé pour faciliter l'installation de l'environnement de développement. Si vous ne possédez pas cet outil, vous pouvez l'installer gratuitement :
Sur Windows, il faudra installer l'émulateur WSL2 qui permet d'executer un environnement Linux
Sur Linux il faudra également installer Docker Compose
Pour tester pleinement la fonctionnalité antispam de Google reCAPTCHA vous devez créer des clés de site
suivez ce lien pour voir comment faire : création de clé
Lorsque vous créez vos clés, il est nécessaire d'indiquer un domaine. Dans le cadre de l'environnement de développement, le domaine sera "localhost"
- Copiez le contenu du dépot GITHUB dans un répertoire de votre ordinateur
- Placez-vous dans ce répertoire et modifiez le fichier .env en indiquant votre clé privée et votre clé publique Google reCaptcha
# reCAPTCHA public key
NEXT_PUBLIC_RECAPTCHA_SITE_KEY="INDIQUEZ VOTRE CLE PUBLIQUE"
# reCAPTCHA secret key
RECAPTCHA_SECRET_KEY="INDIQUEZ VOTRE CLE PRIVE"- Executer les commandes ci-dessous
Ces commandes vont créer le conteneur Docker dans lequel sera installée l'application avec toutes les librairies nécessaires. Un serveur SMTP sera également créé pour tester l'envoi des emails du formulaire de contact.
docker-compose build
docker-compose up -d
Cette commande permet de rentrer en shell dans notre conteneur Node qui héberge l'application
docker exec -it docker_node sh
Vous devriez voir apparaitre l'invité de commande ci-dessous
/app #
- A l'intérieur du conteneur, éxecutez les commandes suivantes pour installer et lancer l'application
installation de l'application
/app # yarn install
lancement de l'application
/app # yarn dev
Docker a mappé le répertoire /app du conteneur avec le répertoire de votre ordinateur dans lequel se trouve le code source. Ainsi, toutes les modifications que vous ferez sur le code source, seront synchronisées avec le répertoire /app du conteneur Docker.
Pour ouvrir le site Internet :
- Ouvrez votre navigateur et connectez-vous sur http://localhost:3000
Pour ouvrir le serveur SMTP :
- Ouvrez votre navigateur et connectez-vous sur http://localhost:1080
Lorsque vous envoyez un email au travers du formulaire de contact du site, vous pouvez voir, au sein de Mailcatcher, votre email arriver.
Pour tester le sitemap
- Ouvrez votre navigateur et connectez-vous sur http://localhost:3000/sitemap.xml
si vous souhaitez quitter le conteneur :
/app # exit
Si vous souhaitez arrêter le conteneur :
docker-compose down
Bibliothèque de style CSS https://emotion.sh/docs/introduction
Validateur de données de formulaire à partir d'un schéma que l'on définit https://github.com/jquense/yup
Permet de faire les requêtes API https://github.com/axios/axios
Permet d'envoyer des emails en configurant le corps de l'email avec les données saisies dans le formulaire de contact https://nodemailer.com/about/
Ajout de google reCAPTCHA V2 (case à cocher) au formulaire de contact contre les spams https://www.google.com/recaptcha/about/
Le projet est sous la licence open source MIT
Afin de contribuer dans un environnement sain et convivial merci de respecter le code de conduite
Vous trouverez l'ensemble des directives à suivre pour contribuer au projet dans le fichier Contributing