Deployer React sur Heroku

Pourquoi Deployer React sur Heroku ?

Le déploiement d'applications React sur Heroku permet aux développeurs d'offrir leurs applications à un large public sans avoir besoin de gérer les serveurs physiques ou logiciels. Cela offre une solution rapide et flexible pour déployer des applications web modernes, en particulier lorsque vous avez besoin d'une plateforme d'hébergement cloud.

Un cas concret est le déploiement d'un site web de gestion de tâches personnelle (todo list) que vous souhaitez partager avec votre famille ou vos collègues. En utilisant Heroku, vous pouvez facilement déployer cette application et la rendre accessible à partir d'un URL unique.

Prerequis

• Connaissance avancée du développement React
• Un compte Heroku
• Node.js (v14.x ou plus tard)
• npm (v6.x ou plus tard)

Outils à installer

• Heroku CLI : Utilisé pour interagir avec le service Heroku depuis la ligne de commande.

  npm install -g heroku
  

• Git : Utilisé pour gérer les versions du code et l'hébergement sur GitHub.

Concepts fondamentaux

Structure d'un projet React

Un projet React est typiquement organisé comme suit :

my-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

Utilisation de React Router

React Router est utilisé pour gérer les routes dans une application React. Il permet de définir des chemins et des composants associés.

// src/App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

Configuration de package.json

La configuration package.json est essentielle pour définir les scripts et dépendances de l'application.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Mise en pratique : projet fil rouge

Création du projet

1. Initialisation du projet :

   npx create-react-app my-todo-list
   cd my-todo-list
   

2. Création des composants :

   • src/components/TodoList.js :

     import React, { useState } from 'react';
     
     function TodoList() {
       const [todos, setTodos] = useState([]);
       const [inputValue, setInputValue] = useState('');
     
       const handleInputChange = (e) => {
         setInputValue(e.target.value);
       };
     
       const handleAddTodo = () => {
         if (inputValue.trim() !== '') {
           setTodos([...todos, inputValue]);
           setInputValue('');
         }
       };
     
       return (
         <div>
           <h1>Todo List</h1>
           <input
             type="text"
             value={inputValue}
             onChange={handleInputChange}
             placeholder="Add new task"
           />
           <button onClick={handleAddTodo}>Add Task</button>
           <ul>
             {todos.map((todo, index) => (
               <li key={index}>{todo}</li>
             ))}
           </ul>
         </div>
       );
     }
     
     export default TodoList;
     

   • src/components/App.js :

     import React from 'react';
     import TodoList from './TodoList';
     
     function App() {
       return (
         <div className="App">
           <h1>My Todo List</h1>
           <TodoList />
         </div>
       );
     }
     
     export default App;
     

3. Lancement du projet :

   npm start
   

4. Ajout des styles (facultatif) :

   • src/App.css :

     .App {
       text-align: center;
     }
     
     input, button {
       margin-top: 10px;
     }
     

5. Configuration de Heroku :

   • Créer un fichier Procfile à la racine du projet :

     web: npm start
     

   • Initialiser le dépôt Git et ajouter les fichiers :

     git init
     git add .
     git commit -m "Initial commit"
     

6. Création de l'application sur Heroku :

   heroku create my-todo-list-app
   

7. Déploiement sur Heroku :

   git push heroku master
   

8. Accès à l'application :

   • heroku open ou accéder via le lien fourni par la commande précédente.

Erreurs frequentes et debugging

1. Erreur : "Cannot GET /"

Cela signifie que Heroku ne trouve pas une route pour /. Assurez-vous que votre application utilise un serveur statique pour servir les fichiers React.

// src/App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

Correction :

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

2. Erreur : "Module not found: Error: Can't resolve 'path'"

Cela signifie que Heroku ne trouve pas le module path. Assurez-vous d'avoir les dépendances nécessaires dans package.json.

{
  "dependencies": {
    "path": "^0.12.7"
  }
}

Correction :

npm install path --save

3. Erreur : "Uncaught ReferenceError: regeneratorRuntime is not defined"

Cela signifie que Babel n'a pas pu transpiler le code ES6+ correctement. Assurez-vous d'avoir les bonnes dépendances.

{
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7"
  }
}

Correction :

npm install @babel/plugin-transform-runtime @babel/preset-env --save-dev

Pour aller plus loin

1. Ajout de tests unitaires

Utilisez Jest et React Testing Library pour ajouter des tests à votre application.

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Fichier de test (src/components/TodoList.test.js) :

import React from 'react';
import { render, screen } from '@testing-library/react';
import TodoList from './TodoList';

test('renders learn react link', () => {
  render(<TodoList />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

2. Optimisation des performances

Utilisez React DevTools pour identifier les composants qui nécessitent des optimisations.

3. Sécurité et authentification

Ajoutez une couche de sécurité en utilisant Auth0 ou Firebase pour l'authentification.

Défi pratique

Défi : Créez une application React qui permet aux utilisateurs de créer, lire, mettre à jour et supprimer des articles (CRUD). Utilisez React Router pour gérer les routes et ajoutez un petit formulaire d’ajout d’articles.