- Introduction
- Obtaining an Office 365 Free Trial Account
- Creating a SharePoint Developer Site
- Debugging and Publishing the HTML App in SharePoint
- Conclusions
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Debugging and Publishing the HTML App in SharePoint
The next step is enabling an application to be hosted on SharePoint 2013 online, a very easy task:
- In Solution Explorer, double-click Properties. When the designer is ready, click the SharePoint tab. A new button called Enable SharePoint will appear, as shown in Figure 3.
- Click the Enable SharePoint button and specify the developer site for debugging. In the Site URL box, enter the address of your developer site (see Figure 4), and then click Validate.
- After you click Validate, Visual Studio LightSwitch asks you to enter credentials to access your Office 365 account. Notice that you have to enter administrator credentials (see Figure 5), so that LightSwitch can upload the app package for debugging.
)
Figure 3 Enabling SharePoint publishing for a LightSwitch HTML app.
)
Figure 4 Specifying the URL for the developer site.
)
Figure 5 Entering and validating Office 365 credentials.
The next phase in this process deals with security. SharePoint online uses its own authentication mechanism based on the Office 365 accounts, so Access Control is disabled in LightSwitch, as you can see by opening the Access Control tab (see Figure 6). You can't make any changes in these settings.
)
Figure 6 LightSwitch Access Control is disabled.
With this simple sequence of steps, you've enabled your LightSwitch HTML app to run on SharePoint 2013 and Office 365. Before you publish the app to production, however, you need to debug and test it.
Debugging the App
At debugging time, the application will use SharePoint online only for authentication; it will run locally. For this reason, the first time you debug an application for SharePoint, Visual Studio needs to install a certificate for Internet Information Services (IIS) Express, the lightweight edition of IIS that LightSwitch uses for debugging. This action is required because SharePoint apps use Secure Sockets Layer (SSL) connections, and the https://localhost address must be trusted on the development machine.
To debug a LightSwitch HTML app for SharePoint, simply press F5. Visual Studio shows a dialog box containing information for the certificate, as shown in Figure 7.
)
Figure 7 Summary information about the localhost certificate.
The dialog shows summary information for the certificate and you need to trust it, so click Yes. Visual Studio will ask for your confirmation before installing the certificate (see Figure 8). Simply click Yes at this point.
)
Figure 8 Installation confirmation for the localhost certificate.
Visual Studio LightSwitch will package the application and upload it to the local IIS server. When the application is ready, your web browser will open with an instance of the debugger attached. The first time (and only the first time) you debug the application, the SharePoint developer site will ask you to trust or reject the application, as demonstrated in Figure 9.
)
Figure 9 Trusting a new app for SharePoint.
After you trust the app, it will run in your web browser. Figure 10 provides an example.
)
Figure 10 The sample application running on SharePoint 2013 and Office 365.
As I described in Part 2 of this series, you can still use debugging tools such as the DOM Explorer tool window to inspect the HTML/JavaScript code, as well as well-known tools such as breakpoints and data tips. Notice that SharePoint adds a chrome bar (the blue bar) at the top of the application's main page. This bar allows for easy navigation back to the hosting site. To manage apps that are currently in testing, access the developer site via your Office 365 account, select Site Contents, and click the ellipsis (...) near the name of your application. You'll have an opportunity to see details and permissions, and to remove the app, as shown in Figure 11.
)
Figure 11 Managing apps in testing.
In summary, at debugging time:
- The app has been hosted on your local instance of IIS Express.
- The app uses the SharePoint developer site to provide authentication.
- The LocalDB feature of SQL Server has been used for the intrinsic database.
Of course, the situation changes when you want to publish your application to production; your app and data must be moved to SharePoint online. The next section describes this technique.
Publishing Your LightSwitch App in SharePoint
Publishing your LightSwitch HTML app to SharePoint online is not a difficult task, but it involves some manual steps:
- Change the solution configuration from Debug to Release in the Visual Studio toolbar.
- Select Build > Publish.
- The LightSwitch Publish Application Wizard asks you to specify how the application will be hosted (see Figure 12):
- Autohosted. Select this option when publishing to Office 365. In fact, Office 365 uses Windows Azure automatically to host your application on the cloud, and it uses SQL Azure to host the application database. This is a very convenient option, because it doesn't require any manual configuration.
- Provider-hosted. This option requires you to have your own service to host a SharePoint installation on either a web server or a cloud service. It also requires you to enter all the necessary information to configure deployment. This feature is beyond the scope of the article, so I won't discuss it here.
- Click Next to review a summary of the deployment options, and then click Publish. LightSwitch generates an application package whose name is YourProjectName.SharePoint.App; for this example, the package is named OrdersManagement.SharePoint.App. The app package won't be uploaded to your SharePoint site, so this is done manually. Packages are available under the Publish subfolder in the project folder. This folder contains a number of subfolders, one for each version of the package, with the version number auto-incremented every time you publish the package.
- The finished package must be uploaded to your SharePoint developer site. In your developer site, remove the application you used for debugging, as described earlier. Then select the radio button "New app to deploy," located under the Apps in Testing group (refer to Figure 11). In the Deploy App dialog, click the Upload hyperlink. In the Upload App dialog, specify the application package's file name; you can click Browse to locate the file on your system (see Figure 13).
- After specifying the package, click OK and wait for the upload to be completed. In the next dialog (see Figure 14), verify that the developer site's address is correct, click Deploy, and wait for a new SharePoint sub-site for the application to be created.
- Previously SharePoint asked you to trust the application for testing. Now you need to trust the app for publication, as shown in Figure 15.
- How long the upload takes to complete depends on the application size and your network connection speed. When the upload is complete, the application is visible in the developer site. Simply click its link to see the live app in your web browser. If you have a mobile device such as a tablet or a smartphone (and a live Internet connection, of course), you can access your Office 365 account and open your LightSwitch HTML app from the SharePoint site to demonstrate how you can work with your business data everywhere.
For this example, select Autohosted.
)
Figure 12 Hosting options for your app on SharePoint.
)
Figure 13 Specifying the application package.
)
Figure 14 Verifying the developer site's address before deployment.
)
Figure 15 Trusting the application for publication.