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.
In your frontend directory, run the following command:
This command builds the React application for production and saves the files in the
Open it and copy all its contents to the
public directory of your Foal application.
When you use
foal connectwith Angular or Vue, the frontend build will automatically save the files in
Now, if you navigate to http://localhost:3001, you will see the frontend application served by the backend server.
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.
app.controller.ts and update its contents.
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.
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:
Then, to launch the application, simply execute the following: