web-dev-qa-db-fra.com

React + backend - structure du projet lors du partage de code

J'aime vraiment la structure des dossiers comme on peut le voir ici quand il s'agit d'un frontend React et un certain backend avec express:

root
├── backend
|   ├── node_modules
|   ├── public
|   ├── src
│   │   └── Server.ts
|   ├── package.json
|   └── tsconfig.json
├── frontend (created using create-react-app)
|   ├── node_modules
|   ├── public
|   ├── src
│   │   └── Index.js
|   ├── package.json
|   └── tsconfig.json

Je pense qu'avoir des paquets séparés avec des node_modules est raisonnable puisque le frontend et le backend sont fondamentalement des choses complètement différentes, e. g. ils ont besoin de différents modules de nœuds. De plus, cette approche modulaire me plaît visuellement et le référentiel a l'air bien rangé.

Cependant, je rencontre un problème avec cette structure lorsque je dois partager du contenu entre le frontend et le backend. J'ai ajouté un dossier shared sous la racine du projet qui contient son propre projet avec son propre tsconfig.json, package.json etc. Cette approche est un mélange des approches ici et ici . Pour le backend, cela fonctionne parfaitement: après avoir configuré le tsconfig.json de manière appropriée (en utilisant Références de projet TypeScript et importations avec alias ), je peux référencer le fichier root/shared/src/myFile.ts comme ça:

import { myFunction } from @shared/myFile;

J'ai créé l'interface React en utilisant create-react-app. Ce n'est pas grave pour moi que les importations d'alias ne fonctionnent pas, donc je devrais utiliser (dans le dossier src du frontend):

import { myFunction } from '../../shared/src/myFile';

Malheureusement, ces importations depuis l'extérieur du répertoire srcne sont pas prises en charge par create-react-app et je ne veux pas utiliser eject car je n'ai aucune expérience avec webpack et je ne veux pas gérer tous les fichiers de configuration par moi-même (c'est pourquoi je utilisé create-react-app en premier lieu).

Je sais que je peux déplacer le contenu partagé vers le répertoire src du frontend. Mais cela signifierait que je devais ajouter les balises nécessaires pour utiliser Références de projet dans TypeScript , e. g. définir composite sur true, dans le tsconfig.json qui me semble étrange et ressemble plus à un hack. J'aimerais avoir un projet npm séparé avec mon contenu partagé.

Puisque create-react-app ne supporte pas intrinsèquement les importations depuis l'extérieur du répertoire src, je pensais que je me trompais peut-être. La structure de dossiers que j'utilise actuellement n'est-elle pas un moyen valable de configurer un projet React avec un backend? Quel mécanisme create-react-app permet de lier des fichiers entre le frontend et le backend? Je pourrais aussi penser à avoir un projet racine avec un dossier src et à l'intérieur de celui-ci les deux dossiers backend et frontend. Mais cela signifie que nous en aurions un partagé node_modules dossier à la racine.

C'est mon premier projet avec React et j'aimerais connaître quelques bonnes pratiques pour ce genre de problème d'architecture ). Quelques liens vers des ressources fiables où les structures de projet pour le développement full-stack React développement sont expliquées seraient vraiment utiles. Merci ????

javascriptnode.jsreactjstypescriptcreate-react-app
4
New3D

Je pense qu'il est parfaitement raisonnable de vouloir partager du code entre votre front et votre back-end. C'est l'une des raisons pour lesquelles nous codons en javascript au lieu de Ruby ou PHP.

Vous pouvez accomplir exactement ce que vous voulez en utilisant yarn au lieu des espaces de travail npm et yarn: https://yarnpkg.com/lang/en/docs/workspaces/ . Au niveau supérieur, vous configurez trois modules/packages dans votre package.json (assurez-vous de nommer correctement les espaces de travail dans leurs fichiers package.json respectifs):

"workspaces": {
    "packages": [
        "backend",
        "frontend",
        "shared"
    ]
},

Une fois que vous avez fait, vous pouvez importer du code partagé dans votre application de l'ARC ou votre back-end, simplement comme ceci:

import { myFunction } from 'shared/src/myFile';

Le seul inconvénient est que vous ne pouvez pas importer de composants de réaction du répertoire shared dans frontend tant que vous utilisez l'ARC. Cela ne vous affectera plus maintenant, car vous n'avez qu'une seule application de réaction. Si vous avez besoin de partager des composants de réaction entre plusieurs projets, consultez les suggestions ci-dessus comme bit.dev.

Ce n'est pas le seul moyen, mais c'est l'un des plus simples et des plus directs.

1
Robert Moskal

  1. Avoir des sous-projets séparés pour le frontend et le backend est parfaitement logique en raison de dépendances très différentes. Le mélanger augmente la consommation d'espace disque dans les déploiements de production et va à l'encontre des consignes de sécurité. La structure de vos dossiers est raisonnable (sauf pour public/ sous-dossiers dont je ne suis pas sûr, il me manque peut-être quelque chose).

  2. L'approche import { myFunction } from @shared/myFile; c'est bien. N'utilisez simplement pas l'ARC.

  3. Pour un projet avec un seul frontend et un seul backend, il n'est pas nécessaire d'avoir un shared\ dossier de niveau supérieur car le frontend est la seule source de "vérité de l'interface utilisateur" (par exemple la source des types et des composants liés à l'interface utilisateur) qui est consommée par le frontend et le backend est la seule source de "vérité API" consommée par à la fois frontend et backend. Avec cet arrangement seulement @backend/api_shared_stuff doit être partagé.

  4. Certains liens vers des ressources fiables où les structures de projet pour le développement full-stack React développement sont expliquées seraient vraiment utiles. D'une part, les auteurs de projets doivent généralement expliquer beaucoup de d'autres choses et d'autre part garder la documentation (généralement un README) raisonnablement concise.

1
winwiz1