office-js + outlook-web-addins + Webpack + Production

Question

I am totally new to NodeJS, Webpack and specially to Outlook Addin. So, I created my Outlook Addin using basic tutorials from https://docs.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'
});

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). — arthurr
But once I deployed files from dist to S3 bucket which is acting as web server, serving files SSO authentication stopped working. — arthurr
I found in code that calling sso.getGraphToken(bootstrapToken) will make GET request to /auth but such path is not served by my addon. — arthurr
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 microsoft — arthurr

maxpaj maxpaj · Accepted Answer · 2019-02-21T13:26:04

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):

Run npm install http-server -g
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