Construction de Production
Jusqu'à présent, les applications frontend et backend sont compilées et servies par deux serveurs de développement différents. L'étape suivante consiste à les regrouper en un seul serveur prêt pour la production.
Construction de l'Application React
Dans le répertoire de votre frontend, exécutez la commande suivante :
npm run build
Cette commande construit l'application React pour la production et enregistre les fichiers dans le répertoire build
.
Ouvrez-le et copiez tout son contenu dans le répertoire public
de votre application Foal.
Lorsque vous utilisez
foal connect
avec Angular ou Vue, le frontend build enregistrera automatiquement les fichiers danspublic
.
Maintenant, si vous naviguez vers http://localhost:3001, vous verrez l'application frontend servie par le serveur dorsal.
Prévention des erreurs 404
Ouvrez le lien http://localhost:3001/login dans un nouvel onglet. Le serveur renvoie une erreur 404.
C'est tout à fait normal. Pour le moment, le serveur n'a pas de gestionnaire pour la route /login
et renvoie donc cette erreur. Auparavant, ce problème était géré par le serveur de développement React, c'est pourquoi cette erreur n'existait pas.
Pour résoudre ce problème, vous allez ajouter une méthode de contrôleur qui traitera les requêtes non traitées.
Ouvrez app.controller.ts
et mettez à jour son contenu.
import { Context, controller, Get, HttpResponseNotFound, IAppController, render } from '@foal/core';
import { ApiController, OpenapiController } from './controllers';
export class AppController implements IAppController {
subControllers = [
controller('/api', ApiController),
controller('/swagger', OpenapiController)
];
@Get('*')
renderApp(ctx: Context) {
if (!ctx.request.accepts('html')) {
return new HttpResponseNotFound();
}
return render('./public/index.html');
}
}
Cette méthode renvoie l'application React pour toute requête GET qui accepte du contenu HTML et qui n'a pas été traitée par les autres méthodes du contrôleur et de ses sous-contrôleurs.
Si vous retournez à http://localhost:3001/login et rafraîchissez la page, la page de connexion devrait s'afficher.
Construction de l'Application Foal
Maintenant, si vous voulez construire l'application backend sans utiliser l'option npm run dev
, vous pouvez exécuter cette commande :
npm run build
Ensuite, pour lancer l'application, il suffit d'exécuter ce qui suit :
npm run start