Cannot run React app as a service | Dagger | Page 1

craggy oyster Jan 17, 2025, 8:16 AM

#

Hey guys!
I'm trying to run a React app as a service, which is meant to bind to a test container (playwright). My code looks like:

reactApp := FrontendContainer.
    WithExposedPort(3000).
    AsService(dagger.ContainerAsServiceOpts{Args: []string{"npm", "run", "start"}})

test := PlaywrightContainer.
    WithServiceBinding("ui", reactApp).
    WithExec([]string{"sh", "-c", "npm run test; echo -n $? > /src/exit_code"}).
    Stdout(ctx)

I can see that the npm run start is executed successful. But the test execution is failing with ERR_CONNECTION_REFUSED:

Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
    Call log:
      - navigating to "http://localhost:3000/", waiting until "load"

I'm using Dagger 0.15.1. Do you know what is the issue here?

Bildschirmfoto_2025-01-17_um_09.14.40.png

craggy oyster Jan 17, 2025, 9:15 AM

#

Found the problem.
I have to switch the base url in the tests to: APP_BASE_URL=http://ui:3000/

#

[SOLVED] Cannot run React app as a service

frosty saddle Jan 17, 2025, 3:27 PM

#

Hi Patrick 👋 Glad to see you!

craggy oyster Jan 17, 2025, 5:58 PM

#

Ok the Connection is working. But found out that the app is showing a white Page.

#

@frosty saddle we have now the First Team who is using Dagger in their project. 🎉

craggy oyster Jan 20, 2025, 8:19 AM

#

Cannot run React app as a service

craggy oyster Jan 20, 2025, 8:34 AM

#

There is an issue.
I see that the connection is no longer refused but all my tests are failing waiting for locator('[name=\'loginfmt\']') to be visible. Every screenshot of a failure shows me nothing.

synergizerUI := FrontendContainer.
    WithExposedPort(3000).
    AsService(dagger.ContainerAsServiceOpts{Args: []string{"npm", "run", "start"}})

return PlaywrightContainer.
    WithServiceBinding("ui", synergizerUI).
    WithExec([]string{"npm", "run", "test"}), nil

https://v3.dagger.cloud/innovation/traces/f1c9b6b43b9482c1cec47e6b45742836

Dagger Cloud

Browse and visualize Dagger traces.

craggy oyster Jan 22, 2025, 1:58 PM

#

@frosty saddle do you have any idea why this is not working or what I am missing?

muted hinge Jan 22, 2025, 2:28 PM

#

craggy oyster <@135620352201064448> do you have any idea why this is not working or what I am ...

Hey Patrick! does the service actually work if only run that and try to access locally?

#

i.e dagger call ui up and try to access it from localhost

craggy oyster Jan 23, 2025, 11:58 AM

#

muted hinge i.e` dagger call ui up` and try to access it from `localhost`

I tried it out and it is working.

func (m *Synergizer) Ui(source *dagger.Directory, token *dagger.Secret) *dagger.Service {
    return dag.Container().
        From("node:18.17-slim").
        WithDirectory("/src", source).
        WithSecretVariable("USER_PASSWORD_BASE64", token).
        WithWorkdir("/src/").
        WithExec([]string{"npm", "install"}).
        WithExposedPort(3000).
        AsService(dagger.ContainerAsServiceOpts{Args: []string{"npm", "start"}})
}

Bildschirmfoto_2025-01-23_um_12.58.17.png

#

dagger call ui --source=. --token=env:USER_PASSWORD_BASE64 up

muted hinge Jan 23, 2025, 12:59 PM

#

craggy oyster I tried it out and it is working. ```go func (m *Synergizer) Ui(source *dagger....

@wet sable since you're doing next start and this is a Reat app, I'm wondering if the react "compilation" process might be affecting this. I can do a quick test with a create-react-app really quick.

#

maybe running npm build && npm serve might be better for this playwright case?

craggy oyster Jan 23, 2025, 1:39 PM

#

I will check that

craggy oyster Jan 23, 2025, 2:06 PM

#

@muted hinge interesting. The command npm serve tells me accept connections from localhost:3000
All tests are failing because of connection refused

Bildschirmfoto_2025-01-23_um_15.06.12.png

craggy oyster Jan 23, 2025, 2:24 PM

#

Ok connection is fixed. Seems that is not able to browse
TimeoutError: locator.waitFor: Timeout 15000ms exceeded.
Call log:
- waiting for locator('[name='loginfmt']') to be visible

frosty saddle Jan 23, 2025, 4:41 PM

#

craggy oyster Ok connection is fixed. Seems that is not able to browse TimeoutError: locator....

does that mean it's still a blank screen? I'm not familiar enough with how playwright works

craggy oyster Jan 23, 2025, 5:53 PM

#

frosty saddle does that mean it's still a blank screen? I'm not familiar enough with how playw...

Yep.
I can extract the Screenshots of the results tomorrow

#

Could it be that the execution is much slower ? I will try to Extend the timeout.

muted hinge Jan 23, 2025, 6:24 PM

#

@craggy oyster any chance you can try running curl against the service and see if you get any output?

muted hinge Jan 23, 2025, 8:58 PM

#

I can try putting together a simple repro but I'm missing the playwright thing. Is that module public Patrick?

craggy oyster Jan 24, 2025, 9:42 AM

#

muted hinge <@960764294851608606> any chance you can try running `curl` against the service ...

So the curl command gives me that back:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Synergizer</title><script defer="defer" src="/static/js/main.d673e6df.js"></script><link href="/static/css/main.6f138c3c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

craggy oyster Jan 24, 2025, 9:44 AM

#

muted hinge I can try putting together a simple repro but I'm missing the playwright thing. ...

Here is my function which is using playwright:

func (m *Synergizer) Get(ctx context.Context, source *dagger.Directory, token *dagger.Secret) (*dagger.File, error) {
    return dag.Container().
        From("mcr.microsoft.com/playwright:v1.45.3-noble").
        WithDirectory("/src", source).
        WithMountedCache("/root/.npm", dag.CacheVolume("node")).
        WithWorkdir("/src/e2e-tests/").
        WithExec([]string{"npm", "install"}).
        WithServiceBinding("ui", m.Ui(source, token)).
        WithExec([]string{"sh", "-c", "npm run test; echo -n $? > /src/exit_code"}).
        File("screenshot.png"), nil
}

#

muted hinge Jan 24, 2025, 1:59 PM

#

hey @craggy oyster ! everything seemed to have worked for me

#

here's my pipeline:

type ViteProject struct{}

func (m *ViteProject) Get(ctx context.Context, source *dagger.Directory) *dagger.Container {
    return dag.Container().
        From("mcr.microsoft.com/playwright:v1.50.0-noble").
        WithDirectory("/src", source).
        WithMountedCache("/root/.npm", dag.CacheVolume("node")).
        WithWorkdir("/src").
        WithExec([]string{"npm", "install"}).
        WithServiceBinding("ui", m.Ui(source)).
        WithExec([]string{"npm", "run", "test"})
}

func (m *ViteProject) Ui(src *dagger.Directory) *dagger.Service {
    return dag.Container().From("node:22-alpine").
        WithMountedDirectory("/src", src).
        WithWorkdir("/src").
        WithExec([]string{"npm", "install"}).
        WithExposedPort(5173).
        AsService(dagger.ContainerAsServiceOpts{Args: []string{"npm", "run", "dev", "--", "--host"}})

}

#

my react application is a vite project that I created with npm create vite@latest

#

I've tried creating the react app via npx create-react-app but seems like cra is broken and the installation never finishes

craggy oyster Jan 26, 2025, 6:00 PM

#

muted hinge hey <@960764294851608606> ! everything seemed to have worked for me

What is the url in your tests?

muted hinge Jan 26, 2025, 6:02 PM

#

craggy oyster What is the url in your tests?

http://ui:5173.

5173 is the port that vite uses

craggy oyster Jan 26, 2025, 6:02 PM

#

Hmm my setup is not working

#

It feels like the App is not running.
I don’t get it at the moment.

muted hinge Jan 26, 2025, 6:13 PM

#

craggy oyster It feels like the App is not running. I don’t get it at the moment.

That's very strange because in your case the curl works and the npm run test also triggers which means that the UI container is at least listening in that port

#

It also works when you start the service via Dagger and connect to it locally

#

Have you tried starting the service with Dagger and then running npm run test in your local machine but setting the URL to the Dagger service?

craggy oyster Jan 27, 2025, 6:32 AM

#

muted hinge Have you tried starting the service with Dagger and then running npm run test in...

Hi,
that is what I am trying next.

#

And it seems that here is the problem.
When I start the test. Playwright navigates to the base url and then a redirect is happening for SSO-Login. This login is not working. The loading is extremely slow.

craggy oyster Jan 27, 2025, 7:44 AM

#

If I run the test in firefox on my local machine setting the URL to the dagger service it is working.
But if I run the test only with dagger it is not working.

#

TimeoutError: locator.waitFor: Timeout 45000ms exceeded.
Call log:
- waiting for locator('[name='loginfmt']') to be visible

#

That is really strange

muted hinge Jan 27, 2025, 12:43 PM

#

craggy oyster If I run the test in firefox on my local machine setting the URL to the dagger s...

I guess the past piece to test would be to run your playwright container via docker run instead of Dagger to see if you get the same behavior as if running it in Dagger (I'd assume you will)

#

you could run that container with --net host so it can still access to your Dagger UI service

craggy oyster Jan 27, 2025, 3:56 PM

#

I think the Server is not ready.
There must be a way to wait until the server is complete ready.

muted hinge Jan 27, 2025, 4:21 PM

#

craggy oyster I think the Server is not ready. There must be a way to wait until the server i...

@craggy oyster how does your npm start look like on your UI app?

#

is that some react command?

craggy oyster Jan 27, 2025, 4:36 PM

#

react Script start

muted hinge Jan 27, 2025, 4:36 PM

#

craggy oyster react Script start

it's funny because I've tried to repro this with create-react-app but it's so borken that I can't even create a new app anymore

craggy oyster Jan 27, 2025, 4:37 PM

#

I think about
npm run build,
and then npm serve build &
and then I have to wait until it is ready to accept Connections…

craggy oyster Jan 27, 2025, 4:38 PM

#

muted hinge it's funny because I've tried to repro this with `create-react-app` but it's so ...

Ah that is so a Mess. We are using only this stuff. Company guidelines

muted hinge Jan 27, 2025, 4:38 PM

#

and then I have to wait until it is ready to accept Connections…

dagger checks for this automatically with the WithExposedPort

#

dagger probes the port and will only continue when the port is listening

muted hinge Jan 27, 2025, 4:39 PM

#

craggy oyster Ah that is so a Mess. We are using only this stuff. Company guidelines

yeah.. the official react docs send you to a framework now. Vite / Next / Vue / Nuxt, etc

craggy oyster Jan 27, 2025, 6:18 PM

#

Ok let me try that in one function tomorrow.

craggy oyster Jan 28, 2025, 8:43 AM

#

ha it is also not running. To be honest, I don't get it.

craggy oyster Jan 28, 2025, 12:33 PM

#

Ok the service seems to be up and running

Bildschirmfoto_2025-01-28_um_13.32.35.png

muted hinge Jan 28, 2025, 12:46 PM

#

craggy oyster Ok the service seems to be up and running

ok.. playwright still complains?

craggy oyster Jan 28, 2025, 12:46 PM

#

muted hinge ok.. playwright still complains?

Yes actually.

muted hinge Jan 28, 2025, 12:47 PM

#

😠 .. ok. Let me quickly download a CRA example app and try it myself

craggy oyster Jan 28, 2025, 12:51 PM

#

I changed my code to this:

func (m *Synergizer) Services(ctx context.Context, source *dagger.Directory, token *dagger.Secret) (string, error) {
    srvFrontend := dag.Container().
        From("node:18.17-slim").
        WithDirectory("/src", source).
        WithSecretVariable("USER_PASSWORD_BASE64", token).
        WithWorkdir("/src").
        WithExposedPort(3000).
        AsService(dagger.ContainerAsServiceOpts{Args: []string{"npm", "--prefix", "synergizer-ui", "run", "serve"}})

    srvFrontend, err := srvFrontend.Start(ctx)
    if err != nil {
        return "", err
    }

    defer srvFrontend.Stop(ctx)

    return dag.Container().
        From("mcr.microsoft.com/playwright:v1.45.3-noble").
        WithDirectory("/src", source).
        WithWorkdir("/src/e2e-tests").
        WithExec([]string{"npm", "install"}).
        WithServiceBinding("ui", srvFrontend).
        WithExec([]string{"sh", "-c", "npm run test; echo -n $? > /src/exit_code"}).
        Stdout(ctx)
}

#

So starting my frontend and expose it to the host, no problem.
Test is running...

#

In my PW Config i have as baseURL http://localhost:3000/

Bildschirmfoto_2025-01-28_um_14.04.01.png

craggy oyster Jan 28, 2025, 1:23 PM

#

Ok, I wiill check if the redirect url is configured right in ms entra

craggy oyster Jan 28, 2025, 1:54 PM

#

localhost:3000 should work.

craggy oyster Jan 29, 2025, 7:35 AM

#

Could it be that the frontend is Not able to browse the web?

muted hinge Jan 29, 2025, 1:53 PM

#

@craggy oyster how would you manage this when running playwright in your complete pipeline

#

?

#

specially if you're planning run this in CI 🤔

#

because in that case localhost:3000 is not accessible

#

e2e tests like these IMO they usually bypass the auth flow and use some sort of impersonarion system to run.

craggy oyster Jan 31, 2025, 6:09 AM

#

Normally our Gitlab Runner can access the internet. I will try that.

muted hinge Jan 31, 2025, 1:04 PM

#

craggy oyster Normally our Gitlab Runner can access the internet. I will try that.

yes but. How do you manage the callback from the auth flow to work in Dagger?

craggy oyster Jan 31, 2025, 1:04 PM

#

good point1

muted hinge Jan 31, 2025, 1:04 PM

#

since the react app is running within Dagger and it's not exposing any port locally, there's no way for the auth callback to reach that server

#

that's why generally for CI integration tests, auth flows usually get stubbed or something

craggy oyster Feb 3, 2025, 7:29 PM

#

I will Share my complete gitlab Pipeline tomorrow.
I refactored it to unblock my team.

craggy oyster Feb 4, 2025, 8:31 AM

#

Hey 👋 @muted hinge & @frosty saddle,
as I promised I will share my actual refactored pipeline where the sso login is working.
This is my .gitlab.yml file:

include:
  - /common-rules.yml
  - /synergizer-ui/ci/pipeline.yml
  - /e2e-tests/ci/pipeline.yml

stages:
  - lint
  - test
  - run-e2e-tests

This is pipeline.yml file for the ui:

lint:
  rules:
    - !reference [.is_merge_request, rules]
  tags:
    - dind
  image: node:18.17-slim
  script:
    - cd synergizer-ui
    - npm install
    - npm run lint

test:
  rules:
    - !reference [.is_merge_request, rules]
  tags:
    - dind
  image: node:18.17-slim
  script:
    - cd synergizer-ui
    - npm install
    - npm run test

And finally this is my pipeline.yml file for the e2e-tests:

e2e-tests:
  rules:
    - !reference [.is_merge_request, rules]
  tags:
    - dind
  stage: run-e2e-tests
  image: mcr.microsoft.com/playwright:v1.45.3-noble
  needs:
    - lint
  before_script:
    - ./e2e-tests/ci/prepare-e2e-tests.sh
    - ./e2e-tests/ci/setup_local_environment.sh
  script:
    - echo 'Start running e2e-tests'
    - echo "Running e2e-tests in docker environment"
    - ./e2e-tests/ci/run-e2e-tests.sh
  variables:
    APP_BASE_URL: http://localhost:3000
  artifacts:
    when: always
    reports:
      junit: ./e2e-tests/results.xml
    paths:
      - ./e2e-tests/setup.log
      - ./e2e-tests/screenplay-report.txt
      - ./e2e-tests/screenplay-report/
      - ./synergizer-ui.log
      - ./e2e-tests/test-results/
      - ./e2e-tests/playwright-report/
  cache:
    key:
      files:
        - e2e-tests/package-lock.json
    paths:
      - e2e-tests/node_modules/

📎 run-e2e-tests.sh 📎 prepare-e2e-tests.sh 📎 setup_local_environment.sh

#

Bildschirmfoto_2025-02-04_um_09.33.41.png

muted hinge Feb 4, 2025, 1:13 PM

#

@craggy oyster so IIUC you removed Dagger to unblock your team?

craggy oyster Feb 4, 2025, 1:17 PM

#

At the moment yes.
We committed us to use dagger in our project but I dont want to be blocking part.
If we find a solution to run this with dagger it would be great.

craggy oyster Feb 4, 2025, 1:18 PM

#

muted hinge <@960764294851608606> so IIUC you removed Dagger to unblock your team?

We still have the code available so we can move back to dagger if we have a solution

muted hinge Feb 4, 2025, 1:55 PM

#

now that I've checked the code I have a high degree of certainty about what the issue might be. Your SSO login app redirects the user to localhost:3000 probably to continue the authentication process. The thing is that when you're running this in Dagger localhost:3000 is no such thing. @craggy oyster

#

@craggy oyster do you have the permissions to configure your SSO app by any chance?

craggy oyster Feb 4, 2025, 2:02 PM

#

muted hinge now that I've checked the code I have a high degree of certainty about what the ...

Yes I have the permission to configure it.
The thing is it must be then a https: connection because only localhost is allowed with http:

muted hinge Feb 4, 2025, 2:21 PM

#

craggy oyster Yes I have the permission to configure it. The thing is it must be then a https...

oh, dang. If you could set it as http://web:3000 that'd work, but I understand the constrains

craggy oyster Feb 4, 2025, 2:50 PM

#

It tells me as expected the url must be with https or http://localhost:xxxx

Bildschirmfoto_2025-02-04_um_15.50.01.png

craggy oyster Feb 4, 2025, 2:50 PM

#

muted hinge oh, dang. If you could set it as http://web:3000 that'd work, but I understand t...

So http://web:3000 will not work

#

This would be ok.

muted hinge Feb 4, 2025, 3:57 PM

#

@craggy oyster curious if setting something like http://localhost-dagger:3000 would work

#

since the message says "it should start with" http://localhost

craggy oyster Feb 4, 2025, 4:04 PM

#

muted hinge <@960764294851608606> curious if setting something like `http://localhost-dagge...

I will try that

craggy oyster Feb 4, 2025, 5:15 PM

#

What can we do if this is not possible?

frosty saddle Feb 4, 2025, 5:18 PM

#

In cases like that I've bound the service to "localhost". It works in the cases I've run into but feels like something that should be avoided unless necessary

muted hinge Feb 4, 2025, 7:40 PM

#

frosty saddle In cases like that I've bound the service to `"localhost"`. It works in the case...

I've tried that and didn't seem to work for me kyle since localhost gets appended at the end of /etc/hosts which doesn't seem to have any effect 😬

#

mostly the reason I suggested trying the localhost-dagger approach 🙏

frosty saddle Feb 4, 2025, 7:42 PM

#

hm did that change? I've 100% used that in the past successfully

muted hinge Feb 4, 2025, 7:42 PM

#

frosty saddle hm did that change? I've 100% used that in the past successfully

not sure.. could have changed I guess..

frosty saddle Feb 4, 2025, 7:56 PM

#

muted hinge not sure.. could have changed I guess..

It's working in the goreleaser test pipeline currently https://github.com/goreleaser/goreleaser/blob/main/dagger/test.go#L77
(they have a lot of hardcoded DOCKER_HOST=localhost in the tests)

muted hinge Feb 4, 2025, 8:33 PM

#

frosty saddle It's working in the goreleaser test pipeline currently https://github.com/gorele...

weird.. I'm getting this locally
wondering if the ipv6 thing might be related somehow 🤔

#

here's the code:

// Returns a container that echoes whatever string argument is provided
func (m *Lala) Test() *dagger.Container {
    return dag.Container().From("alpine").
        WithServiceBinding("localhost", dag.Container().From("nginx").WithExposedPort(80).AsService()).
        WithExec([]string{"ping", "localhost"})

}

frosty saddle Feb 4, 2025, 8:53 PM

#

hm yeah i'm not sure

craggy oyster Feb 4, 2025, 9:29 PM

#

frosty saddle It's working in the goreleaser test pipeline currently https://github.com/gorele...

Could it be that I have to set this as an Environment variable?

muted hinge Feb 5, 2025, 7:34 PM

#

@craggy oyster just wondering if thelocalhost-dagger think worked 🤞

craggy oyster Feb 5, 2025, 8:12 PM

#

muted hinge <@960764294851608606> just wondering if the`localhost-dagger` think worked 🤞

I did not try it.

#

Give me a second

#

It is not possible to define localhost-dagger. It is not allowed…

#

We have to find another way.

muted hinge Feb 5, 2025, 8:19 PM

#

craggy oyster It is not possible to define localhost-dagger. It is not allowed…

😭

muted hinge Feb 11, 2025, 3:31 AM

#

muted hinge Feb 11, 2025, 2:42 PM

#

@craggy oyster haven't forgotten about you 🙏

craggy oyster Feb 12, 2025, 4:36 PM

#

And ideas how we can solve the issue?

craggy oyster Feb 18, 2025, 2:07 PM

#

@muted hinge & @frosty saddle
I tried again this time with localhost

func (m *Synergizer) Ui(source *dagger.Directory, token *dagger.Secret) *dagger.Service {
    return dag.Container().
        From("node:18.17-slim").
        WithDirectory("/src", source).
        WithSecretVariable("USER_PASSWORD_BASE64", token).
        WithWorkdir("/src/synergizer-ui/").
        WithExec([]string{"npm", "install"}).
        WithExec([]string{"npm", "run", "build:app"}).
        WithExposedPort(3000).
        AsService(dagger.ContainerAsServiceOpts{Args: []string{"npm", "run", "serve"}})
}

func (m *Synergizer) Get(ctx context.Context, source *dagger.Directory, token *dagger.Secret) (string, error) {
    return dag.Container().
        From("mcr.microsoft.com/playwright:v1.45.3-noble").
        WithDirectory("/src", source).
        WithMountedCache("/root/.npm", dag.CacheVolume("node")).
        WithWorkdir("/src/e2e-tests/").
        WithExec([]string{"npm", "install"}).
        WithServiceBinding("localhost", m.Ui(source, token)).
        WithExec([]string{"sh", "-c", "npm run test; echo -n $? > /src/exit_code"}).
        Stdout(ctx)
}

In my test I try to navigate:

Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/                                                                                                                                        
    Call log:                                                                                                                                                                                                        - navigating to "http://localhost:3000/", waiting until "load"

#

In the serve command I see the output: expecting connection at http://localhost:3000

#Cannot run React app as a service