Serving angular app at heroku without node server.js - node.js

I have an app that works at local computer, built with angular, node and npm. I have deployed it to Heroku and got the error that binding to port was unsuccessful. Later on, I added a server.js file, changed my start command to "node server.js" and binding to port issue was solved. However, in this case the connection to backend does not work.
Is there a way to bind to the port without being forced to create server.js file and running the app only with "ng serve" command at heroku?
my package.json for frontend
"preinstall": "npm install -g --save-dev #angular-devkit/build-angular #angular/cli#11.2.14",
"ngcc": "ngcc",
"postinstall": "npm run ngcc",
"postupdate": "npm link #angular/cli",
"ng": "ng",
"start": "node server.js",
"start:ssl": "npm version && ng serve --configuration=development --ssl true --ssl-key ./ssl/localhost.key --ssl-cert ./ssl/localhost.cert",
"start:prod": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" ng serve --prod",
"start:prod:ssl": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" ng serve --prod --ssl true --ssl-key ./ssl/localhost.key --ssl-cert ./ssl/localhost.cert",
"build": "npm run build:dev && cd evserverch && npm install && npm run build",
"build:prod": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" ng build --prod --stats-json",
"build:dev": "npm version && ng build --configuration=development --stats-json",
my package.json for backend
"start": "npm version && npm run start:prod",
"bundle": "webpack --config webpack.config.js",
"prestart": "npm run build:prod bundle",
"preinstall": "npm install --global webpack --save-dev webpack-cli webpack-node-externals --save-dev",
"config:batch": "ncp src/assets/configs-scp/e-Mobility-config/config_batch_server.json dist/assets/config.json",
"config:oData": "ncp src/assets/configs-scp/e-Mobility-config/config_odata_server.json dist/assets/config.json",
"config:fakerest": "ncp src/assets/configs-scp/e-Mobility-config/config_fake_rest_server.json dist/assets/config.json",
"config:ocpi": "ncp src/assets/configs-scp/e-Mobility-config/config_ocpi_server.json dist/assets/config.json",
"config:rest": "ncp src/assets/configs-scp/e-Mobility-config/config_rest_server.json dist/assets/config.json",
"config:chargebox-json": "ncp src/assets/configs-scp/e-Mobility-config/config_chargebox_json_server.json dist/assets/config.json",
"config:chargebox-soap": "ncp src/assets/configs-scp/e-Mobility-config/config_chargebox_soap_server.json dist/assets/config.json",
"start:dev": "npm version && cross-env NODE_ENV=development ts-node-dev --files --max-old-space-size=4096 -- src/start.ts",
"start:dev:debug": "npm version && cross-env NODE_ENV=development ts-node-dev --inspect --files --max-old-space-size=4096 -- src/start.ts",
"start:dev:nodemon": "npm version && nodemon --exec 'ts-node --files' src/start.ts",
"start:dev:debug:nodemon": "npm version && nodemon --exec 'ts-node --files' src/start.ts 9229",
"start:dev:prof": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" NODE_ENV=development node -r source-map-support/register --prof -- dist/start.js",
"start:dev:doctorprof": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" NODE_ENV=development clinic doctor -- node -r source-map-support/register dist/start.js",
"start:dev:flameprof": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" NODE_ENV=development clinic flame -- node -r source-map-support/register dist/start.js",
"start:dev:bubbleprof": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" NODE_ENV=development clinic bubbleprof -- node -r source-map-support/register dist/start.js",
"start:devbuild": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" NODE_ENV=development-build node -r source-map-support/register dist/start.js",
"start:prod": "npm version && cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" NODE_ENV=production node -r source-map-support/register dist/start.js",
I have also two configuration files for backend and frontend. the backend folder is in frontend and called evserverch, here is server.js for frontend. There is none for backend, because backend is served as worker.
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static('./dist/ev-dashboard'));
app.get('/*', function(req, res) {
res.sendFile('index.html', {root: 'dist/ev-
dashboard/'});});
app.listen(process.env.PORT || 8080);

Related

node_module and aws lambda functions

I have created the lambda application using node. The main issue I face is moving node_module with the npm build. Aws lambda excepts node modules also share the codeUri directory. So I use babel to move all my code .build directory including package.json. Which the best way to move the node_module to .build folder.
"scripts": {
"test": "cross-env NODE_ENV=test jest",
"build": "npm run clean:lib && mkdirp ./.build && npm run copyAndInstall && npm run build:babel",
"build:noclean": "npm run copyAndInstall && npm run build:babel && mkdirp ./.build ",
"build:lint": "eslint -c ./.eslintrc.json --ignore-path ./.eslintignore --ext .jsx,.js \"**\\*.+(js|jsx)\"",
"build:babel": "babel ./src --out-dir ./.build --ignore bower_components,coverage,node_modules,test,.dist,.build,temp,./start.js --comments false",
"clean:lib": "npm install rimraf && rimraf ./build",
"update:modules": "rimraf ./package-lock.json && rimraf ./node_modules && npm i",
"prepush": "npm run build:fix",
"build:fix": "eslint --fix -c ./.eslintrc.json --ignore-path ./.eslintignore --ext .jsx,.js \"**\\*.+(js|jsx)\"",
"copyAndInstall": "copyfiles package.json ./.build/
}
I even tried npm install --production --prefix ./.build" it give an error like
refusing to install package with name under a package npm err! also called did you name your project the same as the dependency you're installing?

Unable to run node.js app through Docker container

I have a node.js application which I am trying to run in docker. Here is the package.json file snippet.
"main": "lib/server.js",
"scripts": {
"clean": "cross-env rm -rf dist",
"build": "cross-env babel lib -d dist",
"start": "npm run clean && npm run build && npm run serve",
"serve": "node dist/index.js",
"dev": "cross-env NODE_ENV=development nodemon lib/server.js --exec babel-node",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint --ext .js lib/ scripts/ --ignore-pattern node_modules/"
}
And here is the Dockerfile to build the image
#---- Base Node------
FROM node:10.15.1-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
COPY lib ./lib
RUN npm install --only=production && npm run build
EXPOSE 4201
CMD ["npm", "run", "serve"]
I get the following error when I try to run the image. Here is the screenshot of the error.
The node and npm version are the same on my machine and the base image that I am using to build my image.
When I run the same command locally in my machine it works
Here is the exact command that I am running on my machine and it works.
npm install --only=production
npm run build
npm run serve
Am I doing something wrong here ? Any help is appreciated.
You are using ES6 imports
import x from package
In order to do that, you should have Babel package installed, otherwise it won't know how to import that file

Getting "Cannot find module '/app/dist'" error on deploying to Heroku

I have the following script in my package.json:
"scripts": {
"dev": "nodemon server --exec babel-node --presets es2015,stage-2",
"build": "babel ./server -d ./dist",
"start": "node ./dist",
"heroku-postbuild": "cd react-ui/ && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},
On deploying to Heroku I get the following error
Error: Cannot find module '/app/dist'
On local npm run dev, npm run build, and npm run start work fine.
Where is it getting the /app folder? How to fix this?
Thanks
Matloob
You should build your app npm run build before deploy to heroku. It will run heroku-postbuild first then start your app.
Try this :
"start:heroku": "node dist/YOUR-APP-NAME/server/main.js",

Allocation failed - process out of memory

I am going to compile web-pack i have got issue in that i.e Allocation failed - process out of memory .I know i can increase the space size using this
--max_old_space_size=8192
i tried many ways to fix this but nothing is working.
here is my package.json
"scripts": {
"karma": "karma",
"test": "karma start",
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"webpack": "webpack --progress --profile --bail",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll",
"clean:dist": "npm run rimraf -- dist",
"clean:dll": "npm run rimraf -- dll",
"clean:electron": "npm run rimraf -- build",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:dev",
"watch:dev": "npm run build:dev -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": " npm run clean:dist && npm run webpack -- --config config/webpack.dev.js",
"prebuild:prod": "npm run clean:dist",
"build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js --progress --profile",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:prod": "http-server dist -c-1 --cors",
"server:test": "http-server dist-demo -c-1 --cors",
"server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint \"src/**/*.ts\" --force",
"ngc": "./node_modules/.bin/ngc-w -p tsconfig.webpack.json",
"pree2e": "npm run webdriver:update -- --standalone",
"pretest": "npm run lint",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"gh-pages": "wintersmith build -C docs && gh-pages -d docs/build",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"version": "npm run build",
"postversion": "git push && git push --tags",
"build:electron": "npm run build:electron.full",
"prebuild:electron.full": "npm run clean:electron",
"build:electron.full": "npm run build:electron.renderer && npm run build:electron.main",
"postbuild:electron.full": "npm run electron:start",
"build:electron.renderer": "npm run webpack -- --config config/electron/webpack.renderer.prod.js",
"build:electron.main": "npm run webpack -- --config config/electron/webpack.electron.prod.js",
"electron:start": "electron build",
"build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail",
"build:aot": "npm run build:aot:prod",
"clean:aot": "npm run rimraf -- compiled",
"build:ci": "npm run build:prod && npm run build:aot"
},
and the command for running my package.json is
npm server
please help my out how i increase size.
I had similar issue. I was using node version 8.x. Downgrading it to 6.11.0 resolved my issue.

Docker proper redirect link

I have Dockerfile:
FROM cloudron/base:0.10.0
ENV PATH /usr/local/node-6.9.5/bin:$PATH
WORKDIR /tmp
COPY package.json /tmp/
RUN npm config set registry http://registry.npmjs.org/ && npm install
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN cp -a /tmp/node_modules /usr/src/app
RUN npm run build
EXPOSE 8000
CMD [ "npm", "run", "start:production" ]
if I run this by:
docker run -p 8000:8000 -t somename/appname
then
going to http://localhost:8000 works fine
but if I want go to http://localhost:8000/about I get error:
Cannot GET /about
What should I do to make it well configured ?
Of course my react app, works fine with such link using in development start.
EDIT:
"scripts": {
"clean": "rimraf dist",
"compile": "node build/scripts/compile",
"build": "npm run clean && cross-env NODE_ENV=production npm run compile",
"start": "cross-env NODE_ENV=development node build/scripts/start",
"start:production": "cross-env NODE_ENV=production node build/scripts/start",
"test": "cross-env NODE_ENV=test karma start build/karma.config",
"test:watch": "npm test -- --watch",
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix"
},
looks like my start:production is not good..

Resources