Custom API endpoints - Port 3000
@kapa.ai - I've got a custom end-point that it supposed to trigger an API key getting regenerated and its not working. My frontend appears to be sending the request to 3000, but the backend is 3001. My current LLM agent wants me to edit the vite config, which sounds mental.
Can you give me some direct about what's going wrong here.
19 Replies
Hi @Gareth_Simpson. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your issue is a common one with Wasp: the frontend (client) runs on port 3000, while the backend (API server) runs on port 3001. If your frontend is sending API requests to port 3000, those requests will never reach your backend—they’ll just hit the frontend dev server, which doesn’t know about your custom API endpoints.
What’s going wrong:
Your frontend is likely configured to send API requests to the wrong port (3000 instead of 3001). This is not something you should fix by editing the Vite config. Instead, you need to make sure your frontend is targeting the correct backend URL (port 3001) for API calls. How to fix it:
- Make sure your frontend code (where you define the API base URL) points to
- Wasp runs the frontend on port 3000 and the backend on port 3001 by default. API requests from the frontend should go to port 3001, not 3000. If you have something else running on 3000, Vite may move to 3001, causing further confusion, so always check which service is running on which port. See discussion, another example. - For deployment or custom setups, you can set the API URL in your client’s environment variables. See docs. Summary:
Don’t edit the Vite config for this. Instead, ensure your frontend is sending API requests to the backend on port 3001. Double-check your environment variables and API base URLs in your frontend code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, 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?
Your frontend is likely configured to send API requests to the wrong port (3000 instead of 3001). This is not something you should fix by editing the Vite config. Instead, you need to make sure your frontend is targeting the correct backend URL (port 3001) for API calls. How to fix it:
- Make sure your frontend code (where you define the API base URL) points to
<http://localhost:3001> for API requests.
- If you’re using environment variables, check that REACT_APP_API_URL (or similar) is set to <http://localhost:3001> in your .env.client file.
- The Vite config is for frontend build and dev server settings, not for routing API requests to the backend.
References:- Wasp runs the frontend on port 3000 and the backend on port 3001 by default. API requests from the frontend should go to port 3001, not 3000. If you have something else running on 3000, Vite may move to 3001, causing further confusion, so always check which service is running on which port. See discussion, another example. - For deployment or custom setups, you can set the API URL in your client’s environment variables. See docs. Summary:
Don’t edit the Vite config for this. Instead, ensure your frontend is sending API requests to the backend on port 3001. Double-check your environment variables and API base URLs in your frontend code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, 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?
@kapa.ai how do I validate if my frontend code points to 3001 for api requests?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To validate if your frontend code points to port 3001 for API requests in a Wasp app, you should check the value of the environment variable
Open your
In your frontend code, API requests should use this variable. For example: This ensures your frontend is using the correct API URL as set by the environment variable. 3. Check runtime value:
You can also add a
- The
REACT_APP_API_URL in your .env.client file. This variable tells your frontend where to send API requests.
Steps:
1. Check .env.client file:Open your
.env.client file and look for the following line:
If it points to <http://localhost:3001,> your frontend is configured correctly to send API requests to the backend on port 3001.
2. Check usage in code:In your frontend code, API requests should use this variable. For example: This ensures your frontend is using the correct API URL as set by the environment variable. 3. Check runtime value:
You can also add a
console.log(config.apiUrl) in your frontend code and check the browser console when you run your app. It should print <http://localhost:3001> if everything is set up correctly.
References:- The
REACT_APP_API_URL environment variable controls the API URL for the frontend. Wasp automatically sets this during development, but you can override it in .env.client for custom setups. See docs
- Example of setting this variable and its importance: GitHub Issue #730
If REACT_APP_API_URL is not set to <http://localhost:3001,> update it and restart your app. This will ensure your frontend sends API requests to the correct backend port.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Gareth_Simpson, 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?@kapa.ai - i only have a .env.client.example file - no .env.client file has been generated - have I missed a step in the installation?
Let me check the knowledge base for you again. One moment! :books:
----------------------
You have not missed a step in the installation—Wasp does not generate a
1. Copy
.env.client file by default. Instead, it provides a .env.client.example file as a template. You are expected to create your own .env.client file (by copying and renaming the example file) and then define your client environment variables there.
From the documentation:
In the root of your Wasp project you can create two distinct files: -See docs What to do:.env.serverfor env vars that will be provided to the server. -.env.clientfor env vars that will be provided to the client. These files should not be committed to version control, and they are already ignored by default in the.gitignorefile that comes with Wasp.
1. Copy
.env.client.example to .env.client in your project root.
2. Add your environment variables (e.g., REACT_APP_API_URL=<http://localhost:3001>) to .env.client.
This is the standard workflow and you have not missed any installation step.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Gareth_Simpson, 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?@kapa.ai - I have done this, however now my login page is returning a 404 error when I try to sign in.
Let me check the knowledge base for you again. One moment! :books:
Wohooo @Gareth_Simpson, you just became a Waspeteer level 2!
----------------------
A 404 error on your login page after setting up
Wasp runs the backend (API server) on port 3001 by default. If the server isn't running, or is running on a different port, the frontend won't be able to reach the login endpoint, resulting in a 404 error. Make sure you have started the server with
See related discussion 2. Verify the value of
It should match the actual URL and port where your backend is running. For local development, it should be: If you are running in a cloud environment (like Gitpod), it should be the public URL of your backend, not
Changes to
Look at the actual request URL for the login endpoint. Is it pointing to the correct server and port? If it’s still pointing to port 3000 or an incorrect URL, double-check your environment variable setup. 5. Check for typos or missing endpoints.
If your backend is running and the URL is correct, but you still get a 404, ensure that the login endpoint exists and is correctly defined in your Wasp app. If you are running in a cloud environment (like Gitpod), make sure you set the correct public URLs in your environment variables, as
See Gitpod-specific advice If after these checks you still get a 404, please provide the exact request URL and any relevant logs for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, 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?
.env.client and REACT_APP_API_URL usually means the frontend is trying to reach an endpoint that doesn't exist or is not accessible at the specified URL.
Here are the most likely causes and steps to troubleshoot:
1. Check that your backend server is running and accessible on port 3001.Wasp runs the backend (API server) on port 3001 by default. If the server isn't running, or is running on a different port, the frontend won't be able to reach the login endpoint, resulting in a 404 error. Make sure you have started the server with
wasp start or the appropriate command for your environment.See related discussion 2. Verify the value of
REACT_APP_API_URL in your .env.client file.It should match the actual URL and port where your backend is running. For local development, it should be: If you are running in a cloud environment (like Gitpod), it should be the public URL of your backend, not
localhost see example.
3. Restart your app after changing environment variables.Changes to
.env.client require you to restart your development server for them to take effect.
4. Check the browser console and network tab.Look at the actual request URL for the login endpoint. Is it pointing to the correct server and port? If it’s still pointing to port 3000 or an incorrect URL, double-check your environment variable setup. 5. Check for typos or missing endpoints.
If your backend is running and the URL is correct, but you still get a 404, ensure that the login endpoint exists and is correctly defined in your Wasp app. If you are running in a cloud environment (like Gitpod), make sure you set the correct public URLs in your environment variables, as
localhost will not work from the browser in that case.See Gitpod-specific advice If after these checks you still get a 404, please provide the exact request URL and any relevant logs for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, 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?
Hey @Gareth_Simpson , could you provide more details about the problem? maybe I can help
So I have setup my env.client and its running on 3001 and I can login fine now. Its just a problem I'm having with this specific custom end point - its part of a API key generation system - I have this one end point for regenerating an API key and its being super problematic. I'm now getting a 404 error on that end point. It is going to port 3000 though, which is promising.
I understand, what did you setup in your
env.client?
Your Wasp app by default should run on 3000 the frontend and 3001 the backend. For this reason it tells you that it does not find that path because the call is being made to the frontend.@nerox - REACT_APP_API_URL=http://localhost:3001 - okay, so my end-point request should go to port 3001 then? I'm confused because in the documentation is says that api requests get proxied to 3001
Yes, try it. Also you can remove that var pointing localhost (you can add it for example in production to set up a custom domain).
https://wasp.sh/docs/project/env-vars#client-general-configuration:~:text=Wasp%20Client%20Env,the%20server%20URL.
Also when you do a
wasp start, you should see in the logs the used ports for each.
Env Variables | Wasp
Environment variables are used to configure projects based on the context in which they run. This allows them to exhibit different behaviors in different environments, such as development, staging, or production.
@kapa.ai I'm trying to run a curl request to custom end point and I'm getting an authentication error - is my curl request formatted corretly:
Gareth@iMac Loist8 % curl -X POST http://localhost:3001/api/api-key/regenerate --cookie "wasp_auth=iasx7po4kyys77r6fkvuuons4nxnu2lbe4glp4a7"
{"error":"Authentication required"}%
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, Wasp uses cookies for authentication, and the session cookie is typically named
Wasp's authentication relies on session cookies, and you can use tools like curl or Postman to call your endpoints, but you must ensure the correct payloads and authentication details are provided. The session cookie must be valid and recognized by the backend, as described in the Discord support thread. If you continue to get authentication errors, double-check the validity of your session cookie and consider inspecting the network requests from your browser (when logged in) to see if any additional headers or cookies are being sent. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, 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?
wasp_auth. However, simply passing the cookie with your curl request may not be sufficient if the session is not valid, expired, or if additional cookies or headers are required for authentication.
From the Discord support thread, it is mentioned that Wasp's authentication is session-based and the backend checks for a valid session cookie. If you are getting {"error":"Authentication required"}, it means the backend does not recognize your session as authenticated, even though you are passing the wasp_auth cookie. This could be due to:
- The session token (wasp_auth) is invalid or expired.
- The session is tied to a specific user-agent or other cookies that are missing.
- The endpoint requires additional headers or CSRF tokens (not explicitly mentioned in the sources, but common in some setups).
How to check if your curl request is correct:
- The format of your curl command is correct for sending a cookie:
- However, if the session is not valid, you will get an authentication error.
What you can try:
- Make sure the wasp_auth value is current and valid. You can obtain it by logging in via the browser and copying the cookie value.
- If your app uses additional cookies for authentication, include them as well.
- If you are using a CSRF protection mechanism, you may need to include a CSRF token in your request (the knowledge sources do not mention this explicitly for Wasp).
Reference:Wasp's authentication relies on session cookies, and you can use tools like curl or Postman to call your endpoints, but you must ensure the correct payloads and authentication details are provided. The session cookie must be valid and recognized by the backend, as described in the Discord support thread. If you continue to get authentication errors, double-check the validity of your session cookie and consider inspecting the network requests from your browser (when logged in) to see if any additional headers or cookies are being sent. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gareth_Simpson, 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?
@kapa.ai - i think the end point is configured to make sure that only authenticed users can access it.
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, if your custom endpoint is configured to require authentication (for example, by setting
auth: true in your api declaration in main.wasp), then only authenticated users will be able to access it. When auth: true is set, Wasp will check for a valid session and provide the context.user object to your endpoint handler. If the user is not authenticated, the request will be denied and you'll receive an authentication error, as you are seeing.
Here’s an example of such an API declaration:
With this configuration, any request to /api/api-key/regenerate must include a valid session (i.e., the user must be logged in), otherwise Wasp will return an authentication error like {"error":"Authentication required"}. This matches the behavior you are experiencing with your curl request API Reference.
If you want to test this endpoint with curl, make sure you are sending a valid, non-expired wasp_auth cookie that corresponds to an authenticated session. If the cookie is invalid or missing, you will get an authentication error.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Gareth_Simpson, 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?Hey @Gareth_Simpson I'm not monitoring this thread, @ tag me if you need human help or when you're done so I can mark as solved