Deploy Angular 6 Project Using Heroku

Easily deploy your angular project using heroku. Creating your heroku account and deploying your project through CLI. Adding scripts in package.json to build and deploy your project in heroku.
View full guide here:
bit.ly/2LTDNUk
**server.js file**
Copy here: pastebin.com/3...
To Know more about creating and deploying projects through heroku you can visit these pages:
devcenter.hero...
devcenter.hero...
Music source: www.bensound.com

[@chaimweiss5616]

thanks for the video. I had to modify the server.js to work for me
instead of:
// Replace the '/dist/'
app.use(express.static(__dirname + '/dist/'));
app.get('*', function(req,res) {
// Replace the '/dist//index.html'
res.sendFile(path.join(__dirname + '/dist//index.html'));
i used
// Replace the '/dist/'
app.use(express.static(__dirname + '/dist/'));
app.get('*', function(req,res) {
// Replace the '/dist//index.html'
res.sendFile(path.join(__dirname + '/dist/index.html'));
and then it worked,
hope this helps somebody.

[@Alejandro_YT56]

gracias... tenia el mismo problema...

[@veramentecosi5870]

Thanks. It works great for me. All the same, the final touch was that I had to remove all the "ng Build" from the 'package.json' file since Heroku has the full Heroku/NodeJs building AddOn package. Before then, I was always getting the error message that "ng not found" and my deployment fails. My frontend app is developed with an angular 7.0.2 version. Here is a part of my 'package.json' text in case someone else needs it. Pay attention to the "scripts" part.
INSTEAD OF:
{
"name": "xyz",
"version": "1.0.0",
"license": "Apache",
"engines": {
"node": "10.16.3",
"npm": "6.9.0"
},
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot --prod"
},
.......
......
I NOW HAVE:
{
"name": "xyx",
"version": "1.0.0",
"license": "Apache",
"engines": {
"node": "10.16.3",
"npm": "6.9.0"
},
"scripts": {
"start": "node server.js"
},
"private": true,
"dependencies": {
"@angular-buddies/prettier": "^1.0.0-alpha.3",
"@angular/animations": "7.0.2",
"@angular/common": "7.0.2",
"@angular/compiler": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/http": "7.0.2",
"@angular/platform-browser": "7.0.2",
"@angular/platform-browser-dynamic": "7.0.2",
"@angular/router": "7.0.2",
"@ng-bootstrap/ng-bootstrap": "4.0.0",
"@ngx-translate/core": "11.0.0",
"@ngx-translate/http-loader": "4.0.0",
"ajv": "^6.9.1",
"chart.js": "2.7.3",
"core-js": "2.5.7",
"express": "^4.17.1",
"font-awesome": "4.7.0",
"ng2-charts": "1.6.0",
"node": "^10.16.3",
"npm": "^6.9.0",
"path": "^0.12.7",
"rxjs": "6.3.3",
"yarn": "1.12.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.8",
"@angular/cli": "7.0.4",
"@angular/compiler-cli": "^7.2.14",
"@angular/language-service": "7.0.2",
"@types/jasmine": "2.8.9",
"@types/jasminewd2": "2.0.5",
"@types/node": "10.12.2",
"codelyzer": "4.5.0",
"husky": "^0.14.3",
"jasmine-core": "3.3.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "2.0.4",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.4.0",
"lint-staged": "^7.1.2",
"prettier": "^1.12.1",
"protractor": "5.4.1",
"ts-node": "7.0.1",
"tslint": "5.11.0",
"typescript": "3.1.1"
}
}

[@Tecnitr0nic]

My left ear enjoyed the video

[@knightonhd1144]

Thanks, you saved my sanity. I've been trying all week: blogs & courses but they're outdated.

[@potatocoder3218]

Appreciated your feed back from this video. Thank you

[@shivangimehta8137]

Thank You...u made the work so simple.

[@sergiakomorales]

OMG you save my life thanks you

[@sb.4921]

Wonderful ! I Appreciate this helpful tutorial

[@kamleshprajapat4551]

Thanks for that cool video.

[@wandrade07]

You’re a life saver!

[@GaboLaTo]

thanks! This works like a charm

[@potatocoder3218]

Glad it helped you :)

[@worldwillchange]

Thanku sooooo much 😍😍

[@swagathshetty3755]

after running git push heoku master , build is failing i dont know why, i checked versions and all but not working

[@dwaynepatel9329]

I am receiving an error.. Application error and the logs show this :heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/"

[@potatocoder3218]

Hello Dwayne, sorry haven't encountered this yet did you find a fix?

[@czirjakmarton]

@@potatocoder3218 yes i do have the same

[@amitmoral]

how to update heroku angular app (update app upload again)

[@muhammadhaseeb6144]

I followed all the same steps but when running "heroku open" command its shows not found

[@potatocoder3218]

Muhammad Haseeb you need to install heroku CLI, devcenter.heroku.com/articles/heroku-cli

[@m.haseebkhan5852]

its already installed. still i reinstall it. but having same issue after" heroku open" command not found. what to do now?

[@potatocoder3218]

Hello, M.Haseeb Khan have you tried running in your terminal 'heroku open --app ' to view the list of your apps run 'heroku apps' here's a reference: stackoverflow.com/questions/12479668/heroku-open-no-app-specified
Alternatively you can view your deployed heroku project in your browser at '.herokuapp.com'

[@Amazingg1100]

I have the same issue as Muhammad Haseeb. I did everything like in the video and I have also installed Heroku CLI locally. It says that the deploy is done, but when open the application 'heroku open --app ' it returns 404 - not found. Running heroku apps command says that I have the expected app.

[@potatocoder3218]

Hello Stanish Chankov, have you tried manually opening your app via url '.herokuapp.com', alternatively you can check the status of your website in your heroku dashboard.

[@czirjakmarton]

Thank you for your video, but i still have at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=******** request_id=07a37fed-bb8f-49e8-853b-5f341040d0c9 fwd="********" dyno= connect= service= status=503 bytes= protocol=https error. Do you have any idea?

[@czirjakmarton]

i replaced the host and fwd to stars :D