office-js + outlook-web-addins + Webpack + Production
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’
});
#node-js #webpack