Help with domain and server/client url
I have the domain coolthing.nl now when i add this custom domain using fly.io what does the server and client url change to?
Right now it is:
https://coolthing-server.fly.dev
and
https://coolthing-client.fly.dev
But for my other programs and apps that interact with the server i need to know what the server url becomes when changing the domain to coolthing.com
42 Replies
Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To set up a custom domain for your Wasp app deployed on Fly.io, you'll need to follow a few steps. When you add the custom domain
b. Or you can set up a subdomain for your server, like:
coolthing.nl, your server and client URLs will change. Here's what you need to know:
1. First, you'll need to add your custom domain to your Fly.io app using the Wasp CLI command:
2. After adding the custom domain, your client URL will change to:
<https://coolthing.nl>
3. For the server URL, you have two options:
a. You can keep using the current server URL: <https://coolthing-server.fly.dev>
b. Or you can set up a subdomain for your server, like:
<https://api.coolthing.nl>
4. After setting up the custom domain, you need to update the WASP_WEB_CLIENT_URL environment variable for your server app:
5. If you decide to use a subdomain for your server (option b), you'll also need to update the WASP_SERVER_URL environment variable:
For your other programs and apps that interact with the server, you should use whichever server URL you decide on (either <https://coolthing-server.fly.dev> or <https://api.coolthing.nl> if you set up a subdomain).
Remember to update your DNS records as instructed by Fly.io when you add the custom domain Using a Custom Domain For Your App (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app).
Also, make sure to update the REACT_APP_API_URL environment variable when building your client to point to the correct server URL Client configuration object (https://wasp-lang.dev/docs/advanced/accessing-app-config#client-configuration-object).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sven, 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?how could i set subdomain api. and what will serverurl be then?
should yes
and add the records for the subdomain and the certificate again
https://api.coolthing.nl/
So what env variables do i change when chaning client url and server url
Wohooo @Sven, you just became a Waspeteer level 13!
exactly
Hi @Sven, it's the two variables in the response that @NEROX screenshotted (thanks for the help btw, appreaciate it): https://discord.com/channels/686873244791210014/1310922235976093737/1310953664961314876
Btw, @NEROX, one pro tip for helping on Discord. I've found that sending links to messages is better than sending screenshots because people can then see the context and also copy paste stuff
cool
If you still need help, ping me 🙂
Yeah i cant seem to get it to work since. Maybe because it takes some time.. Do i also need to set the
REACT_APP_API_URL? Or was that just for the case of that specific user?
I’m setting up DNS for my project and ran the following commands to configure and verify my domain using Fly:
---
Commands I Ran
1. Generated certificates for example.com:
wasp deploy fly cmd --context client certs create example.com
Output instructed me to:
- Add an A record pointing to xxx.
- Add an AAAA record pointing to xxx.
2. Set up the web client URL:
wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=https://example.com
3. Tried creating a certificate for www.example.com:
wasp deploy fly cmd --context client certs create www.example.com
Output instructed me to:
- Add a CNAME record pointing www to webapp-client-placeholder.fly.dev.
- however docs said to do it towards example.com
4. Tried creating a certificate for api.example.com:
wasp deploy fly cmd --context server certs create api.example.com
Output instructed me to:
- Add a CNAME record pointing api to webapp-server-placeholder.fly.dev.
- no docs on this so not sure what to fill in here..
---
What I Configured in Namecheap
I filled in the following records into Namecheap:
1. A Record:
- Host: @
- Value: XXX
- TTL: Automatic
2. AAAA Record:
- Host: @
- Value: XXX
- TTL: Automatic
3. CNAME Record for api:
- Host: api
- Value: example.com
- TTL: Automatic
4. CNAME Record for www:
- Host: www
- Value: example.com
- TTL: Automatic
---
Issues
1. Verification Fails:
- In fly the A and AAAA records are not verified.
- The domain (example.com) and subdomains (www.example.com and api.example.com) don’t load.
2. Uncertainty About CNAMEs:
- Should www.example.com point to webapp-client-placeholder.fly.dev instead of example.com?
- Should api.example.com point to webapp-server-placeholder.fly.dev instead of example.com?
---
Could you help identify what’s wrong with my setup or suggest the correct configuration?
@Filip i needed to ping
-----------------
and now how could i make sure when users search for my site the ydont end up on the fly.io domain thing, i want only my domain to be available
Okay so the subdomain www and main domain example.com ✅ works now
However my client side still makes requests to the webapp-server-placeholder.fly.dev endpoint. I use this deploy command:
and this command to set secrets:
@kapa.aiLet me check the knowledge base for you again. One moment! :books:
----------------------
Based on the information you've provided, it seems that you're encountering an issue with your client-side requests still being directed to the old server endpoint, despite setting up a custom domain. Let's address this step by step:
1. Your deploy command looks correct, as you're setting the
REACT_APP_API_URL to <https://api.example.com.> This should theoretically update the client-side configuration to use the new API URL.
2. Setting the WASP_SERVER_URL secret for the server context is also correct.
However, there are a few things to consider and check:
1. Make sure you're rebuilding the client after setting the new REACT_APP_API_URL. The client-side environment variables are embedded at build time, not runtime Accessing the configuration (https://wasp-lang.dev/docs/advanced/accessing-app-config#client-configuration-object).
2. Verify that the REACT_APP_API_URL is actually being picked up during the build process. You can check this by logging config.apiUrl in your client-side code:
3. Ensure that you've also set the WASP_WEB_CLIENT_URL for the server. This is crucial for CORS configuration Deploying Manually (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables):
4. Double-check that your client-side code is using the config.apiUrl for API requests, rather than hardcoded URLs.
5. Clear your browser cache and do a hard refresh to ensure you're not seeing cached content.
If you've done all of the above and are still experiencing issues, it's possible there might be a bug in how Wasp is handling the environment variables during the build process. In this case, you might want to:
1. Try building the client manually after wasp build:
2. If the issue persists, it would be worth reporting this as a potential bug to the Wasp team, as there have been similar issues in the past Github Issue (https://github.com/wasp-lang/wasp/issues/1271).
Remember, changes to environment variables require a rebuild and redeploy of your application to take effect. If you're still facing issues after trying these steps, it might be helpful to reach out to the Wasp community or open an issue on their GitHub repository for more specific assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sven, 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?and now how could i make sure when users search for my site the ydont end up on the fly.io domain thing, i want only my domain to be available
@kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
To ensure users only access your site through your custom domain and not the Fly.io domain, you can take the following steps:
1. Set up URL redirects:
You can configure your Fly.io app to redirect all traffic from the
*.fly.dev domain to your custom domain. This can be done by adding a redirect rule to your fly.toml file. Here's an example of how you might do this:
This configuration will redirect all traffic from your Fly.io domain to your custom domain.
2. Update your CORS settings:
Make sure your server's CORS settings only allow requests from your custom domain. You can do this by setting the WASP_WEB_CLIENT_URL environment variable to your custom domain Deploying Manually (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables):
3. Update your client configuration:
Ensure that your client-side code is always using your custom domain for API requests. This can be done by setting the REACT_APP_API_URL environment variable during deployment Using a Custom Domain For Your App (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app):
4. Remove public access to Fly.io domains:
While not directly supported by Fly.io, you can effectively achieve this by setting up a firewall rule in your fly.toml file that blocks all traffic except from your custom domain. However, this approach should be used cautiously as it might interfere with Fly.io's health checks.
By implementing these measures, you can significantly reduce the likelihood of users accessing your site through the Fly.io domain. However, keep in mind that it's not always possible to completely prevent access to the Fly.io domain, as it's used for various internal purposes by the Fly.io platform.
Remember to test thoroughly after making these changes to ensure your application still functions correctly.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sven, 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?hmmm any help from team start here.
@kapa.ai How can I know the WASP_SERVER_URL from my fly server? Which url should be? Can give an example?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To answer your question about the
WASP_SERVER_URL for your Fly.io server, let's break it down:
The WASP_SERVER_URL should be the URL where your Wasp server is running on Fly.io. Typically, this URL follows a specific pattern:
For example, if your Fly.io app is named "my-wasp-app", your WASP_SERVER_URL would be:
You can find or set this URL in a few ways:
1. Check your Fly.io dashboard: Log into your Fly.io account and look at the details of your deployed app.
2. Use the Fly.io CLI: Run flyctl info in your terminal to get information about your app, including its URL.
3. If you've set up a custom domain, use that instead. For example:
Once you know the correct URL, you can set it as an environment variable for your Fly.io app using the following command:
Or, if you're using the Wasp CLI for deployment:
Remember, this URL is crucial for proper configuration, especially for features like OAuth authentication Deploying Manually (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables).
Make sure to also set the WASP_WEB_CLIENT_URL to your client's URL for proper CORS configuration.
If you're unsure about your specific Fly.io app's URL, I recommend checking your Fly.io dashboard or using the Fly.io CLI to confirm the correct URL before setting it as the WASP_SERVER_URL.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, 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?just can't get serverside domain get to work. Client keeps pointing to fly domain, when i think i set the api.example.com domain correct (verified in fly too) and go to that it doesnt show "hello world" which my server noramlly should do for fly domain
also i want to know how to redirect visitors that access fly domain to my own domain on client side
————-
Tldr:
1.
everything works fine, client custom domain works. What i want for the client side now is that it redirects app.fly.dev to my Custom domain. I dont want users to use the tool on fly domain.
2.
The server url has also changed to my new domain: api.custom.com, (i see “hello world” when i navigate to the ep. however i cant seem to get my client point to this endpoint. It still tries the fly.dev endpoint eventhough i run:
REACT_APP_API_URL=https://api.custom.com wasp deploy fly deploy
But when i run this i notice in the logs that it does:
See how REACT_APP_API_URL is set to the default fly.dev one eventhough i pass it through terminal?Hey @Sven, this looks very familiar. I think this was a bug we fixed a while ago.
Which version of Wasp are you using?
14 or smth
Yeah like 14 not sure now
Not athome
That should be new enough
@miho Do you maybe remember this problem? I can't find the mention of it anywhere but I've sure we've seen it before
It's enough to only read the message I'm replying too. You can skip everything else.
@Sven please run
wasp version so we know for sure which version are you running.
See: https://github.com/wasp-lang/wasp/pull/2234 We fixed this with 0.15.0GitHub
Override serverUrl in wasp deploy fly deploy command by Case-E · Pu...
Description
Fixes #2233
Select what type of change this PR introduces:
Just code/docs improvement (no functional change).
Bug fix (non-breaking change which fixes an issue).
New feature (non-br...
Yeah, that's it. Thanks @miho!
Ok, @Sven, so you should update to 0.15 and everything should work fine 🙂
Here's the migration guide: https://wasp-lang.dev/docs/migration-guides/migrate-from-0-14-to-0-15
0.14.1
Yeah, update it to 0.15.0 and it will get fixed 😄
yes in the middle of doing this, i get this when i try to start db:
never did a migration tbhb haha
@kapa.ai
yes in the middle of doing this, i get this when i try to start db:
Let me check the knowledge base for you again. One moment! :books:
----------------------
It appears you're encountering a version mismatch between the Wasp version you have installed and the version required by your project. This is a common issue when working with different Wasp projects or when a project has been updated to use a newer version of Wasp.
To resolve this, you need to update your Wasp installation to version 0.15.0 or higher. Here's how you can do that:
1. Use the installer script to install the latest version of Wasp:
This will install the latest stable version of Wasp, which should be 0.15.0 or higher.
2. If you want to install a specific version (for example, 0.15.0), you can use:
3. After installation, verify your Wasp version by running:
This should show the newly installed version CLI Reference (https://wasp-lang.dev/docs/general/cli#miscellaneous-commands).
4. Once you've updated Wasp, try running your command again.
If you're working on multiple Wasp projects that require different versions, you might want to consider using a version manager for Wasp. However, as of my knowledge cutoff, Wasp doesn't have an official version manager like
nvm for Node.js.
Remember to check the Wasp releases page (https://github.com/wasp-lang/wasp/releases) for the latest versions and any breaking changes or migration steps that might be necessary when upgrading.
If you continue to face issues after updating, please let me know, and I'll be happy to help further.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sven, 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?found it out myself i guess:
✅ Solved:
Migrating 0.14.0 -> 0.15.0 fixed the issue. follow migration guide but dont forget to :
npm install [email protected] as this is not mentioned in the migration guide.
Would you know how i could redirect users fron my fly.dev url to my custom domain?
and also on my www. subdomain i get cors error
@Filip any tipssHey @Sven, so:
- You shouldn't be redirecting users to the fly domain, it should be handled by the DNS. Check the docs here: https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app
Going thrugh those steps will also take care of the CORS for you as well. There shouldn't be any need for CORS middleware with the basic setup.
No i mean everything works, the thing is that the fly.dev domain still exists and dont want users to be able to go there
So i want to redirect them to my custom domain
Ooh, in that case
Look into Fly's settings
They definitely have a way to "turn off" the fly domain
hahah the thing is they dont
really bad
This is actually not correct. It should be working without you having
react-router-dom in your package.json (it says that in the instructions):
@Sven Can you pls confirm Wasp works if you remove that?
Lemme check
@Filip tips for this?
Sorry, was out for a couple of days
I think your best bet is to redirect them from javascript
@kapa.ai Give me a javascript
<script /> snippet that redirects the user upon landing on a page if the domain matches fly.devLet me check the knowledge base for you again. One moment! :books:
----------------------
Here's a JavaScript snippet that you can use to redirect users if they land on a page with a domain that matches "fly.dev":
This script does the following:
1. It checks if the current hostname (domain) ends with 'fly.dev'.
2. If it does, it redirects the user to your custom domain, preserving the current path.
To use this snippet:
1. Replace
'<https://your-custom-domain.com'> with your actual custom domain.
2. Place this script in the <head> section of your HTML file, or in your main JavaScript file if you're using a single-page application.
Remember that while this client-side redirect can be helpful, it's not a foolproof solution. For better security and SEO, it's recommended to also implement server-side redirects as discussed earlier Using a Custom Domain For Your App (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app).
Also, keep in mind that this script will run on every page load, so it might slightly impact the initial load time of your application. For a more robust solution, consider implementing the redirects at the server level or using Fly.io's configuration options to handle redirects.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Filip, 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?@Sven This sounds right. You can try it out in the dev console before including it in your app. Once you're happy, add the script to the
head field in the app declaration (in the Wasp file).
First try it out on localhost, then change the domain to fly and that should workAhh thanks alot! What would be best file to place this? Or on each route?
add the script to the head field in the app declaration (in the Wasp file).This
Customizing the App | Wasp
Each Wasp project can have only one app type declaration. It is used to configure your app and its components.