Customizing Azure's npm deployment script - node.js

Azure expects by default a start script with the format of node path/to/js/file.
Neither of those things fit my setup. I have a 'start:production' script which is comprised of a series of commands joined by &&.
For example:
"start:production": "npm run build && serve -s -p 3000 dist && npm run --prefix server start",
"build": "node build/build.js",
How can one customize default Azure scripts? I saw you can somehow download and edit the default configuration scripts.

It looks like you are using Azure Web App which runs on Microsoft IIS. If so, you have no need to config the start script in the package.json file, instead, add a web.config to /wwwroot directory and config the entrance file of your node.js app there. Default web.config used for node.js apps could be found here.
And your app can't listen on port 3000 on Azure Web App, you should use process.env.PORT for handling the named pipe port in Azure Web App, see Listen additional port Microsoft Azure Nodejs.
If you want to execute some build scripts after deploying the node.js app you can either use Custom Deployment Script or add postinstall script into package.json like below:
"scripts": {
"build": "node build/build.js",
"postinstall": "npm run build"
}

Related

How to run node main.js startup command on windows azure app service from post deployment action in azure release pipeline?

I have windows azure app service and azure CI/CD pipeline to automate the deployment of nestjs app.
From CI pipeline I'm only copying package.json, .env and main executable file by webpack on app service.. So in CD pipeline I push these these 3 files on azure app service and run app from post deployment scripts which is working fine like node modules are installed as well but the azure app gives 502.
Can someone confirm that is it the right way to run node main.js in post deployment script in azure release pipeline.
below is my post deployment action script
1- cd /home/site/wwwroot/apps/workflows
2- npm install --only=prod --ignore-scripts
3- node main.js
Instead of keeping node main.js script in Post Deployment Action you can add the script in app service Start command itself in package.json file.
If you want to start your App Service in a startup command, you can follow the below process to achieve
Note: The Post Deployment Action is used to alter the contents of deployment after deployment is successful.
By default, Azure App Service check for start command in package.json file. In your package.json file add your startup script in Scripts portion "start": "node main.js"
{
"name": "node-js",
"version": "0.2.0",
"description": "A sample Node.js app using Express 4",
"main": "index.js",
"scripts": {
// here you can mention your start script
"start": "node main.js"
},
...
Refer MS-DOC for NodeJS to start script.

Why Does My ReactJS App Run Locally But Not In Azure?

I have a ReactJS app that connects to json-server as a fake API.
I have deployed it to Azure using VSCode and the F1 Free Linux tier.
When I run it locally with npm start everything works.
"scripts": {
"start": "npm-run-all --parallel mock web",
"web": "cross-env PORT=8080 react-scripts start",
"mock": "node index.js"
},
The index.js contains the json-server config etc as it is a bit more than json-server --watch db.json
I am using the package npm-run-all to run json-server and the react app at the same time.
This works fine locally but when I try to deploy it to Azure the container fails to start:
INFO - Starting container for site
INFO - docker run -d -p 7307:8080 --name demo_0_8cd -e WEBSITE_SITE_NAME=demo -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=demo.azurewebsites.net -e WEBSITE_INSTANCE_ID=8fe4512f9f -e HTTP_LOGGING_ENABLED=1 appsvc/node:12-lts_20200918.1
INFO - Initiating warmup request to container demo_0_8cd for site demo
ERROR - Container demo_0_8cd for site demo has exited, failing site start
ERROR - Container demo_0_8cd didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.
INFO - Stopping site demo because it failed during startup.
I can't see much in the container logs to debug this.
I also can't tell what command Azure is using to start since all it says in the logs is docker run.
Is it calling npm start? (see EDIT - tldr: yes)
Why is it working locally but not in Azure?
Why is it not responding to the ping?
Is it something to do with this being a React app instead of "just" a node app?
EDIT:
The docker container that this tutorial generates has scripts in /opt/startup.
The templated one is /opt/startup/init_container.sh and this contains:
STARTUP_COMMAND_PATH="/opt/startup/startup.sh"
STARTUPCOMMAND=$(cat $STARTUP_COMMAND_PATH)
echo "Running $STARTUPCOMMAND"
$STARTUP_COMMAND_PATH
The /opt/startup/startup.sh contains
# Enter the source directory to make sure the script runs where the user expects
cd "/home/site/wwwroot"
npm start
The start script in the package.json for the demo app has "start": "node ./bin/www"
Which then has:
var http = require('http');
var server = http.createServer(app);
server.listen(port);
So the key thing here is that it does npm start to run which then creates a nodejs server to serve the application on port 8080.
The npm start in my application ends up calling react-scripts start, which uses the WebpackDevServer
Whilst you shouldn't use the dev server for production, does that also mean you can't use it on a server for some reason?
This is just a test/demo to familiarise myself with Azure and not production.
The end result is that npm run is running the WebpackDevServer.
This isn't designed for production so we need to have another way of running on Azure.
Changing the Azure webapp Startup command to npx serve -l 8080 build will run the ReactJS application in Azure.
NB: This answer explains how to run it, but not why.
See this other question for why.

Deploying React + Express on Azure

I'm having that problem where I'm trying to deploy Express and React boilerplate app like one app on Azure App Services. Locally everything works normaly, but when I try to deploy the whole thing, I see ":( Application Error " screen. I think it has to do something with the way my "scripts" inside server's package.json are set...(deploying only express server without client files works just fine). Here I'm trying to let Azure execute the build command once the app is deployed and not before that:
"scripts": {
"start": "cd client && npm run build && cd ../ && node server",
"test": "echo something"
},
Probably I'm missing something crucial for Azure (I'm a beginner).I've read a lot and followed many tutorials but nothing seems to solve my problem. I'll really appreciate it if someone can give me a hand. Thank you!
Link to my github repo : https://github.com/Ivailo663/finalExpressApp
"scripts": { "start": "cd client && npm run build && cd ../ && node server", "test": "echo something" }
This script will work if you already have all the modules your app needed, but if you don't have the modules, you need to install them first.
However, it is recommended that you build the client locally or use pipline to deploy the build folder to azure.

What happens when I run an Angular application using the command npm start

I’m a newbie to web programming.I’ve followed a tutorial to create a simple web application with Angular CLI, then it is said that I can run the app locally using the command npm start.
It worked and my app was running on localhost:4200.
What npm start do to run my app?
I also wonder that what kind of server was being used to host my app, because I did not create any web server (E.g: Nodejs server, etc).
Is there any way to customize this server such as changing the port number?
P.s: I am using Angular 6
When you run your app using npm start, npm will try to find the configuration file package.json in your app folder.If it exists, the command specified in the start property of the scripts object will be run. In your case, the command is probably ng serve.
Then, it will use webpack-dev-server to start a local webserver. In angular.json, the folder path of the builder used to run the local server is specified in the builder property of the serve object.
Go to the builder folder, open the schema.json. You will see the default port which is 4200 is specified in this file.
The easiest way to change the port is to use ng serve with the port option. For example, if you want to run your app using port 5000, use ng serve --port 5000. You can either run this command directly on cmd or specify it in the start property of the scripts object.
When you are running the command npm start, the npm will run the command mentioned in packages.json file
In that file, we will be having various scripts such as start, build, test etc
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Those scripts will have the command to trigger the angular CLI actions.
Basically npm start is an alias name of these script commands. You can change or create your own set of scripts.
As you already installed the npm, the nodejs gets installed in your machine. The angular CLI will use node server to run your application.
By default the port number is 4200, you can customize the port you wish to run.
Another option is to run ng serve command with the --port option e.g
ng serve --port 5050 (i.e for port 5050)
Alternatively, the command: ng serve --port 0, will auto assign an available port for use.
You can update the script in packages.json based on your needs.

Can't find entry file when deploying node app to heroku

I'm trying to deploy my first node app to heroku. I have set up a Procfile with the following code
web: node ./app/server.js
but when I deploy to heroku and check the logs I see the error Error: Cannot find module '/app/server.js'.
On local it works fine. I have the following in my package.json nested under scripts
"start": "nodemon ./app/server.js
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
While using nodemon its better to maintain script commands for dev and production as follows:
"scripts": {
"start": "node ./app/server.js",
"dev": "nodemon ./app/server.js"
}
To determine how to start your app, The deployment server( Heroku) first looks for a Procfile. If no Procfile exists for a Node.js app, It will attempt to start a default web process via the start script in your package.json.
If you use nodemon in script, It'll internally try to run node server.js but in your case start file present in app/server.js. To avoid these issues it's better to use two separate script commands for dev and production. So that while running locally you can use npm dev command.

Resources