The Latest Time Saving Tips for Your SharePoint Deployment

Corey Roth

Subscribe to Corey Roth: eMailAlertsEmail Alerts
Get Corey Roth: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: Intel XML, XML Magazine

Blog Feed Post

Running an Ionic 2 PWA using Azure Web Sites

You can host an Ionic 2 Progressive Web App (PWA) pretty easily on Azure Web Sites (App Service).  If you aren’t sure where to get started, take your Ionic 2 project and add the browser platform if you haven’t already.

ionic platform add browser

Now, you can test it locally by running against the browser platform.

ionic run browser

Running it on Azure really is just a matter of copying your files to your Azure Web Site via ftp.  You can get the username and address to connect to from your App Service properties.  Connect to it and be sure you change to the /site/wwwroot folder.  This is where the files from your app will go.  To will upload your files from the platform/browser/www/build folder.  Before you copy your files though I recommend you do a production build with the --prod command.  This will make the size of your JS files considerably smaller.

ionic run browser --prod

Now copy your files to the FTP site and go to the corresponding URL in your browser.  Your app should be working there. 

There are a few mime types that you need to configure so that the Ionic fonts and any other files get served by IIS properly.  You do this in by creating a web.config.

<?xml version="1.0"?>
 
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

If you are working with DeepLinker, you may consider using a path-based location strategy instead of the standard hash based.  This effectively removes the hash (#) symbols from all of your URLs.  However, additional configuration will be required.  That’s because IIS hosting your site in Azure will give you a 404 error when you go any of the routes you have defined.  You need to redirect your routes to index.html to work. I have found that the routes in the web.config listed below pretty well.  If you are using query strings you might run into issues with these routes though so you may need to do some additional configuration.

<?xml version="1.0"?>
 
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <rewrite>
      <rules>
        <clear />
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Running your PWA in Azure works a little bit differently, but once you have it configured, it’s a good solution.  If you run into any issues, turn on diagnostic logging in Azure and watch the log streaming to see what is happening.  Be on the lookout for scripts and CSS files returning a copy of index.html instead of what they are supposed to.  You can easily verify this from the developer tools of any browser.

Read the original blog entry...

More Stories By Corey Roth

Corey Roth, a SharePoint Server MVP, is a consultant at Hitachi Consulting specializing in SharePoint and Office 365 for clients in the energy sector. He has more than ten years of experience delivering solutions in the energy, travel, advertising and consumer electronics verticals.

Corey specializes in delivering ECM and search solutions to clients using SharePoint. Corey has always focused on rapid adoption of new Microsoft technologies including Visual Studio 2013, Office 365, and SharePoint.

He is a member of the .NET Mafia (www.dotnetmafia.com) where he blogs about the latest technology and SharePoint. He is dedicated to the community and speaks regularly at user groups and SharePoint Saturdays.