Production Build
So far, the front-end and back-end applications are compiled and served by two different development servers. The next step is to build them into a single one ready for production.
Building the React app
In your frontend directory, run the following command:
npm run build
This command builds the React application for production and saves the files in the build
directory.
Open it and copy all its contents to the public
directory of your Foal application.
When you use
foal connect
with Angular or Vue, the frontend build will automatically save the files inpublic
.
Now, if you navigate to http://localhost:3001, you will see the frontend application served by the backend server.
Preventing 404 errors
Open the link http://localhost:3001/login in a new tab. The server returns a 404 error.
This is perfectly normal. At the moment, the server does not have a handler for the /login
route and therefore returns this error. Previously, this problem was handled by the React development server, which is why there was no such error.
To solve this problem, you will add a controller method that will process unhandled requests.
Open app.controller.ts
and update its contents.
import { Context, controller, Get, HttpResponseNotFound, IAppController, render } from '@foal/core';
import { createConnection } from 'typeorm';
import { ApiController, OpenapiController } from './controllers';
export class AppController implements IAppController {
subControllers = [
controller('/api', ApiController),
controller('/swagger', OpenapiController)
];
async init() {
await createConnection();
}
@Get('*')
renderApp(ctx: Context) {
if (!ctx.request.accepts('html')) {
return new HttpResponseNotFound();
}
return render('./public/index.html');
}
}
This method returns the React application for any GET request that accepts HTML content and has not been handled by the other methods of the controller and its subcontrollers.
If you return to http://localhost:3001/login and refresh the page, the login page should display.
Building the Foal app
Now, if you want to build the backend application so that you don't use the npm run develop
option, you can run this command:
npm run build
Then, to launch the application, simply execute the following:
npm run start