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.
Related
I've deployed an app (node js backned and react on frontend) via a bitbucket pipeline to Azure. It executes without any errors.
pipelines:
branches:
master:
- step:
name: Install, build, test & deploy
caches:
- node
script: # Modify the commands below to build your repository.
- apt-get update || true && apt-get install zip
- cd backend && npm ci && npm run build && cd ../frontend && npm ci && npm run build && cd ../
- mv frontend/build backend/dist/
- cd backend && zip -r build-$BITBUCKET_BUILD_NUMBER.zip *
- curl -v -X POST -u $DEPLOY_USER:$DEPLOY_PASSWORD https://$DEPLOY_URL.scm.azurewebsites.net/api/zipdeploy -T "build-$BITBUCKET_BUILD_NUMBER.zip"
my package json
"scripts": {
"build": "npm run build:app",
"build:app": "tsc",
"dev": "NODE_ENV=development tsnd --respawn --transpileOnly ./index.ts",
"lint": "tslint -c tslint.json './**/*.ts'",
"lint:fix": "tslint -c tslint.json './**/*.ts' --fix",
"start": "NODE_ENV=production node dist/server.js",
"start:staging": "NODE_ENV=staging ts-node ./index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
The site gives a 403 with "You do not have permission to view this directory or page."
I've downloaded the logs (diagnostic dump) from https://xxx.scm.azurewebsites.net/ but I don't find any errors.
Im running this on windows in Azure and Mac locally. Probably something wrong there. Can I somehow see the output from when then node app starts? Or how can I debug this?
Starting the web app:
403 generally shows up in Appservice when ever the application has not started. To fix this, in your app service click on Advanced Tools under Development Tools
This opens up a window with an option on top of the header - Bash. Click on that.
By default it will be in home directory. Now, using cd navigate to site -> wwwroot
here, you should be able to see all your files if properly deployed. Now issue the command npm start (or any custom command)
Monitoring Logs:
In your webapp under monitoring, you have Log Stream just click on that and you should be able to see the live logs.
You can give a restart on web app once these changes are done.
Lastly, under configuration check if you have provided a start up command for the app service in General Settings. If its node, hope you have given process.env.PORT to get the available port. Hope this helps!
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"
}
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.
I currently have an npm project built with vue-cli and socket.io server.
This is how my project is structured:
Project/
|--node_server/
| |--server.js
|--src/
| |--main.js
| |--App.vue
| |--other .vue files and folders
I do not know how to deploy this app on Heroku because I will need to run two scripts while deploying that is node server.js (in the node_server folder) and npm run build or npm run dev (in the root folder).
What are the steps on how to deploy it successfully? Heroku takes my project from github whenever I push and builds it automatically. I have tried deploying but it ends up with an error page.
Let's say you need to build the front-end with build script first, and then you need to run nodejs server with start script which is node server.js.
...
"scripts": {
"build": "gulp or something idk"
"prestart": "npm run build",
"start": "node node_server/server.js",
},
...
But if you need to run these two scripts at the same time you can achieve this with something like that:
...
"scripts": {
"build": "gulp or something idk"
"start": "npm run build & node node_server/server.js",
},
...
I hope it would be helpful.
For an example, you can take a look at the package.json of one of my project: https://github.com/hisener/pirate-radio/blob/master/package.json
For more information, please refer https://docs.npmjs.com/misc/scripts
I am writing a Node.js app and using Heroku to host it. And also I use Webpack + Babel to bundle all my server files into one and to use ES2015 syntax. But the thing is, I need to build my app before running it. So I put this command into package.json:
"scripts": {
"start": "webpack && node build/server.js"
},
This works, but the problem is, when I run heroku restart, my app runs only after rebuild. And the same story when my app crashes.
So I guess I need 2 different commands: one on deploy (webpack) and one in npm start (node build/server.js)
How can I accomplish this?
Actually it was not that hard. Just had to change my package.json to
"scripts": {
"heroku-postbuild": "webpack",
"start": "node build/server.js"
}
(according to this article: Heroku Node.js Support)