Deploying MS Teams App to Azure App Service - azure

Question

I have created a simple Teams App using Yeoman Generator and have added a single static tab to my Teams project. I'm trying to deploy this to an Azure App Service. This is the error log from App Service Deployment Center
Failed to load ./.env.
[11:41:54] [Webpack error] multi ./src/app/scripts/client.ts
Module not found: Error: Can't resolve 'D:\home\site\repository/src/app/scripts/client.ts' in 'D:\home\site\repository'
resolve 'D:\home\site\repository/src/app/scripts/client.ts' in 'D:\home\site\repository'
Unhandled rejection [31mError[39m in plugin "[36mwebpack[39m"
using description file: D:\home\site\repository\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: D:\home\site\repository\package.json (relative path: ./src/app/scripts/client.ts)
no extension
Field 'browser' doesn't contain a valid alias configuration
Message:
Webpack errors, see log
D:\home\site\repository\src\app\scripts\client.ts doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\home\site\repository\src\app\scripts\client.ts.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
D:\home\site\repository\src\app\scripts\client.ts.tsx doesn't exist
Unhandled rejection [31mError[39m in plugin "[36mwebpack[39m"
Message:
Webpack errors, see log
.js
Field 'browser' doesn't contain a valid alias configuration
D:\home\site\repository\src\app\scripts\client.ts.js doesn't exist
as directory
D:\home\site\repository\src\app\scripts\client.ts doesn't exist
[D:\home\site\repository\src\app\scripts\client.ts]
[D:\home\site\repository\src\app\scripts\client.ts.ts]
[D:\home\site\repository\src\app\scripts\client.ts.tsx]
[D:\home\site\repository\src\app\scripts\client.ts.js]
# multi ./src/app/scripts/client.ts client[0]
[11:41:55] [Webpack error] multi ./src/app/server.ts
Module not found: Error: Can't resolve 'D:\home\site\repository/src/app/server.ts' in 'D:\home\site\repository'
resolve 'D:\home\site\repository/src/app/server.ts' in 'D:\home\site\repository'
using description file: D:\home\site\repository\package.json (relative path: .)
using description file: D:\home\site\repository\package.json (relative path: ./src/app/server.ts)
no extension
D:\home\site\repository\src\app\server.ts doesn't exist
.ts
D:\home\site\repository\src\app\server.ts.ts doesn't exist
.tsx
D:\home\site\repository\src\app\server.ts.tsx doesn't exist
.js
D:\home\site\repository\src\app\server.ts.js doesn't exist
as directory
D:\home\site\repository\src\app\server.ts doesn't exist
[D:\home\site\repository\src\app\server.ts]
[D:\home\site\repository\src\app\server.ts.ts]
[D:\home\site\repository\src\app\server.ts.tsx]
[D:\home\site\repository\src\app\server.ts.js]
# multi ./src/app/server.ts server[0]
[tslint-plugin] Starting linter in separate process...
[tslint-plugin] Starting linter in separate process...
[tslint-plugin] Linting complete.
[tslint-plugin] Linting complete.
[11:42:02] The following tasks did not complete: build, webpack, webpack:client, webpack:server
[11:42:02] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! emphub#0.0.1 build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the emphub#0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
This is my webpack.config.js file
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
var TSLintPlugin = require('tslint-webpack-plugin');
var path = require('path');
var fs = require('fs');
var argv = require('yargs').argv;
var debug = argv.debug !== undefined;
const lint = argv["linting"];
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
var config = [{
entry: {
server: [
__dirname + '/src/app/server.ts'
],
},
mode: debug ? 'development' : 'production',
output: {
path: __dirname + '/dist',
filename: '[name].js',
devtoolModuleFilenameTemplate: debug ? '[absolute-resource-path]' : '[]'
},
externals: nodeModules,
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {}
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
module: {
rules: [{
test: /\.tsx?$/,
exclude: [/lib/, /dist/],
loader: "ts-loader"
}]
},
plugins: []
},
{
entry: {
client: [
__dirname + '/src/app/scripts/client.ts'
]
},
mode: debug ? 'development' : 'production',
output: {
path: __dirname + '/dist/web/scripts',
filename: '[name].js',
libraryTarget: 'umd',
library: 'emphub',
publicPath: '/scripts/'
},
externals: {},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {}
},
target: 'web',
module: {
rules: [{
test: /\.tsx?$/,
exclude: [/lib/, /dist/],
loader: "ts-loader",
options: {
configFile: "tsconfig-client.json"
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=public/fonts/[name].[ext]'
}
]
},
plugins: [
new Dotenv({
systemvars: true
})
],
performance: {
maxEntrypointSize: 400000,
maxAssetSize: 400000,
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
];
if (lint !== false) {
config[0].plugins.push(new TSLintPlugin({
files: ['./src/app/*.ts']
}));
config[1].plugins.push(new TSLintPlugin({
files: ['./src/app/scripts/**/*.ts', './src/app/scripts/**/*.tsx']
}));
}
module.exports = config;
Could you please let me know what I am doing wrong? I'm pusing the code using git push azure master from my project root directory