What would be the best nx Cypress configuration to end-to-end test a web-app with its own Backend For Frontend and launch them together ?

[Ex4l]

Hello everyone, I started nx a few years ago and I'm loving it.

I'm having a bit of a trouble because I'm trying to figure out what would be the best project configuration to my problem.

At first my team and I had only a frontend static web application in react which called a backend server direclty and made some data treatments directly in the frontend, it was not perfect but it worked.

We had another app called frontent-e2e which purpose was simple, tests and validate complete features using cypress with end-to-end tests.

But, as the application was growing and scaling, we decided that it would be preferable to split the frontend app for three reasons: security, performance, maintainability.

Now, that being said, I have 3 apps in my nx repository:

• frontend (react with vite that ouputs a static app on build)
• frontend-bff (express with node js that outputs a server.js on build)
• frontend-e2e (cypress nx executor actually launching and testing only frontend)

Those 3 apps are really different and I would like to know how can I manage to launch both frontend and frontend-bff when i'm launching my e2e tests ?

frontend needs frontend-bff to run but they are not hosted at the same place and I would like to be able to run them separately without having to dockerize them (As I was doing with only frontend, if possible ?). I need to be able to build them and run them separately, but only for this e2e target I need to launch them side by side.

I tried to add frontend and frontend-bff in the implicitDependencies option of the frontend-bff project but no luck, nothing is happening.

I tried to add frontend and frontend-bff in thedependsOn option of the frontend-bff project e2e target but no luck, it launches my 2 projects but (I think because the backend is not releasing the terminal) the Cypress process is never launched.

I tried like the above to write my configuration to run the 2 frontend and frontend-bff detached as this but then, the cypress process never launches either.

"dependsOn": [
        { "target": "frontend:serve", "params": "{\"detached\": true}" },
        { "target": "frontend-bff:serve", "params": "{\"detached\": true}" }
      ],

Am I going in the wrong direction ? Is there a better way to do this ? Thanks !