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
Related
My package.json:
"scripts": {
"ng": "ng",
"start": "node src/app.js && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"main": "src/app-routing.module.ts"
},
I moved the devdependencies to dependencies.
Apps run locally with Heroku local web but display the only backend in the server.
Added a procfile containing web: npm start
Heroku assigns a port and the database is successfully connected. Backend works fine
My project structure: A src/ folder that has both my back end and frontend files.
I guess I am losing out on the project structure. Please help to make me display the frontend of the app instead of backend.
okay , 1)add the following to your app.js (or your server.js), and
app_path ='../www';
app.use('/api', songRoute)
app.use('/',express.static(path.join(__dirname,app_path)))
app.get('*',(req,res)=>res.sendFile(path.join(__dirname,app_path + '/index.html')))
2)To package.json add this,
"heroku-postbuild":"ng build --configuration=production",
So I am having this error on Heroku. I just woke up this morning and found it after adding a new feature. It says my www.js file is not found. This file is not on GitHub. I am writing typescript so I'm guessing Heroku will build my project and create a "./dist" folder which will include the /bin/www.js file. The application was working before and still works locally. The application still builds successfully. I have tried adding a Procfile and also used a preinstall script but nothing seems to work. Is it possible to know if the "./dist" folder was successfully created?
Error on Heroku:
Folder Structure:
Scripts:
"scripts": {
"test": "SET NODE_ENV=test&& mocha --exit -r ts-node/register tests/**/*.ts",
"dev": "nodemon src/bin/www.ts",
"start": "nodemon dist/bin/www.js",
"build": "tsc -p .",
"lint": "eslint . --ext .ts",
"precommit": "npm run lint&& npm test",
"preinstall": "npm run build"
}`
The Procfile just has: web: npm start
I found the problem. Apparently, the new build created another www.js file in "dist/src/bin/www.js" and deleted "dist/bin/www.js" on Heroku. I have no idea why this happened. So I changed my start script to "nodemon dist/src/bin/www.js".
I would like to autostart my node.js application and server with every boot of the Windows Server 2016 OS.
I already found "node-windows" and "qckwinsvc" as possible solutions, but I do not understand how I can start my application with the startup options I saved in the package.json provided below (e.g. host, prod, ip, max-old-space-size, etc.)
Furthermore, I would like to know if these services also restart the node application in case it crashed due to a programmatical error (e.g. javascript heap out of memory)
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --base-href ./",
"build-dev": "ng build --base-href ./",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"app": "ng serve --host=0.0.0.0 --prod --open",
"app-dev": "ng serve --host=localhost --open",
"server": "export NODE_ENV=production && export IP=172.28.0.19 && node --max-old-space-size=4096 server/server.ts",
"server-dev": "export NODE_ENV=development && export IP=localhost && node server/server.ts",
"static": "http-server ./dist/lead -p 8080 -a 0.0.0.0 -o",
"static-dev": "~/.node/lib/node_modules/http-server/bin/http-server ./dist/lead -p 4200 -a localhost -o",
"format": "tslint --fix \"./src/app/**/*.ts\" && tslint --fix \"./server/**/*.ts\" && prettier --write \"./src/app/**/*.{ts,json,css,html}\" && prettier --write \"./server/**/*.ts\" && ng lint"
},
The perfect solution would be to autostart the server and application with all provided startup options and also restart the application in case of a crash.
Would be very thankful for any kind of help :)
dotenv is a popular library for environment params management. You can start your app like this NODE_ENV=prod node app.js and can access this value from your app like this process.env.NODE_ENV.
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?
I have a single-page application which is written in NodeJS and deploy on Heroku.
I define my Procfile like:
web: PORT=$PORT webpack -p --config ./config/webpack/serverProd.js --progress && node ./dist/server.js
The reason why I do not use heroku-postbuild deploy hook is because I can not get the PORT variable which is assigned by Heroku dynamically, and this is the only way I can access PORT variable.
But when I run heroku run bash and search around in the container of Heroku...
ta da!
I can not found my server.js which it should be exist in the /app/dist/ directory.
I am pretty sure there is something I misunderstand. Can anyone point that out?
Really appreicate!
This is how I setup my nodejs\npm project on heroku
Procfile
web: npm run build && node dist/index.js
package.json
"scripts": {
"clean": "rm -rf dist && mkdir dist",
"serve": "node dist/index.js",
"start": "nodemon --inspect src/index.js --exec babel-node",
"build": "npm run clean && npm run build-server",
"build-server": "babel src -d dist",
"test": "mocha --compilers js:babel-register"
},
Try to start the app from dist/server.js instead of ./dist/server.js