problems with manual url call

Question

I have a problem with manually entering urls in my project.

The problem is as follows: once I have called up the main page with my browser and there is data for the page in the cache and cookies, I can call up all routed pages with manual input. However, if I delete my cache and cookies, I can no longer make any manual entries. It always works locally.

We use ionic frontend, spring backend and azure.

I tried to create a web.config file as it says in the angular tutorial. Unfortunately, it didn't work either.

As an example, you could also look at the page.

otel.otel-ihtiyac.com

otel.otel-ihtiyac.com/register

The browser says "404 not found"

I don't know which section of code to post. Please tell me if you need sections of code to help.

Thank you very much for now.

@edit: I discovered something new. And I don't think I have a routing problem, because once I have called up the page and I have data in the cache and cookies, I can enter the url manually without problems. So it works by providing index.html.

Just as I said, if I have never called this up, I get 404 when I enter the url maneull or open it from a mail link.

Answer 1

You need URL rewrite rules to return index.html for all requests since you are hosting an SPA.

Something like mentioned in this answer. Here's the same for reference

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA">
                    <match url=".*" />
                    <action type="Rewrite" url="index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Also, if you just hosting this one SPA on app service, you should consider hosting it on Azure Blob Storage directly via its Static Website feature. With this, you could include a CDN and host your website at scale for a fraction of the cost compared to running it on Azure App Service, especially if its the only app you have in your app service.