Wasp•4w ago

Custom Backend URL is not getting set for Client

REACT_APP_API_URL issue I'm unable to set a custom backend domain for my webpage. It's a Wasp issue that appears to ignore the REACT_APP_API_URL=https://api.spellfast.ai client-side variable. I've already added CERTs and DNS records for the custom BE URL. When I deploy, I use this command:

REACT_APP_API_URL=https://api.spellfast.ai REACT_APP_STRIPE_CUSTOMER_PORTAL=https://billing.stripe.com/xxxx REACT_APP_GOOGLE_ANALYTICS_ID=G-xxx REACT_APP_EXTENSION_ID=xxxx wasp deploy fly deploy

REACT_APP_API_URL=https://api.spellfast.ai REACT_APP_STRIPE_CUSTOMER_PORTAL=https://billing.stripe.com/xxxx REACT_APP_GOOGLE_ANALYTICS_ID=G-xxx REACT_APP_EXTENSION_ID=xxxx wasp deploy fly deploy

So even if I check api url, it's https://spellfast-server.fly.dev while I need https://api.spellfast.ai

import { config } from 'wasp/client'

console.log(config.apiUrl)

import { config } from 'wasp/client'

console.log(config.apiUrl)

Interestingly, during deployment, I inspected the logs. For some reason, the client is using the fly.io 'https://spellfast-server.fly.dev' domain instead of my custom one, during npm run build

  Server has been deployed! 
🚀  Deploying your client now... 
$ cd /home/regent116/SpellFast/spellfast/app/.wasp/build/web-app
🚀  Building web client for production... 
$ npm install
...

found 0 vulnerabilities
$ REACT_APP_API_URL=https://spellfast-server.fly.dev npm run build <-- // should be https://api.spellfast.ai

  Server has been deployed! 
🚀  Deploying your client now... 
$ cd /home/regent116/SpellFast/spellfast/app/.wasp/build/web-app
🚀  Building web client for production... 
$ npm install
...

found 0 vulnerabilities
$ REACT_APP_API_URL=https://spellfast-server.fly.dev npm run build <-- // should be https://api.spellfast.ai

Frustration is setting in as I try to configure my backend to work with my custom domain, but I can't pinpoint my mistake.

7 Replies

kapa.ai•4w ago

Hi @sion0921. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your detailed question about setting a custom backend URL for your Wasp application. I understand your frustration, and I'll try to explain what's happening and provide some guidance. The issue you're experiencing is related to how environment variables are handled during the deployment process with wasp deploy fly. Let me break down the problem and suggest a solution: 1. Environment Variable Handling: When you use wasp deploy fly deploy, the command you're running is actually setting environment variables for the deployment process itself, not for the client build. This is why you're seeing REACT_APP_API_URL=<https://spellfast-server.fly.dev> in the logs instead of your custom URL. 2. Client-side Environment Variables: For client-side environment variables in Wasp, they need to be set during the build process of the client application. The wasp deploy fly command doesn't automatically pass these variables to the client build step. 3. Solution: To set the custom backend URL for your client, you need to modify the client build process. Here's how you can do it: a. First, deploy your server with the custom domain:

wasp deploy fly deploy

wasp deploy fly deploy

b. Then, set the WASP_WEB_CLIENT_URL for your server to use your custom domain:

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://api.spellfast.ai>

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://api.spellfast.ai>

c. Now, you need to build and deploy the client separately. Go to the .wasp/build/web-app directory and run:

REACT_APP_API_URL=<https://api.spellfast.ai> npm run build

REACT_APP_API_URL=<https://api.spellfast.ai> npm run build

Then deploy this build to your static hosting provider. This approach is described in the Wasp documentation for manual deployment (https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend) and using custom domains with Fly.io (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app). 4. Automation: If you want to automate this process, you could create a shell script that performs these steps sequentially. The Wasp docs provide an example of such a script for deploying the client (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-client). 5. Verification: After deploying, you can verify the API URL using the code you provided:

import { config } from 'wasp/client'
console.log(config.apiUrl)

import { config } from 'wasp/client'
console.log(config.apiUrl)

This should now show your custom domain. Remember, client-side environment variables in React apps (like those starting with REACT_APP_) are embedded during the build process, not at runtime. That's why it's crucial to set them correctly when building the client. I hope this helps clarify the issue and provides a path forward. Let me know if you need any further assistance! Wasp Deployment Docs (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app) Wasp Manual Deployment Docs (https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @sion0921, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

sion0921OP•4w ago

@kapa.ai Why do I need to build and deploy the client separately? I'm using the fly.io host provider and the "wasp deploy fly deploy" command should deploy the client environment variables as well. I can access other client environment variables that I've set, but I can't get it to compile the REACT_APP_API_URL

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. You're right that when using wasp deploy fly deploy, you shouldn't need to build and deploy the client separately. Let's clarify the situation based on the information specific to Wasp and Fly.io deployment. The issue you're experiencing with REACT_APP_API_URL not being set correctly is indeed unexpected behavior when using the Wasp CLI for deployment. According to the Wasp documentation and community discussions, setting client-side environment variables should work with the wasp deploy fly deploy command. Here's what should happen, based on the Wasp documentation: 1. You should be able to set client-side environment variables by prefixing them to the wasp deploy fly deploy command, as you did in your example Wasp Deployment Docs (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app). 2. These variables should be passed to the client build process during deployment. However, there seems to be an inconsistency in how REACT_APP_API_URL is being handled compared to other client-side variables you've set. A community member reported a similar issue, and a Wasp team member confirmed that setting client environment variables should work with wasp deploy fly deploy Discord Discussion (https://discord.com/channels/686873244791210014/1220070515276775516). They mentioned:

As you said, we never documented how to set up client env vars yourself when using `wasp deploy fly deploy`, and I have to admit I am not 100% sure how would that go, I think you should be able to do `REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy`, but I am not sure if we tested that

As you said, we never documented how to set up client env vars yourself when using `wasp deploy fly deploy`, and I have to admit I am not 100% sure how would that go, I think you should be able to do `REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy`, but I am not sure if we tested that

Given this information, here are some suggestions: 1. Double-check that you're using the latest version of Wasp, as there might have been updates to address this issue. 2. Try setting the REACT_APP_API_URL without other variables to isolate the problem:

   REACT_APP_API_URL=<https://api.spellfast.ai> wasp deploy fly deploy

   REACT_APP_API_URL=<https://api.spellfast.ai> wasp deploy fly deploy

3. If the issue persists, it might be a bug in Wasp's handling of this specific variable. In this case, I recommend: - Reporting the issue on the Wasp GitHub repository (https://github.com/wasp-lang/wasp/issues). - Reaching out to the Wasp team on their Discord channel for more immediate support. 4. As a temporary workaround, you might need to set the API URL manually in your client code or explore other deployment options that give you more control over the client build process. I apologize that I don't have a more definitive solution. This seems to be an edge case that the Wasp team might need to investigate further. Your feedback could be valuable in improving Wasp's deployment process for future users. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @sion0921, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

sion0921OP•4w ago

Hi sir, @miho. Kapa Ai's suggestions didn't help. Do you have any other ideas?

miho•4w ago

What version of Wasp are you using? 🙂

sion0921OP•4w ago

wasp version
0.14.0 Thank you! Resolved the issue by upgrading to version 0.15.2.

Filip•4w ago

Glad to hear it!

Gaming

Programming

Custom Backend URL is not getting set for Client