Deploy to Node App Azure App Service tsc not recognized as command - azure-web-app-service

I am trying to deploy a nodejs app onto Azure App Service. I did the basics of deploying it, but it's failing to run. It seems it is designed to run "node run.js" commands rather than "npm run start".
I'm playing in the console, and if I try to run npm run start manually, I get a series of errors tied to build. Basically:
'tsc' is not recognized as an internal or external command
I'm wondering if there's something really obvious here about how tsc (and others) can be added to path. I have to admit, I'm not particularly well versed in using Azure or Node for that matter. Any help would be very much appreciated! Thanks!
This is the package.json file:
{
"name": "test-scraper",
"version": "0.1.1",
"description": "",
"main": "dist/main.js",
"scripts": {
"build": "tsc",
"build:dev": "tsc --watch",
"prestart": "npm run build",
"start:dev": "nodemon",
"start": "pm2 start dist/src/main.js --node-args=\"-r ./tsconfig-paths-bootstrap.js\" && pm2 monit",
"stop": "pm2 delete main"
},
"author": "",
"license": "MIT",
"devDependencies": {
"#types/lodash": "^4.14.161",
"#types/node": "^14.11.8",
"#types/puppeteer": "^3.0.2",
"nodemon": "^2.0.4",
"prettier": "^2.1.2",
"typescript": "^4.0.3"
},
"dependencies": {
"axios": "^0.20.0",
"discord-webhook-node": "^1.1.8",
"lodash": "^4.17.20",
"messaging-api-telegram": "^1.0.1",
"playwright-firefox": "^1.4.2",
"pm2": "^4.5.0",
"tsconfig-paths": "^3.9.0",
"winston": "^3.3.3"
}
}

Run this command locally for installing typescript, because your code is compiled with the tsc command.
npm install -g typescript
Mostly I was following this tutorial.
Add the tsc command to package.json and add the dependencies:
"build": "tsc --project ./"
...
"devDependencies": {
"#types/express": "^4.17.9",
"#types/node": "^14.14.20",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
},
Here is my file structure:
I add a empty file.ts and add this scripts to the tsconfig.jason file:
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
Deploy through Azure Web App deployment center:
And the app build (tsc) run successfully:

if you are deploying to Production (NODE_ENV: production), devDependencies will no longer being installed, and you need to edit your package.json and move typescript to dependencies.
Source

Related

Heroku deployment issues with create-react-app

I've built a react app from create-react-app that uses an API built on express.
I'm trying to deploy the app to heroku and I've run into some issues. This will be my first deploy.
Originally, I separated the express API backend from the React front end by using two servers operating on different PORTS. Then I used concurrently to start both servers in the app's top level package.json file.
The project looks like:
app
|package.json
|client
|package.json
|public
|src
|server
|package.json
|app.js
This works fine locally when webpack launches a development server for the React app. On deploy, however, Heroku would point the landing page to the express server, rather than the react-app home page, resulting in, well, a whole lot of nothing.
I'm wondering if I should:
A. Run everything through a single express server and just serve the react app from there
B. Find a way to run both servers but point to the React app server.
Here is the top level package.json file
{
"name": "",
"version": "2.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"#material-ui/icons": "^4.9.1",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"#material-ui/core": "^4.11.0",
"axios": "^0.20.0",
"chart.js": "^2.9.4",
"material-table": "^1.69.1",
"query-string": "^6.13.2",
"react": "^16.13.1",
"react-chartjs-2": "^2.10.0",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.3",
"spotify-web-api-js": "^0.22.1",
"bluebird": "^3.7.2",
"body-parser": "^1.19.0",
"cookie-parser": "1.3.2",
"dotenv": "^8.2.0",
"express": "~4.0.0",
"express-session": "^1.17.1",
"handlebars": "^4.7.6",
"querystring": "~0.2.0",
"request": "~2.34.0",
"uuid": "^8.3.0"
},
"devDependencies": {},
"scripts": {
"start": "concurrently \"npm run server\" \"npm run client\"",
"test": "echo \"Error: no test specified\" && exit 1",
"client": "cd client && npm start",
"server": "cd server && npm start"
},
"engines": {
"node": "12.16.2",
"npm": "6.14.4"
},
}
A. Run everything through a single express server and just serve the react app from there
This would be the best choice as far as complexity of the deployment, performance and security are concerned.
To further reduce the possibility of getting issues during Heroku deployment, consider optionally containerizing your solution. You can install Docker, build a container and run it locally. After Heroku deployment the software running inside the container e.g. Express cannot (well, almost) tell the difference between running locally and in the cloud. It eliminates many deployment issues due to differences between the run-time environment you provide locally and that of Heroku. Practical example, it provides the sequence of seven commands to execute in order to get a container with Express/React built and deployed. I'm the author.

Please install sqlite3 package manually after electron-packager on linux for windows

I am trying to package my app with electron-packager. My app have as dependencies sqlite3 and sequelize.
here is my package.json file :
{
"name": "electronjs_base",
"version": "1.0.0",
"description": "Projet de base Electron JS",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "install-app-deps",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"author": "Aurélien Colombet & Steven Servanton",
"license": "ISC",
"devDependencies": {
"electron": "^4.0.3",
"electron-builder": "^20.38.5",
"electron-packager": "^13.0.1",
"electron-rebuild": "^1.8.2"
},
"dependencies": {
"cors": "^2.8.5",
"ejs": "^2.6.1",
"electron-reload": "^1.4.0",
"express": "^4.16.4",
"formidable": "^1.2.1",
"fs": "0.0.1-security",
"path": "^0.12.7",
"sequelize": "^4.42.0",
"sqlite3": "^4.0.6"
}
}
I am on linux and I am trying to build my app for windows. I use electron-packager for that, with that command :
electron-packager . gamemaster_interface --overwrite --platform=win32 --arch=x64 --out=release-builds
My app works well on linux when I launch it with npm run start, but when I am trying to run it on windows with the executable file created by electron-packager I have a javascript error :
I don't know how to solve that problem, I have trying multiple things like adding sqlite3 in devDependencies instead of dependencies in the package.json but I still have the error.
Thank you for reading me and I hope someone have the solution :).
Have a nice day !

GatsbyJS blog not compiling anymore after "npm update"?

If it's a Gatsby, webpack or npm issue i don't understand yet.
I did these commands in terminal and they seem to have started the issue, trying to fix a material-ui "Popper" module that had a "could not find module" error.
npm install react-popper#next --save
npm install avj
npm install --save-dev webpack
npm install & npm update
Terminal:
error There was a problem loading the local develop command. Gatsby
may not be installed. Perhaps you need to run "npm install"?
Error: Cannot find module 'webpack/lib/removeAndDo'
package.json
{
"name": "auto-club-reviews",
"description": "Auto Club Reviews Blog",
"version": "1.0.0",
"author": "Sofianu Alin",
"dependencies": {
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"gatsby": "^1.9.277",
"gatsby-link": "^1.6.46",
"gatsby-plugin-feed": "^1.3.25",
"gatsby-plugin-google-analytics": "^1.0.31",
"gatsby-plugin-offline": "^1.0.18",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-react-next": "^1.0.11",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-plugin-typography": "^1.7.19",
"gatsby-remark-copy-linked-files": "^1.5.37",
"gatsby-remark-images": "^1.5.67",
"gatsby-remark-responsive-iframe": "^1.4.20",
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-contentful": "^1.3.54",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-helmet": "^5.2.0",
"react-hover": "^1.3.2",
"react-popper": "^1.0.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"webpack": "^4.16.5",
"webpack-command": "^0.4.1",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'",
"develop": "gatsby develop",
"build": "gatsby build",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
}
}
Also tried to:
delete node_modules then npm install;
uninstall "webpack-cli": "^3.1.0" and install webpack-commander;
uninstall extract-text-webpack-plugin that seemed to be complained about in terminal;
Any ideas comrades?
Have you been experimenting with Gatsby v2? Your package.json shows React v16, which is a peerDependency of Gatsby v2, but not of Gatsby v1. In Gatsby v1 (which is what you have in package.json) you should not install React directly, it's installed as a dependency of Gatsby.
Webpack is also (both v1 and v2) a dependency of Gatsby. I don't think you should have it in package.json as a top level dependency.
I would recommend starting with a clean Gatsby starter, then copying your gatsby-node.js, gatsby-config.js, components, content, etc, into that project. Leave the package.json file. Then run npm install --save for every package that you explicitly import or require. Hopefully that gets you back to a working site.
Sidenote, personally, I would also recommend yarn over npm.
Gatsby clean-cache
Then delete node modules
and then
yarn start/npm install

Deploying angular 2 App (angular cli) to heroku

I built and angular 2 app with angular cli
ng build command works totally fine, it creates the dist folder.
In order to deploy it I followed this tutorial
Deploy angular 2 app to heroku
When I follow all the steps, I type heroku open but I get an app error
ng: not found
log
here is my package.json file if you want to see it
It seems that is problem of angular-cli and his command ng
but here in my package.json i have it
`{
"name": "rusticstock",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "http-server",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g http-server",
"postinstall": "ng build && mv dist/* ."
},
"private": true,
"dependencies": {
"angular-cli": "1.0.0-beta.16",
"#angular/common": "2.0.2",
"#angular/compiler": "2.0.2",
"#angular/core": "2.0.2",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.2",
"#angular/platform-browser-dynamic": "2.0.2",
"#angular/router": "3.0.0",
"core-js": "^2.4.1",
"bootstrap": "^3.3.6",
"ng2-bs3-modal": "^0.10.4",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23",
"#types/jasmine": "^2.2.30",`enter code here`
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
},
"devDependencies": {
},
"engines": {
"node": "6.6.0",
"npm": "3.10.3"
}
}
`
One more thing, when I'm deploying I see installing components like #angular/common ... but no all of them.
any suggestion would be appreciated.
looks like your heroku app instance does not have angular-cli installed.
I found a way to get it installed.
In your package JSON, add preinstall command like this
"scripts": {
"start": "http-server",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g angular-cli",
"postinstall": "ng build && mv dist/* ."
},
This will get angular-cli installed on heroku server and you will not get ng command not found related errors.
While "git push heroku master" is going on, heroku runs the package.json file.
By default, however, Heroku will only install the packages listed in the dependencies object and will ignore those in devDependencies. Since we want the application build step to take place on the server rather than on our local machine, we need to adjust the package.json file a bit.
Angular CLI apps put the #angular/cli module itself as a dev dependency, meaning that we won't be able to access any ng commands on the server. To get around this, we need to move it to dependencies.
// package.json
"dependencies": {
// ...
"#angular/cli": "7.3.9",
},
My problem was that I was working in another branch and heroku only was taking the progress made in the master branch

Deploying ember-cli app to Heroku

What do I put in my Procfile to deploy an ember-cli generated app to Heroku?
=== web (1X): `ember server`
web.1: crashed 2014/04/10 13:19:57 (~ 48s ago)
=== web (1X): `npm start`
web.1: crashed 2014/04/10 13:22:11 (~ 2m ago)
You could use the Heroku Ember CLI buildpack: https://github.com/heroku/heroku-buildpack-emberjs
I have this in my Procfile and it's is working for me:
web: ember serve --environment production --port $PORT
I followed the instructions from this gist, which is where I got that Procfile.
The ember-cli version and dependencies in the gist are out of date, which was causing my app to crash similar to yours.
I needed to add/replace the packages listed in the "dependencies" section of my package.json file with the packages ember-cli puts into the "devDependencies" section of package json. When I was done my package.json file looked like this:
{
"name": "your-apps-name",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "Your Name",
"license": "Your App's License",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
},
"dependencies": {
"bower": "^1.3.3",
"broccoli-template": "0.1.1",
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
}
}
Procfile:
web: npm run start
Package.json:
"scripts": {
"start": "ember serve --port=${PORT}",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
and rename devDependencies block and add bower as a depency:
"devDependencies": { ... }
to
"dependencies": {
"bower": "1.3.12"
...
}
but add devDependencies again and add ember-cli there for ember to detect your app:
"devDependencies": {
"ember-cli": "0.1.15"
}
A bit more information and further links can be found from my blogpost:
https://personalwebdevelopment.wordpress.com/2015/02/23/deploying-ember-cli-app-to-heroku/
you can try with 'npm start' or 'ember server'
You could use the Ember buildpack recommended by Heroku: https://www.heroku.com/emberjs
To define this buildpack for an existing application, you'll need to run the command below:
heroku buildpacks:set https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz

Resources