Menu

1. Informations générales
2. Interface de l'application
3. Accès à la démonstration en ligne
4. Configuration du formulaire Contact
5. Liste pré-requis
6. Lancement de l'application
7. Correction renderToReadableStream
8. Auteur, contact et remerciements

Retour en haut 🡅

Projet Design Portfolio

• Développement d'un Portfolio Design avec React.

• Utilisation de React, Vite.js et Remix.

• Utilisation de Three.js et de Tailwind CSS.

---

Retour en haut 🡅

Interface de l'application

• L'application est exécutée dans une page web.

---

Retour en haut 🡅

Accès à la démonstration en ligne

• Vous pouvez accéder à une démonstration du portfolio via Cloudflare Pages.
• En utilisant le lien suivant ➔ Lien du portfolio en ligne

---

Retour en haut 🡅

Configuration du formulaire Contact

• Pour faire fonctionner le formulaire de contact, créez un compte EmailJS ➔ Création d'un compte EmailJS et le configurer. Il faudra ensuite créer un fichier .env à la racine du projet.

• Exemple fichier .env :

VITE_APP_EMAILJS_PUBLIC_KEY=VB6AFLYgeG81Kftru  # Clé publique
VITE_APP_EMAILJS_SERVICE_ID=service_u2f80ks    # Identifiant de service
VITE_APP_EMAILJS_TEMPLATEID=template_g18y085   # Identifiant de modèle

• Si vous souhaitez utiliser Cloudflare pour le déploiement il faudra créer un fichier .dev.vars à la racine du projet.

• Exemple fichier .dev.vars :

VITE_APP_EMAILJS_PUBLIC_KEY=VB6AFLYgeG81Kftru  # Clé publique
VITE_APP_EMAILJS_SERVICE_ID=service_u2f80ks    # Identifiant de service
VITE_APP_EMAILJS_TEMPLATEID=template_g18y085   # Identifiant de modèle

• Vous devrez également les ajouter comme variables d'environnement dans le tableau de bord de Cloudflare PAges pour que cela fonctionne en production.

---

Retour en haut 🡅

Liste pré-requis

• Aucun pré-requis n'est nécessaire.

• Application conçue avec les technologies suivantes :
   

  • React v18.3.1 ➔ Documentation React
  • Vitejs v5.1.0 ➔ Documentation Vitejs
  • Remix v2.13.1 ➔ Documentation Remix
  • Three.js v0.169.0 ➔ Documentation Three.js
  • Node.js v.20.9.0 ➔ Documentation Node.js
  • Npm v10.8.1 ➔ Documentation et téléchargement de Npm
  • Tailwind CSS v3.4.4 ➔ Documentation Tailwind CSS
  • VSCode v1.85.2 ➔ Documentation et téléchargement de VSCode
  • Chrome v.126.0.6478.114 & Firefox v.127.0
  • Windows 10 Professionnel

---

Retour en haut 🡅

Lancement de l'application

• Pour lancer l'application.

1. Installer Node.js (inclut npm)

• Si Node.js n'est pas encore installé sur votre machine, il peut être téléchargé ici ➔ Téléchargement Node.js
• Cela installera :
  • À la fois les dépendances de production (comme react et react-dom)
  • Et les dépendances de développement (comme Vite, Three.js, etc.)
     

2. Installer les dépendances

• Dans un terminal exécuter la commande suivante dans le répertoire du projet.
• Cela installera toutes les dépendances spécifiées dans le fichier package.json ➔ (package.json).

$ npm install

• Pour lancer le projet en mode développement.
• Cela permettra d'accéder a la page ➔ http://localhost:5173/

$ npm run dev

Note navigateur : Les tests ont était fait sur Firefox et Google Chrome.

---

Retour en haut 🡅

Correction renderToReadableStream

• Si après avoir exécutée la commande npm run dev vous obtenez l'erreur suivante :

[vite] Error when evaluating SSR module /node_modules/@remix-run/dev/dist/config/defaults/entry.server.cloudflare.tsx: failed to import "react-dom/server"
[vite] Named export 'renderToReadableStream' not found.
The requested module 'react-dom/server' is a CommonJS module, which may not support all module.exports as named exports.       
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-dom/server';
const {renderToReadableStream} = pkg;

• Il faudra modifier le fichier entry.server.cloudflare.tsx à l'emplacement suivant :

/node_modules/@remix-run/dev/dist/config/defaults/entry.server.cloudflare.tsx

• Cela contourne l'utilisation de renderToReadableStream et utilise renderToString, ce qui est souvent plus compatible.

# Fichier entry.server.cloudflare.tsx (après modifications)

import * as isbotModule from "isbot";
import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from '@remix-run/react';
import { renderToString } from 'react-dom/server';

export default async function handleRequest(
    request: Request,
    responseStatusCode: number,
    responseHeaders: Headers,
    remixContext: EntryContext,
    loadContext: AppLoadContext
) {
    let body = '';

    try {
        body = renderToString(
            <RemixServer context={remixContext} url={request.url} />
        );
    } catch (error) {
        // Log streaming rendering errors from inside the shell
        console.error('Rendering error:', error);
        responseStatusCode = 500;
    }

    if (isBotRequest(request.headers.get("user-agent"))) {
        // If the request is from a bot, wait for the body to be ready (if necessary)
        // In this case, we're assuming no need to wait for anything since we're not streaming
    }

    responseHeaders.set('Content-Type', 'text/html');
    return new Response(body, {
        headers: responseHeaders,
        status: responseStatusCode,
    });
}

function isBotRequest(userAgent: string | null) {
    if (!userAgent) {
        return false;
    }

    // isbot >= 3.8.0 or >= 4
    if ("isbot" in isbotModule && typeof isbotModule.isbot === "function") {
        return isbotModule.isbot(userAgent);
    }

    // isbot < 3.8.0
    if ("default" in isbotModule && typeof isbotModule.default === "function") {
        return isbotModule.default(userAgent);
    }

    return false;
}

---

Retour en haut 🡅

Auteur, contact et remerciements

• Pour toute information supplémentaire, vous pouvez me contacter.
  À l'adresse suivante Bubhux : [email protected]  

• Un remerciement particulier au concepteur du projet original.
  Inspiré et basé sur le projet de Hamish Williams ➔ GitHub : https://github.com/HamishMW/portfolio