Office addin (custom functions) deployment to Azure app service - azure-web-app-service

Using "yo office" generated the custom functions add-in project. Implemented all the necessary custom functions and the addin works fine in local environment.
Now facing following deployment issue when deploying to Azure services.
Invalid start-up command "office-addin-debugging start manifest.xml" in package.json. Please use the format "node ".
Missing server.js/app.js files, web.config is not generated
Invalid start-up command "office-addin-debugging start manifest.xml" in package.json. Please use the format "node ".\r\nMissing server.js/app.js files, web.config is not generated\r\nC:\Program Files (x86)\SiteExtensions\Kudu\92.30310.5111\bin\Scripts\starter.cmd "C:\home\site\deployments\tools\deploy.cmd"
Following is the script block in package.json
scripts": {
"build": "webpack -p --mode production --https false",
"build:dev": "webpack --mode development --https false",
"build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
"dev-server": "webpack-dev-server --mode development",
"prod-server": "webpack-dev-server --mode production",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch",
"configure-sso": "office-addin-sso configure manifest.xml"}
Thanks!!

Modified the code base. Used express and webpack for deploying to the servers. Tested in both Azure and AWS. Application is up and running.
By following https://binyamin.medium.com/creating-a-node-express-webpack-app-with-dev-and-prod-builds-a4962ce51334 able to resolve the deployment issues

Related

Heroku NodeJs Stuck in Build in Progress

I created a test-backend with NodeJs and tried to deploy it to Heroku.
I followed the instructions and the command git push heroku master was successful.
The app should have been deployed, but instead it is stuck in "Build in progress", as you see here:
The last lines shown in the build log are:
-----> Build
Running build
> test-backend#1.0.0 build /tmp/build_2dd56f0f
> tsc -w
c2:11:15 AM - Starting compilation in watch mode...
2:11:19 AM - Found 0 errors. Watching for file changes.
It seems that Heroku is running my build script, I don't know why and why is it a problem.
My package.json scripts are as follow:
"scripts": {
"dev": "ts-node-dev src/index.ts",
"lint": "ts-standard",
"build": "tsc -w",
"start": "nodemon build/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
Any idea of what is happening?
I deleted my Build script in package.json and managed to deploy the NodeJs project to Heroku.

How to deploy Angular Universal 9 app to production

We have an angular 9 app that works great when deployed into IIS server.
We have also a branch of this app where another company integrated Universal.
Now we need to understand how to deploy our app with ssr into production. We can do everything on production server so we have no limits in installing software.
Requisite is only that production webserver must remain IIS. This doesn't mean that we can't use node for SSR.
We don't understand what are the exact steps to make a production build and then, which folder, files put in the root of our iis site, and how to run node (if needed) and which file use to have a complete ssr rendered app.
This is the scripts part of package.json:
"scripts": {
"ng": "node --max_old_space_size=8192 node_modules/#angular/cli/bin/ng",
"start": "npm run ng -- serve",
"serve:server": "node ./dist-server/main.js",
"serve:server:debug": "node --inspect ./dist-server/main.js",
"start:server": "npm run build:server && node ./dist-server/main.js",
"start:server:debug": "npm run build:server && node ./dist-server/main.js --inspect",
"build": "npm run ng -- build",
"build:server": "ng run my-app:server:production",
"ssr:watch": "ng run my-app:serve-ssr:production",
"demo:ssr:watch": "ng run universal-demo:serve-ssr:dev",
"build-all": "npm-run-all build-production build:server-app:prod",
"start:express-server": "ts-node -P ./src/tsconfig.server.json ./server.ts",
"prerender": "ts-node -P ./server.tsconfig.json ./prerender.ts",
"prerender:debug": "ts-node -P ./server.tsconfig.json --inspect ./prerender.ts",
"test": "npm run ng -- test",
"lint": "npm run ng -- lint",
"e2e": "npm run ng -- e2e",
"analyze": "webpack-bundle-analyzer dist/stats.json",
"compodoc": "npx compodoc -p src/tsconfig.app.json",
"build:stats": "ng build --stats-json --prod",
"build-preprod": "ng build --configuration preprod --index=/src/index/preprod/index.html",
"build-production": "ng build --configuration production --index=/src/index/production/index.html",
"build-staging": "ng build --configuration staging --index=/src/index/staging/index.html"
}
I know that we need to generate a production build, but here there are too many command and I don't know which one is the correct one for production. Withour SSR I would use "npm run build-production" to have a prod bundle. A dist folder would be created and I would copy its entire content to root folder of my site in IIS.
I tried some of these commands. They generated 2 folders:
dist
dist-server
The second one contains main.js
Now, what I have to copy to server and what is the folder tree from the root of site in IIS and how to install/configure/run with node server?
Here I found also something about configuring iis with node:
Link
Do I need this?
Thanks for your help
I answer myself, this is what I did:
ng build --configuration production --index=/src/index/production/index.html
then
ng run my-app:server:production
I copied generated folders "dist" and "dist-server" into the root of my site
In webserver I set a rule to proxy everything to nodeserver on port 4200 and I started it with:
node dist-server/main.js
It seems to work even if I don't understand why I see rendered html only when I do a ctrl+f5 in view-source and not the first time I access the page

webpack won't set to production. Defaults to development

I'm lost. I've been following a Udemy Webpack 4 tutorial on webpack and I am stuck on having different configs for different modes.
I can build from my production config just fine, but when it comes to running the node server, it's not set to production.
I have my main.js write this:
console.log(`Environment is: ${process.env.NODE_ENV`}
and I have only seen it in show as Development.
Here's my package.json's script to run production: I run npm run build and then npm run prod
"scripts": {
"build:dev": "webpack --config=config/webpack.dev.js",
"build": "webpack --config=config/webpack.prod.js",
"dev": "nodemon --inspect --watch config --watch src/server
src/server/main.js",
"prod": "cross-env NODE_ENV=production node src/server/main.js"
},
It was mentioned that I needed to define NODE_ENV in the webpack prod config in the plugin section. Here is how I have it:
new webpack.DefinePlugin({
'process.env': {
NODE_ENV:'"production"'
}
}),
I've tried it in different ways: 'process.env': {'NODE_ENV': JSON.Stringify("production")} and a couple of other ways and I have had no luck.
Here is my repository to see my complete config: https://github.com/PepperAddict/webpack-express
I would appreciate any help even recommendation on a better way to set this up. Thank you in advance!
Below is mine config using webpack 4
"prod": "webpack -p --mode=production --config webpack.prod.js",
"start": "webpack --mode=development --config webpack.dev.js",
And if you want to set NODE_ENV you can do like this
"prod": "SET NODE_ENV=production& webpack -p --mode=production",
Hope that help

Electron and webpack build with task

I am building an application with:
React 16.4.0
Electron 2.0.2
Webpack 4.11.0
webpack-dev-server 3.1.4
This application uses hot-reload (as far as that is currently working...) for development. Every time I want to start my project I have to start 2 tasks right after eachother and it is getting annoying. There has to be a faster way. Is there any way I can start them with 1 node task and they startup after each other?
I must note that the dev server must be done with compiling before the electron app can be started.
package.json
"main": "main.js",
"scripts": {
"build": "webpack-dev-server --config webpack.dev.js --hot",
"start": "SET NODE_ENV=development&& electron ."
},
I've done something like this on a recent project using concurrently.
$ npm i -SD concurrently
And then in your package.json
"scripts": {
"dev-server": "webpack-dev-server --config webpack.dev.js --hot",
"electron-dev": "SET NODE_ENV=development && electron .",
"start": "concurrently --kill-others --names \"webpack,electron\" \"npm run dev-server\" \"npm run electron-dev\""
},
This does not, unfortunately, wait for the bundle to finish. But I find I can just hit reload (Ctrl/Cmd + R) once in the Electron app after the build finishes and I'm good to go.

Deploying simple nodejs app to Heroku - Procfile not working

I'm trying to deploy my Express server to my Heroku app, but every time I do, I get an error and it crashes.
I setup my Procfile with the following code: web: node /src/server.js
Where server.js is not in the root of the directory. However, when I try to start the server, I get an error in the logs: Error: Cannot find module '/src/server.js'
When I run the app locally, I have to run npm start in order for it to run the server correctly. Here is the relevant "scripts" portion of my package.json file:
"scripts": {
"start": "NODE_ENV=dev nodemon ./src/server.js --exec babel-node",
"prebuild": "rimraf dist",
"build": "babel ./src -d dist --presets es2015,stage-2 --ignore spec.js,node_modules",
"serve": "NODE_ENV=production node dist/server.js",
"start_babel": "babel-node ./server.js --preset=babel-preset-es2015",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint ."
}
Since the Procfile overrides the package.json script commands, why is it having trouble finding my file when I've explicitly set it?
I'm not sure about the leading slash. Does using ./src/server.js help at all?

Resources