angulariisstatic-site-generation

How to Deploy Angular SSG on IIS


I have an angular SSG (Site Static Generation) and I need to deploy on IIS 10 server. For each html generated file, angular created a folder page1.html/index.html where page1 is a folder. So it cannot be provided easily to IIS. It requires some HTTP handler.


Solution

  • You can try to use iis url rewrite, in the root of your Angular SSG build, create or update a web.config file, you need to set up rewrite rules so that requests for /page1.html route to /page1.html/index.html. below ruel you can use as a reference:

    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
          <!-- Redirect all requests for /something.html to /something.html/index.html -->
            <rule name="Static HTML SSG Rewrite" stopProcessing="true">
              <match url="^(.*)\.html$" />
                <conditions>
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" />
                 </conditions>
             <action type="Rewrite" url="{R:1}.html/index.html" />
          </rule>
    
          <!-- Handle default fallback to index.html for Angular routes -->
          <rule name="Angular Routes" stopProcessing="true">
            <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />  
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
             <action type="Rewrite" url="/index.html" />
            </rule>
         </rules>
        </rewrite>
    
        <!-- Optional: Static content compression and caching -->
        <staticContent>
          <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
        </staticContent>
      </system.webServer>
    </configuration>
    

    Besides, If you're serving certain static files, ensure that the appropriate MIME types are configured in IIS. and then copy all the generated files from your Angular SSG build to your IIS site's root folder, restart IIS or recycle the app pool to apply the changes.