Step by Step – My First Experience with “Napa” Office 365 Development Tools

This Tagline for NAPA development tools for SharePoint Online 2013 and Office 365 Preview sums up everything what you really want to know about what NAPA is intended for SharePoint Online development – “If you have an Office 365 account, a browser, and “Napa” you can build apps for Office documents, mail items, and SharePoint”. I am not really sure where I read this but It sums up everything what I learned about Napa tools so far.

First thing first, let me clarify. NAPA development tools are intended for only SharePoint Online Apps development at this moment. If you are planning to perform traditional SharePoint Online development to build SharePoint web parts, SharePoint pages, and extending SharePoint platform, Sandbox Solutions for SharePoint Online environment using Visual Studio 2010 or Visual Studio 2012 are still valid.

Over the last month, we have launched SP2013 readiness at our organization and one of my focus areas of new improvements in SharePoint Online 2013 Preview and new NAPA development tools for SharePoint Online Apps development. Couple of weeks ago, while watching Sunday Night Football game, I decided to fire up Napa tools and see what Microsoft planning to bring for SharePoint App developers in SharePoint Online space.

Here is my first experience with Napa Tools and some of my initial experiments with this promising Online development technology.

Step 1 – Provision Developer Site Collection in Office 365 Preview environment.

  • You can accomplish provisioning developer site for Napa tools two different ways and both requires Office 365 account
  • First Option – Shared Developer Site => Create Site Collection based on Developer Site template in your organization Office 365 preview environment –, This would allow you to create Shared development environment for team based testing and deployment
  • Second Option – Individual Developer Site => Create developer Office 365 environment and Developer Site for individual developers –, This should provision developer specific office 365 environment and site collection (not sure about whether it’s free or not once it goes preview goes RTM but my understanding is it would be free like MSDN licenses)

Step 2 – Install Napa Tools – App on the Developer Site Collection

  • Once you have developer site collection in Office 365 environment, you need to visit SharePoint store and download “Napa” App. “Napa” is a free app for SharePoint. Since “Napa” is web based, one of the major benefits of Napa tools are you don’t need to install anything on your machine to start developing for Office and SharePoint. Just fire up your browser and start coding. As your application matures and you need more advanced tools, you can seamlessly switch to the more powerful, fully featured Visual Studio IDE, and continue developing there.
  • To download Napa App, Login to the SharePoint Store using live id associated with your Organization or Personal account. Please note that this ID doesn’t have to same as your Office 365 account. e.g. I have logged into the SharePoint Store using my Hotmail account
  • Add App – “Napa” Office 365 Development Tools from the office store, “Napa” is basically browser based code editor to build quick and easy apps for Office 2013 and SharePoint 2013. “Napa” itself is a cloud app hosted in Windows Azure and provides lightweight, in-browser experience, an online companion to Visual Studio.

Step 3 – Create your first App

  • Click on “Napa” Office 365 Development Tools App to create App from the Developer Site

  • You have option to create any of four kind of Apps – SharePoint 2013 hosted App or 3 kind of Office 2013 Apps – SharePoint      Hosted App, Mail App, Task Pane App, & Content App

  • Some of the things I have noticed while creating first NAPA App
    • It is important to remember that Napa supports only SharePoint hosted Apps. It means it supports only JavaScript object model, no managed code
    • Napa automatically added jquery files from Microsoft CDN
    • Awesome basic HTML & JavaScript editor – Reading and Writing Code – Syntax colorization, instance highlighting, indenting, bracket matching and completion as you type, and Intellisense for Undefined JavaScript methods
    • Code Navigation – No toolbar but Use Visual Studio Short Cuts e.g. Undo (CTRL+Z), Find (CTRL+F), and Find/Replace (CTRL+H). For the full list of key bindings, hit (CTRL+’) to bring up a page with a list of all of the keyboard shortcuts

    • App Properties – “Napa” allows you to edit your App Manifest and properties visually using a lightweight designer for the most common settings, I have noticed that there is no direct access to App manifest XML and you can change App manifest values declaratively only using project properties window
    • Only Immersive App experience and client web part is available by default, Since we don’t have access to App Manifest XML, I am not sure how we can add App Actions

  • Additional things you can perform with Napa tools
    • Open in Visual Studio

    • Share Project with Others

Step 4 – Deploy and Test Napa App

  • Since SharePoint hosted App has been built using Napa Apps from the SharePoint 2013 Developer Site, you can directly deploy Napa App by running Run button.
  • Click Run button to deploy App to your developer site
    • If the app doesn’t start automatically because, for example, a popup blocker is enabled, choose the app link to launch the app
    • You can test App immersive and App client web part experience.

Step 5 – Managing Napa Apps Projects

  • Napa App keeps list of all the Napa projects
    • You can create New App – SharePoint Hosted App, Mail App, Task Pane App, & Content App
    • For all the Napa projects – You can open in VS, you can delete, or you can rename

  • Project Items
    • You can Add New items or Upload new items
    • Supported Add New Items – JavaScript, style sheet, & SharePoint web page

Additional Considerations

  • How can you package it up from DEV environment and move it to the integration/staging/prod environment?
    • This is the big question and I am yet to find answer for this. I would love to find how to package Napa App and deploy it to another Site Collection in same tenant or different tenant without exporting them to Visual Studio for final packaging.
  • Major Benefits
    • No local SharePoint farm or Visual Studio required for office 365 Apps development or start initial development before moving into visual studio
    • Within few minutes or hours, start developing SharePoint and Office Apps for SharePoint Online
    • Very useful for independent software developer – lone ranger in the organization & no need for hard core visual studio development. All the apps built by Napa are Non-Managed code/declarative code
  •  Major Limitations
    • Napa tools in team based development and version control limitations – As of today, Napa is not integrated with TFS Preview.  Whenever you are ready for source control, you can export Napa App to the Visual Studio and use either TFS Preview or on-premises TFS Server for source control.
  • What’s it future?
    • Very promising – Since it’s app, MS just need to publish newer version of App to add more features, e.g. around Sep 25th, MS has added new feature “Share Projects” to share App code with other Office 365 accounts

Additional Resources – Ted Pattison’s Article is must read.. 🙂

Overall, it’s step in right direction and would love to see where Microsoft takes it from here.

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Step by Step – My First Experience with “Napa” Office 365 Development Tools

  1. brittanycastro says:

    Use an office 365 Designer Site as a growth and examining atmosphere to reduce your installation time and start developing, examining, and implementing your applications for Workplace and SharePoint.

  2. Can NAPA be used to create a WebPart that redirects a page when added? Can NAPA be coded to create new webpart properties? A little help please…

    Many Thanks.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s