App tries to access localhost:3000 instead of set url in .env

[Fauzdar1]

Hi Guys,

For a quick demo hosting, I've deployed the code on Firebase hosting and although, the server doesn't work on it when built with the app using command build:prod but I can access the app on this URL.

But, the issue is even after changing the server url in the .env file, created from .env.sample as told in the docs and rebuilding the whole app again and again using command npm run build:prod or yarn build:prod or even just build, it still tries to access localhost:3000 for the server. The server URL is not getting updated. I'll manage the server, I just want this url to be changed.

I managed to check the hosted app by running the server locally and the app managed to access the server but the API url must change as per the .env file.

Env file

# set true if running inside Docker container
IS_DOCKER=false

# set true if running as a Demo
DEMO=false

ALLOW_SUPER_ADMIN_ROLE=true

# set to Gauzy API base URL
API_BASE_URL=https://gauzy-e2382.web.app:3000

# set to Gauzy UI base URL
CLIENT_BASE_URL=https://gauzy-e2382.web.app:4200

What am I missing?

[Fauzdar1]

Hey guys, so after investing a day in trying to up the APIs manually in Windows, Firebase Hosting, Heroku and Ubuntu, I managed to run the APIs on an ubuntu server using docker-compose and respectively updated the API_BASE_URL in the .env file, rebuild it by running build:gauzy directly using PHPStorm and deployed it on Firebase hosting (URL provided above) but it still tries to access the API on localhost.

I can access the APIs using the server's IP address plus :3000/api and it results in {"status":200,"message":"Gauzy API"} indicating that the server is running fine.

Can anybody please help me fix the issue?

[evereq]

Hey @Fauzdar1 I checked the URL you provided and the frontend hosted on https://gauzy-e2382.web.app tries to access API sending requests to http://161.97.136.241:3000/api. That is a problem because by default browsers' security policy restricts such communications. It's best to host UI on some subdomain like say https://app.mygauzy.com and host API on https://api.mygauzy.com - in this case, because it's subdomains on the SAME domain (mygauzy.com) it all will work well.

In addition, make sure both are hosted with HTTPS etc. If you deploy it to something like Heroku or Firebase, you most probably need to configure DNS for your domain, e.g. with CNAME from app.mygauzy.com to what hosting provider gives you (e.g. gauzy-e2382.web.app) and do the same for API, etc.

All in all, it's not really easy/time-consuming to configure an app with both UI and API hosted as I described above, but it's really a "must" for any production deployment. There are many way to do it, all depends on hosting provider you selected, etc. Some configure a reverse proxy (e.g. nginx), some not, some issue SSL certificates one way, others another way, some allow custom domains, some not etc.

[Fauzdar1]

Hey @Fauzdar1 I checked the URL you provided and the frontend hosted on https://gauzy-e2382.web.app tries to access API sending requests to http://161.97.136.241:3000/api. That is a problem because by default browsers' security policy restricts such communications. It's best to host UI on some subdomain like say https://app.mygauzy.com and host API on https://api.mygauzy.com - in this case, because it's subdomains on the SAME domain (mygauzy.com) it all will work well.

In addition, make sure both are hosted with HTTPS etc. If you deploy it to something like Heroku or Firebase, you most probably need to configure DNS for your domain, e.g. with CNAME from app.mygauzy.com to what hosting provider gives you (e.g. gauzy-e2382.web.app) and do the same for API, etc.

All in all, it's not really easy/time-consuming to configure an app with both UI and API hosted as I described above, but it's really a "must" for any production deployment. There are many way to do it, all depends on hosting provider you selected, etc. Some configure a reverse proxy (e.g. nginx), some not, some issue SSL certificates one way, others another way, some allow custom domains, some not etc.

Yes, actually the recent rebuild I had deployed, before making my comment 7 hours ago, fixed the API URL issue, I just didn't check it enough by refreshing the page and I thought it wasn't fixed.

But, for some reason, it still don't work, might be because of the browser restriction as mentioned by you. For now, I've connected both App and API server to subdomains on same domain, it will take 24 hours as told for the domain connection to start working, I hope the APIs will work then. And yes, both will be HTTPS by then, I would've already done it but I was just checking it first.

Thanks for the help, I'll update.

[Fauzdar1]

Hey @evereq , I've implemented both as sub-domains on a domain but the api can't work on HTTPS, I can access the ubuntu default page with https (as I've implemented Zero SSL in the ubuntu, although the domain already had Cloudflare SSL) but it still says this site doesn't provide a secure connection whenever I try to access the https url of the api [https://erpapi.unlockvelocity.in:3000/api, works with http whenever server is on]. Is their any specific settings that I'm missing?

Also, searching more on this, I noticed that the NestJS in Gauzy's code wasn't configured with https options as mentioned here, Can this be the reason?

[evereq]

@Fauzdar1 Normally, you don't need to configure HTTPS inside NestJS because you can use proxy which support SSL, for example with Cloudflare if you enable Cloudflare Proxy, it will terminate SSL in the Cloudflare, while your server may get HTTP requests (as long as you allow in cloudflare that mode, when Cloudflare connects to your backend servers with HTTP).

So it can be something like this: Customer <- HTTPS -> Cloudflare Proxy <- HTTP -> Your server

Probably another way is to use Cloudflare load balancer, think it also can provide you with SSL.

And of course, if you want to configure NestJS with SSL, it should also be possible according to the article you find with minimum changes inside https://github.com/ever-co/ever-gauzy/blob/develop/packages/core/src/bootstrap/index.ts

[Fauzdar1]

Hey @evereq, even with the HTTPS config in NextJS initialization, I'm unable to start the API and it exits with code 127, can you please look into this question I've asked on SO for the details and provide a solution if any?