Wasp•3mo ago

Client Side Routing

I'm using a custom deployment strategy for the server and client following this approach from the wasp documentation. I have various routes defined--/, /my-dashboard...etc. The pages render fine when you go to / and navigate to them via links on the page. However you get 404'd when trying to load https://my-site.com/my-dashboard, since they are SPA routes and there is no my-dashboard.html--i.e. they are not genuine html routes. I'm not sure how to specify that the site is a SPA using client routing.

5 Replies

kapa.ai•3mo ago

Hi @JakeLoew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is related to the way SPAs (Single Page Applications) handle routing. In a SPA, all routes are managed by the client-side JavaScript, which means the server doesn't have a corresponding HTML file for each route. When you try to access a route directly, the server doesn't know about it and returns a 404 error. To solve this, you need to configure your server to always serve the index.html file, regardless of the route. This way, your React application can take over and handle the routing. In Wasp, if you need to serve the client from a subdirectory, you can use the baseDir option in your main.wasp file. This will ensure that the router works correctly and all the assets will be served from the correct directory. Here is an example:

app MyApp {  
 title: "My app",  
 // ...  
 client: {  
 baseDir: "/my-app",  
 }  
}

app MyApp {  
 title: "My app",  
 // ...  
 client: {  
 baseDir: "/my-app",  
 }  
}

This means that if you serve your app from <https://example.com/my-app,> the router will work correctly, and all the assets will be served from <https://example.com/my-app.> If you set the baseDir option, make sure that the WASP_WEB_CLIENT_URL env variable also includes that base directory. For example, if you are serving your app from <https://example.com/my-app,> the WASP_WEB_CLIENT_URL should be also set to <https://example.com/my-app,> and not just <https://example.com> source (https://wasp-lang.dev/docs/project/client-config#base-directory). If you are deploying to a platform that doesn't support SPA routing out of the box, you might need to provide additional configuration. For example, a user reported an issue with deploying to Railway, which doesn't support SPA routing. They solved it by deploying the app inside a Docker container and providing a custom nginx configuration file that redirects all requests to index.html source (https://github.com/wasp-lang/wasp/issues/1232). Please note that Wasp currently only supports top-level routing. For nested routing, you can use React Router or a similar library source (https://discord.com/channels/686873244791210014/1203313045661548604). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @JakeLoew, 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?

miho•3mo ago

Could you give us more details on how are you deploying the app? 😄 where and how The problem you are facing is quite common when deploying SPA apps. You should set up your serving mechanism to serve the index.html for all failed routes e.g. /whatever -> serve index.html so that request can be evaluated by the client side router and show something 🙂

Filip•3mo ago

Hey @JakeLoew, like Miho said, this is a classic problem when deploying a SPA. We should add that gotcha to the docs. Here's an issue that explains that very problem and explains how to fix it: https://github.com/wasp-lang/wasp/issues/1982 I've also added a link to your message to help prioritize it.

JakeLoewOP•3mo ago

We have solved the problem in a similar way to the nginx solution outlined here -- although we are using cloudfront. The solution for us was outside the application layer as well. Thank you for the support!

Filip•3mo ago

Nice, glad to hear it!

Gaming

Programming

Client Side Routing