EDIT: Apparently, I misunderstood how Office Add-ins worked. Please see my comment below for how I was able to figure things out.
I was able to get an Excel office add-in working this weekend. The add-in was created with yeoman generator. I'm testing this add-in in both Excel desktop (PC) and Excel online.
The add-in currently runs in the following structure:
The add-in contents are uploaded to Github pages
The manifest.xml has been updated to replace localhost:3000 with the
github page site.
The manifest.xml has been uploaded to the Integrated Apps page in
Microsoft 365 Admin Center for my developer account.
In order to get the add-in up and running I had to do a few things:
I had to move the files in the taskpane directory (/src/takepane/)
into the root directory.
I had to use a <script> tag in the takespane.html file and execute the javascript code there.
If I don't move the taskpane.html file to the root directory, I get a 404 error when I try to load the add-in in Excel Online or Excel desktop once it's been uploaded to Github Pages.
I've tried multiple attempts to reference taskpane.js to get the add-in to reference code in that file. I've tried creating a <script> tag referencing this file from takepane.html. And I've looked into changing values in the webpack.config.js and the manifest.xml files. All of my attempts have been unsuccessful.
I was wondering if anyone knew of why I was experiencing these issues. Or could point me in the right direction of what I should be doing. I appreciate any advice. And I'm happy to provide any code requested.
You need to update the yeoman generator which can be used to scaffold a new add-in project. The newly generated add-in uses Webpack as a bundler. In that case it doesn't matter where your files are located.
After lots of trial and error I figured things out. It turns out I was confused about how Office Add-ins worked. Instead of uploading the add-in project, I was supposed to upload the distribution of the add-in project. That may be obvious to traditional developers / web developers. But I'm an Excel developer so it's not obvious to me. There's lots of material talking about how to create and run a local add-in. But not many talking about how to upload and distribute such an add-in. So this is what I had to do to make things work:
Make your changes to takepane.js in the /src/takepane directory in the Office add-in project.
Update the urlProd constant in the webpack.config.js with the URL where the files will be uploaded (I used Github Pages for this)
Once you've made and have saved that update, run npm run build in the directory for the Office Add-in. This will create the dist directory in your Office add-in folder.
Upload the files from the dist directory to the URL you previously assigned to the urlProd constant.
Upload the manifest.prod.xml file from the dist directory (or provide the URL to this file) to the Microsoft 365 admin center.
The route I listed above can be tricky. Using the Azure guide is easier imo. You can look into using that guide here
After some delay, the add-in will display. For me the add-in is working in Excel Online. But I'm getting certificate issues with Excel desktop. So I'll be looking into that next.
Related
Having some problems here with a web application that was checked into a code repository.
Basically, this application in particular will not display any images, .js, or .css which are all located in the Content & Script folders. Only the raw HTML shows while running. This occurs specifically after doing a fresh pull from our code repository and running locally through Visual Studio. When you inspect the files in the console when its running, all the files are completely empty. The console is also giving a ERROR 500 error file not found (IIRC) The files are definitely in the project locally and they are showing in the Solution Explorer.
I am the only one who actively works on development for this application and I don't run into these problems with my machine. When you pull from the code repository on another computer, the problems start. However, no other applications with an extremely similar architecture have this problem after pulling fresh for the repository. I tried creating brand new web applications with exact same settings and files on the computers affected and they loaded perfectly.
The link to the file looks normal too, it matches with the production server which works.
The application is using bundles and most of the bundles look like this:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/bootstrap-datepicker.min.js",
"~/Scripts/bootstrap-timepicker.js",
"~/Scripts/bootstrap-confirmation.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-select.min.js"));`
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/bootstrap-timepicker.css",
"~/Content/bootstrap-sortable.css",
"~/Content/site.css",
"~/Content/bootstrap-select.min.css"));
Things I have tried:
Adding the .js and .css files in _Layout.cshtml page manually instead
of with bundle.
Replacing all the normal files with .min.js or .min.css and vice
versa
Changing authentication methods for access
Changing permissions on Content Folder
Recreating virtual directory
Using Visual Studio 2017 and 2019
I am stumped, anyone have any suggestions or recommendations? I can answer any questions that arise.
You'll need to commit/push .csproj file as well, this file has link to all your files in the project.
I have an ASP.NET MVC 5 project with a bunch of TypeScript files. I use Gulp to minify and bundle them, but I also upload the generated JavaScript files to some environments to make it easier to debug.
I publish to Azure from Visual Studio 2017 using Project > Publish, using the App Service publish target.
For some reason, the generated JavaScript files from newly added TypeScript files are not being uploaded (the generated JavaScript from older TypeScript files continues to be uploaded just fine).
These JavaScript files are not actually included in my project (they're just sitting in the folder, next to their TypeScript parents, where they are generated).
I don't see anywhere within the project file where I'm actually specifying that they should be uploaded. However, if I delete one of the older files from the server using Cloud Explorer and republish, the older JavaScript files are published again, while my new ones are ignored.
What on earth could be causing this?
According to your description, you want to allow your JS files in specify folder would be uploaded to Azure web app, to achieve this, we need to set our .csproj file.
For example, we can do as below that upload all files in "Resource" folder to azure web app when we publish our project:
<Content Include="Resource\*">
<CopyToPublishDirectory>always</CopyToPublishDirectory>
</Content>
I just had this issue and I fixed it by:
Closed Visual Studio project
Removed all but the latest folder in this location:
C:\Program Files (x86)\Microsoft SDKs\TypeScript
Reopened Visual Studio project
In the directory that contained the TypeScript file that would not publish, I added a brand new TypeScript file called Foo.ts with dummy content.
(It prompted me to update my Typescript Plugin to the current version, which I accepted)
I verified that Foo.ts compiled to javascript when the project built.
At that point, publishing my project would now deploy all generated JavaScript files, so I deleted the dummy Foo.ts since it was no longer needed.
I hope this helps someone solve this.
I'm learning Angular 2 - I just finished the official Tour Of Heroes tutorial (https://angular.io/docs/ts/latest/tutorial/) and built my own website with weather just for training.
The whole application from the tutorial was built using NodeJS, which, as I understand it, is used to run javascript files.
But, what if I want to upload my website to a server (one of the free hostings) to see how it looks like on my other devices (mobile, tablet, etc.)?
Without angular, I wouldn't have problems with that - I'd just use FTP client to upload my .html, .css and .js files to the hosting.
But how should I do it with angular2 application? In my project's directory there are folders like: node_modules, typings - they contain a lot of files, and I'm not sure if they are needed. I know that browsers do not support TypeScript (which I'm using), so I should only upload .js files, but how exactly should it be? Which files should I upload?
I tried uploading everything but node_modules and typings folders, but I just got "Loading..." when I tried accessing the website.
I saw this: Hosting Angular 2 app
and there people just said to upload every js file, which I did.
Here's the link to my website: http://myweatherapp.comxa.com
//EDIT
All the above can be represented by this one question: What are the steps to transform local angular2-quick-start-app into a website, which can be uploaded to any web-hosting?
Take a look at Angular-Cli.
They make it so easy to build/bundle Angular 2 apps. They include a ng build and ng build:prod commands to build the angular 2 project into a distribution folder, standalone web app, so you can put it in a tomcat instance or anywhere and not just in a NodeJS environment.
Angular-Cli provides everything one could want when building an Angular 2 app.
Take a look at their Table of Contents. The Build section is probably what you are more interested in
I use Angular-Cli and I absolutely love it.
I am studying Aurelia following the starter kit. In detail, I have selected the option of TypeScript and I complie them in Visual studio 2015. At present, the example applications work well on the local web server, IIS. Now I want to test it on an internet web server where I usually put my static html files and some php and ruby pages. Probably, the server is an apache managed by some IT company.
As I am very new to this field, I just plan to put the top folder of the local file system together with its all sub folders into somewhere in the web file system of the internet server.
Then the question is, will it work normally? I feel other options are too complexed for me to achieve at present. Or is there other simple alternative way?
I read a similar question here, but the anwer instruction is to difficult for me.
This article http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.2.4/doc/article/bundling-your-app-for-deploy teaches how to bundle your app for deployment. In short, it will transform your app in a couple files (usually 1 .html and 2 .js).
To bundle your app, run gulp export. It will create an "export" folder inside the application folder. Then, just copy and paste those files in the server and the app will work normally.
This is not really a programmatically question, but i couldnt find any more suitable stackexchange site for it.
I have recently moved to Azure, where i deploy my backend web applications and API's. I found that it is possible to deploy multiple web services to one Azure Web App, by creating a branch with its own endpoint url, like so.
Normal : www.example.azurewebsites.net
New : www.example.azurewebsites.net/newSite
I found it is easy to deploy my .NET services from Visual studio to the new endpoint, but does anyone know if i can deploy my git repository to this endpoint by any chance?
I am new to azure, so any help will be greatly appreciated.
You just need to customize the deployment procedure a bit. Amit Apple has a good series on this. Customize your deployment script to build your temporary directory with everything you need and then deploy it. Azure will give you the deployment script to customize or you can use the azure-cli to generate one and you can customize it.
http://blog.amitapple.com/post/38417491924/azurewebsitecustomdeploymentpart1
The deployment script will use KuduSync to copy either a repository or temp folder to your wwwroot folder, so it's up to you to build this folder and have it pushed out.
https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script