Category: VSCode

Let’s say you created the trappings of an add-in with Script Lab and now you want to make it into a stand-alone add-in. You can export your code (just the manifest and html), copy and paste it into an existing project, or upload to GitHub to share it, but you cannot easily convert it into a fully functional Web Add-in project from Script Lab. I took the time to figure this out, so you do not have to.  These steps will show you how to export your solution from Script Lab, import into VSCode, apply a Yeoman Office template and then begin testing it in Office Online with, ah… minimal effort (more or less). 

Here are the steps:

1. 1. 1. First install Script Lab in Excel. You can follow my post for that here: Start Developing in OfficeJS Today with Script Lab
      2. Next, we will load one of the sample. On the Script Lab ribbon, click Code. 
      3. Click the Samples button and then select Basic API Call.
      4. Next, click the Share button (  )and click Export for publishing, this will download a ZIP file in an Internet Explorer download dialog. Click Open. 
      5. If you get a warning open the file, click Allow: 
      6. Select these two files, right-click and then click Copy:
         • basic-api-call.html
         • basic-api-call-manifest.xml.
      7. Leave the ZIP folder and download window open for now.
      8. Next, create a folder on your computer, call it “sample-1” then Paste (press CTRL+V) the two files into the folder. You can now close the ZIP folder you copied from and the download window.
      9. Next, you will need to have VSCode installed and configured for Office development. You can following my post for that here: How to Configure VSCode for Office Development.
      10. Open VSCode and press [CTRL+`] to open the Integrated Terminal.
      11. Change to the “sample-1” folder you created above, using the command: cd c:\\sample-1
      12. Type the following command: yo office sample-1
      13. You will then select the option as detailed below: 
      14. Once completed, on the File menu, click Open Folder. Browse to the sample-1 folder and click Select location.
      15. Delete the following files and folder:
          • app.js
          • app.css
          • index.html
          • rousource.html
          • and the function-file folder
      16. If you want to use Chrome as your debug environment, I would suggest this step which you will click to open the bsconfig.json file and add the following line: “browser”:”chrome” like this:

          	{
          	"browser": "chrome",
          	"ui": {
          	"port": 3000
          	},
          	"server": {
          	"routes": {
          	"/node_modules": "node_modules"
          	}
          	},
          	"https": true,
          	"watch": true,
          	"files": "*.*"
          	}

          view raw script-yo-bsconfig.json hosted with ❤ by GitHub
      17. Click to open the basic-api-call.html file and remove the following Script Lab lines:

          	<!-- ScriptLab-Specific Runtime Helpers -->
          	<script src="https://script-lab.azureedge.net/runtime-helpers.js?hash=aa0d3ff3e68d9a8b0d5d"></script>
          	<script>
          	ScriptLab._strings = {"unexpectedError":"An unexpected error occurred","authenticationWasCancelledByTheUser":"Authentication was cancelled by the user","officeVersionDoesNotSupportAuthentication":"Your current version of Office does not support displaying an authentication dialog. Please update to a newer version, or try Office Online, if you would like to run this snippet."};
          	</script>

          view raw basic-api-call.html hosted with ❤ by GitHub
      18. Save, close, then rename the file to index.html.
      19. Click to open the basic-api-call-manifest.xml and then CTRL+click to open the sample-1–manifest.xml in a side by side window (on the right).
      20. Copy the following lines from the left pane and replace the same lines by pasting them in the right pane:

          	<!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
          	<Id>80434bc0-cc22-48a5-90de-88f3ea35b7ef</Id>
          	<!--Version. Updates from the store only get triggered if there is a version change. -->
          	<Version>1.0.0.0</Version>
          	<ProviderName>Created with Script Lab</ProviderName>
          	<DefaultLocale>en-US</DefaultLocale>
          	<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
          	<DisplayName DefaultValue="Basic API call" />
          	<Description DefaultValue="Executes a basic Excel API call"/>

          view raw manifest.xml hosted with ❤ by GitHub
      21. Save and close all open files. You can now delete the basic-api-call-manifest.xml file.
      22. Your project is now ready. Press [CTRL+`] to open the Integrated Terminal and type: npm start. Make sure it launches on port 3000 or your add-in will not load: 
      23. Your browser will open, if you have a wanting page, click Advanced and then click Proceed to the website. You will not see your index.html.
      24. Open a new tab and browse to https://office365.com and then sign in with your credentials.
      25. From the Office menu, click Excel, then open a new blank workbook.
      26. On the Insert tab, click Office Add-ins.
      27. In the upper right of the dialog, click Upload my add-in. Click Browse and then select the file: c:\<path>\sample-1\sample-1-manifest.xml.
      28. Your adding will now be loaded. On the Home tab, you can click to open the taskpane, click the button and it should highlight the selected cell.

One major caveat is that this is not a preferred way to make a Web Project. This is bare bones and really just to get you going with minimal effort (if you can call ~30 steps minimal effort). The important thing to know is that all your code in going to be embedded in script tags inside the the HTML file and not in a separate JS file (as preferred – a.k.a. Separation of Concerns). So keep that in mind as you perform this work. If eventually your project turns into something much bigger, you will need to do some housekeeping.

So, ~30 steps… It would be nice if there were a way to do this more simply, but for now, this is the best way to do this. I have had a discussion with the product team in charge of Script Lab and they agree with such a feature, so I will update this post if it becomes available at some future point.