Accessing Azure Static Web app directly to the page URL

Question

Hi, I'm Zekiloni, a full-stack developer & designer. Last night I deployed a static web app https://happy-glacier-06c6e1110.4.azurestaticapps.net/, and when I tried to access some of the pages directly, like https://happy-glacier-06c6e1110.4.azurestaticapps.net/sign-up, it is not possible (I got 404 error), but when I go through the main page (index) navigate to that page it is possible, I'm wondering which settings in Azure I can manage that ?

Answer 1

Hi Zekiloni, It seems like you're experiencing issues with direct access to specific pages on your static web app deployed on Azure Static Web Apps. To resolve the 404 errors when accessing pages directly, you can follow these steps:

Configure Routes in Azure Static Web Apps: Azure Static Web Apps automatically supports route-based navigation for single-page applications (SPAs). However, for static sites with specific routes, you might need to configure additional settings.

Define Routes in Your App: Ensure that your application's client-side routing is set up correctly. If you are using a front-end framework like React or Vue.js, make sure that the routes are defined in your application code.

Create a Routes Object: If your application has a client-side router, create a routes object that maps your routes to the appropriate HTML file. This helps Azure Static Web Apps understand how to serve the correct page for each route.

Example for a routes object in a routes.json file:

{   "routes": [
    {   "route": "/sign-up",
       "serve": "/sign-up.html"     
	},     
// Add other routes as needed   
] 
}

Deploy the Updated Configuration: Once you've configured your routes, redeploy your app to Azure Static Web Apps to apply the changes.

Verify Configuration: After redeployment, check the Azure Static Web Apps portal to ensure that the routes are correctly configured.

Check for Default Document: Ensure that your web app has a default document (like index.html) set up. This document is served when the root of your app is accessed.

Remember to replace "serve": "/sign-up.html" with the actual paths and filenames relevant to your app's structure. If you're still facing issues, it's recommended to check the documentation specific to the front-end framework you're using and the Azure Static Web Apps documentation for further details. I hope this helps! Let me know if this helped you by accepting the answer, it will be helpful for the community.