office-js + outlook-web-addins + Webpack + Production
Asked Answered
M

2

6

I am totally new to NodeJS, Webpack and specially to Outlook Addin. So, I created my Outlook Addin using basic tutorials from https://learn.microsoft.com/en-us/outlook/add-ins/addin-tutorial, all went well.

However, when it came to deployment on Production, I struggled a lot. I put all my code up on Production (Ubuntu instance). First tested a simple NodeJS "hello World" app on Port:8080 and it worked just fine. Then I tried to start my Outlook Addin, just like I was doing locally, it started on port 3000, but I needed to run it on 8080 and in the background. So, I used "PM2", and here comes the "WALL".

  • pm2 start src/index.js doesn't work for me, as the inside Office.onReady or any other reference to Office does not work, throws undefined Office error.

I tried pm2 run-script build, (after modifications in package.json and webpack.prod.js files)

  • However, I am still getting the same error when try to run pm2 start dist/app.bundle.js

So, please guide me which file should I reference to when using pm2 start {filename/path}?

Here are some configurations that I am using, webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
        'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.prod.js

 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map'
});
Mentalism answered 14/2, 2019 at 14:3 Comment(4)
I'm working on outlook addon as well, and I must say that working with Microsoft is very frustrating, too much documentation which doesn't help at all. I did reverse engineering and found out that for add on to use SSO it requires node.js express server which is running when you develop addon locally (by running npm start).Cohla
But once I deployed files from dist to S3 bucket which is acting as web server, serving files SSO authentication stopped working.Cohla
I found in code that calling sso.getGraphToken(bootstrapToken) will make GET request to /auth but such path is not served by my addon.Cohla
Further investigation gives me that /auth is actually node.js express route from /node_modules/office-addin-sso and because I'm not running this server my S3 bucket is trying to resolve /auth and returning addon index.html page. Any idea how to solve this problem? Would much appreciate, cause looks like I can't count on any help from microsoftCohla
T
3

Contents of an Add-in

The files that are produced from your project when building should be at least some JavaScript, then perhaps HTML and some CSS, depending on what kind of add-in you're building. The most common is probably building an add-in with a task pane - which is basically a web page. In any case, the built files is not a Node.js web server.

Hosting your Add-in

Making your add-in available inside Outlook or Office requires that you host your files somewhere. It can be done with any web server - a simple python web server, Apache, Node.js HTTP server, or anything similar. It can be done on either localhost or in some other hosting service. The add-in tutorial shows you how to run a Webpack development server to host the files on https://localhost:3000 while you are coding (npm run start).

In your manifest.xml file you'll notice that you specify the address where your files are hosted. In my development setup, for an add-in with a task pane, I've specified that the files are hosted on localhost, like this:

<FormSettings>
  <Form xsi:type="ItemRead">
    <DesktopSettings>
      <SourceLocation DefaultValue="https://localhost:3000/index.html"/>
      <RequestedHeight>250</RequestedHeight>
    </DesktopSettings>
  </Form>
</FormSettings>

Production

However, when running your app in production, the tutorial says that you should do npm run build. Those files that are produced, need to be hosted somewhere. I've hosted my add-in on Amazon S3, which is another way of hosting files.

To simulate it on localhost, follow these steps.

In the same folder as your project (where the dist/ folder is located):

  1. Run npm install http-server -g
  2. Run http-server dist/

Tools

To clarify what the tools are used for:

  • Webpack is what puts your app together, from your source code to a bundled version which can be run in a browser context. Webpack development server can be used to host files on localhost during development
  • Node.js HTTP server can also be used to host files on your localhost
  • pm2 is a process manager for Node.js. You can use it for hosting a Node.js server in production
Tundra answered 21/2, 2019 at 13:26 Comment(8)
Thanks for such a detailed response, however one question still remained unanswered. Which file should I run with my pm2 start [js file name]? after npm run build, I have dist directory with JS files as well as index.html.Mentalism
@Mentalism Added some more under "Production". You don't need pm2 to try this out, unless you really want to use pm2 for something more?Tundra
I tried the http-server dist/ it runs the server properly, however when I try to hit browser for Addin, it seems like the script tag references to other files does not work, "GET /node_modules/office-ui-fabric-js/dist/css/fabric.min.css" Error (404): "Not found" And all the other included not found.Mentalism
And it would be helpful if you point me to the tutorial you are following.Mentalism
If your built code (in dist/) tries to access files from node_modules, then likely you're using imports incorrectly. Building your files with Webpack should ensure that used imports from node_modules are put into the bundled .js or .css. However, it looks like office-ui-fabric-js is not playing well with Webpack or other bundlers. You can try to reference the fabric files using the CDN instead of using them from node_modules. Check out github.com/OfficeDev/office-ui-fabric-jsTundra
I'm not following any tutorial. I just read from learn.microsoft.com/en-us/outlook/add-ins/…Tundra
Let us continue this discussion in chat.Mentalism
I have done this inside a docker and the its up and serving. But inside the dist I could not see anything related to assets folder as required by the manifest.xml. Any help would be appreciatedHekking
D
0

@shahroon and I working on the issue together. We're still not able to get things to work and have now paid for a support with Microsoft. Sadly and very frustratingly Microsoft hasn't even acknowledge our support ticket and it's been 3 days.

Downstream answered 15/3, 2019 at 13:25 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.