foal connect angular ../frontendfoal connect react ../frontendfoal connect vue ../frontend
Angular, React and Vue all provide powerful CLIs for creating frontend applications. These tools are widely used, regularly improved and extensively documented. That's why Foal CLI do not provide ready-made features to build the frontend in their place.
Instead, FoalTS offers a convenient command, named
connect, to configure your frontend CLI so that it interacts smoothly with your Foal application. This way, you do not have to worry about the details of the configuration when starting a new project. You can leave this until later if you need it.
mkdir my-appcd my-appfoal createapp backendng new frontendcd backendfoal connect angular ../frontend
mkdir my-appcd my-appfoal createapp backendnpx create-react-app frontend --template typescriptcd backendfoal connect react ../frontend
mkdir my-appcd my-appfoal createapp backendvue create frontendcd backendfoal connect vue ../frontend
When building a web application with a Angular / React / Vue, it is very common in development to have two servers serving on different ports. For example, with an application written in Foal and Angular, the backend server serves the port
3001 and the frontend one servers the
Consequently requests made by the frontend do not reach the backend as they have a different origin. One hacky solution is to replace the URL path to
http://localhost:3001 in development and to enable CORS requests.
This technique has some drawbacks however:
It may introduce a different codebase between the environments (dev and prod).
And it disables a browser protection (the
One way to get around this, keeping the policy and the same codebase, is to configure a proxy to redirect
4200 requests to the port
connect command does it for you.
connect command also modifies the build output path of your front so that its bundles are saved in the
public/ directory. This way, you can run the frontend and the backend build commands and directly ship the application to production.