Using a custom domain with plant-it

[cbarond]

Hello,

I'm having some issues getting plant-it to work with a Cloudflare tunnel. I'm doing this so that I can access the app from outside my network. When I run it locally, I have no issues. (I have the frontend port configured correctly.

My configuration (using placeholder names):
Cloudflare:

• plants.domain.com -> server-ip:4040
• plantsapi.domain.com/api -> server-ip:8080/api
  frontend.env:
• API_URL=http://plantsapi.domain.com/api

When I launch from plants.domain.com, it can't reach the page.
If I go by IP with the api address set in the .env, I get a network error.

Any guidance would be appreciated.
Thank you!

[MDeLuise]

Hi @cbarond, thanks for opening the issue!
I'm not very familiar with Cloudflare tunneling, but let's try to fix this.

If I understand correctly, you're facing connectivity issues outside your network for both the frontend and backend, is that correct?

It seems odd that you're unable to connect to the frontend, as there shouldn't be any access restrictions. Unlike the backend, which has the ALLOWED_ORIGINS property filter.

As a quick test, could you try accessing the authentication page directly at plants.domain.com/auth? Can you connect to that page or you receive the same error as before?

[MDeLuise]

Thank you so much for your thorough testing and detailed insights into this issue. Your efforts in investigating and logging the problem are truly commendable.

While I'm not entirely certain why your configuration is encountering difficulties on mobile devices, it does seem odds that the backend URL switches between HTTP and HTTPS depending on whether you're accessing it from a desktop or mobile browser. In fact, this inconsistency is quite unusual since the code is the same.

The upcoming version of the project will include an SSL deployment. This enhancement should address any concerns related to mixing HTTP with HTTPS, potentially resolving the issues you've encountered if in the end is linked to this problem.

Do you use the same browser on both your mobile and desktop devices?

[cbarond]

Thank you!

I am using Chrome on both devices. Strangely, the problem seems to have fixed itself. I had a few issues this morning with a Timeout error, but it seems to have resolved itself. The requests are using the correct URLs now. I will do further testing today when I am out of the house. Perhaps the mobile browser just took a while to cache the changes to the configuration?

[MDeLuise]

I'm glad to hear that the setup is now working as expected! It's great that the issue seems to have resolved itself, although the exact cause remains a bit mysterious to me.

If you encounter any further issues or have any questions in the future, please don't hesitate to open a discussion, and thanks again for the deep tests! 😁

[cbarond]

Thank you!

For anyone who may find this discussion:
I believe the main issue was accidentally using HTTP instead of HTTPS for the API_URL. Also, have patience; some changes may take time to propagate.

[econcepcion]

cbarond

Did you finally get to work with Cloudflare?

TIA

[cbarond]

Yes, I did. I believe the reason it wasn't working was that the URL in frontend.env was set as HTTP instead of HTTPS.

[econcepcion]

I was hoping it was something else. I followed your example of adding.

• plantit.domain.com
• plantitapi.domain.com/api

in Cloudflare, but it still can't reach plantplantitapi.domain.com/api.

I can get to plantit.domain.com
but I get this error "Cannot connect to the backend at https://plantit.domain.com/api"

frontend
API_URL=https://plantit.domain.com/api
have tried with SSL_Enabled=true and false

Even tried setting SSL_Enabled=true and false in backend.

I see this in the developer console...

Access to XMLHttpRequest at 'https://plantit.domain.com/api/info/ping' from origin 'http://192.168.1.120:3009' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Going to try and track this down.

Thanks

[cbarond]

What is ALLOWED_ORIGINS set to in backend.env?

[econcepcion]

ALLOWED_ORIGINS=*

[cbarond]

Try changing the API_URL to https://plantitapi.domain.com/api instead of https://plantit.domain.com/api

[econcepcion]

In the browser, I have tried going to

https://plantit.domain.com/auth

But I still get this. "Cannot connect to the backend at https://plantitapi.domain.com/api"

Access to fetch at 'https://plantitapi.domain.com/api/info/ping' from origin 'https://plantit.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

If I try this URL in the browser, https://plantitapi.domain.com/auth , I get a cant find page as expected, as my tunnels are configured like so

192.168.1.120:3009 > https://plantit.domain.com"
192.168.1.120:8089 > https://plantitapi.domain.com/api"

I think I am going to concede here and just use it internally. Maybe this can be addressed in the future.

[cbarond]

Do you still have the tunnel set up? I noticed you left your domain name in, so I tried going to the site. Accessing https://plantitapi.domain.com/api/info/ping resulted in Error 502: Bad Gateway. Unless you removed the URI from the tunnel, this may be part of the issue.

[econcepcion]

Oops. lol. I did point it back to internal ip.

[econcepcion]

Would you do me a favor and edit your comment. Didn’t mean to put my domain out there. Thanks.

I can also put it back so you can see what I am getting.

[cbarond]

I edited my comment.

I'm not sure if you've manually gone to https://plantitapi.domain.com/api/info/ping, but it should be a piece of text that says pong. When I go to it, I get this:

This seems to indicate that Cloudflare can't reach that container.