Thank you Wes! After an entire day of playing in the mud, stumbling upon your video and following your instructions got my app working form the first Enter hit after pasting the URL! It makes sense how you poked the package.json file and how you created the server.js. It makes me wonder how such important steps were missing from most other instructors I saw.
Please make one for forcing SSL on Heroku. You're one of the few teachers that talk through the video. The verbal piece really helps me. Thanks for making this!
Thanks for all the work you've put into your Angular 4 tutorial videos! Just discovered your channel by chance today and ended up watching all of them one right after the other! You seem to have an excellent, natural instinct on how to maintain the proper instructional flow, as evidenced by the breadth of concepts you manage to cover (and helped to solidify in my head) in each video/tutorial. Hope to see more of your content, my ngMentor~
Thanks for the video, I did everything and I see my app undeployed, logs say H10. How do I go about fixing the errors, basically is there any way we track errors, besides from command heroku logs? My ERR: npm ERR! Failed at the mean@0.0.0 start script 'node server'.
thanks! i have my server side in node.js all data coming from the mongodb in frontend which is developed in angular 2 can i deploye both project on heruku in one project guide me please what is the best approach to deploye my both projects and run
Thanks Wes for this awesome tutorial, one quick question if you don't mind, if I want to run Angular 2/4 + node locally without the Angular production build, which file should be the access point since the "dist" folder doesn't exist anymore?
Hi Johnny Situ! when I run Angular CLI projects locally, I typically just use the built-in server and serve up the app using ng serve, which I believe serves the files in memory. You could write a small express server, build the app locally (which would produce the dist folder), and serve it that way, also. There is this link (github.com/angular/angular-cli/wiki/stories-disk-serve) which has some information about running ng build --watch, which apparently will compile the app and provide the build on disk, followed by running something like lite-server to serve the app.
I am able to deploy to heroku but when I try to open the application I get this error: Error: ENOENT: no such file or directory, stat '/app/dist/index.html'. Any ideas?
Hey Wes, everything works fine for me, but I came across one problem. When I use routing and try to refresh website, I receive "CANNOT GET /list" statement. How to avoid this? Thanks for the video, it's amazing!
Thank you so much. In Angular 8 I have to run "postinstall": "ng build --aot --prod" and in server.js: app.use(express.static(__dirname + '/dist/name-of-my-app')); res.sendFile(path.join(__dirname+'/dist/name-of-my-app/index.html'));
hello how to deploy when your repo has multiple folders, and one of the folder is the angular project? wanted to deploy from dev branch, i tried set up everything in angular folder.
Hola amigo, Tengo una aplicacion angular 5 y lo tengo local con un "start": "ng server --proxy-config proxy.conf.json", Quiero subir la aplicacion a heroku pero con el proxy ya que el backend esta alojado en otro lado
hey Wes it not working for me i did exactly like you 2 times! i have node 8.9.1 npm 5.5.1 express and i have an empty app with just one and still problems 3d try still got an error! probably something is missing maybe in angular5 i need to do something else? add another thing?
I followed you tutorial but getting this error after the deployment on HEROKU Error: ENOENT: no such file or directory, stat '/app/dist/my_proj_name/index.html'
Hi Wes, thanks this was a very helpful video. But I also have a backend project that's servers my graphql server and communicates with my neo4j database. How do I deploy the webapp(Angular project) and backend(graphql) together?
Hello I upload my file successfully but i get error Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
It works like charm.Thank you sir for sharing your knowledge with us. And a special thank for Antonius Block for give a solution for those who are currently working on latest angular 8.
All I get is a blank screen. index.html is loaded, but nothing is there. ng serve works fine, but app will not work using express. I've double checked all of my spelling and all of my paths. At first the build was failing at the postinstall script but I removed the target option since it wasn't mentioned anywhere in the docs regarding build and it deployed. If you feel like taking a look, it's at github.com/Bus42/mtg-counter.git Maybe something in Angular has changed since you wrote this tutorial.
I'm using gvim here - I'd like to do a video about getting set up on Windows sometime. My vimrc is available in my dotfiles on Github: github.com/wesdoyle/dotfiles. I use a patched font to make powerline / airline look nice!
hey wes doyle.. i will suggest run the command: npm install npm@latest -g version 3 is really slow compare to 5+ and people dont know that when you install node.js it dosent install the latest version of npm which is much faster today! yarn and npm are now similar. i i guess yarn is still faster but not like it used to be compare to npm 5.4
This is the best tutorial, and still works! Just for the people is watching this video... in the server.js you just change the name of the generated folder. For this, you can execute on the project folder ng build and watch the name of ther folder generated in "dist" . Then you reeplace by this way -> app.use(express.static(__dirname + '/dist/theNameOfTheFolderGeneratedInDistFolder')); // Send all requests to index.html app.get('/*', function(req, res) { res.sendFile(path.join(__dirname + '/dist/theNameOfTheFolderGeneratedInDistFolder/index.html'));
Login is currently incompatible with git bash/Cygwin/MinGW This is the error that appear when i insert the Email after $ Heroku Login... someone knows how fix that? i
I am getting a below error "Unable to get local issuer certificate". Please help on this heroku login Warning: Ignoring extra certs from `C:\path\to`, load failed: error:02001005:system library:fopen:Input/output error » Warning: heroku update available from 7.53.0 to 7.63.4. heroku: Press any key to open up the browser to login or q to exit: Error: unable to get local issuer certificate
Hi, thank you for the simple and awesome video :) . Everything is working fine untill i reload the application, then it gives me 404 error. like for example when the link is video-player-app.herokuapp.com/videos it gives me 404, but when i remove /videos part it works fine again. Any idea what might be causing this error. And also slug size of my deployed application is quite large i.e 55.8 MB.. is it normal ??
+Nisha V Prasad - Thanks for the comment! The 404 url issue is something I only discovered recently, but there are ways to work around this. stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser as a starting point. I may make a specific video about this in the future. Regarding the size of your app - are you deploying large amounts of static data (ie images, etc)?
I created a simple cheatsheet following this tutorial. You can check it out in github github.com/Jyotsna-Singh/CheatSheets/blob/master/AngularJS/Deploy-Angular-CLI-Heroku.md Thanks!
Hi Wes, Thank you so much for sharing your knowledge. I like watching your videos and I must say you are one of the best teachers with the structured and detail-oriented approach. I have summarized your this lecture. You can check here: github.com/patilankita79/Notes_DeployingAngularCLIAppToHeroku
thanks @Wes D for this life serving tutorial
+Mario Anthony I hope it is useful to you!
Thank you Wes! After an entire day of playing in the mud, stumbling upon your video and following your instructions got my app working form the first Enter hit after pasting the URL! It makes sense how you poked the package.json file and how you created the server.js. It makes me wonder how such important steps were missing from most other instructors I saw.
Please make one for forcing SSL on Heroku. You're one of the few teachers that talk through the video. The verbal piece really helps me. Thanks for making this!
+Schuyler Ankele great idea, will do this soon, thanks for watching!
Plus one to SSL
I could not open the app on heroku unless I changed "scripts" { "start" : "ng serve" } to "scripts" { "start" : "node server.js" }.
Thanks for all the work you've put into your Angular 4 tutorial videos! Just discovered your channel by chance today and ended up watching all of them one right after the other! You seem to have an excellent, natural instinct on how to maintain the proper instructional flow, as evidenced by the breadth of concepts you manage to cover (and helped to solidify in my head) in each video/tutorial. Hope to see more of your content, my ngMentor~
+fervorviolinist Wow, thanks - glad that you are enjoying the videos! I hope they are helpful. All the best.
Thanks, Can you suggest me a proper video like yours for uploading angular+express app to digital ocean ?
Awesome knoledge here. But advantages does this deploy method has over uploading just the dist folder? thanks
What is the purpose of /dist/index.html? If my app uses routing, do I need to put these routs into index.html?
Thanks for the video,
I did everything and I see my app undeployed, logs say H10.
How do I go about fixing the errors, basically is there any way we track errors, besides from command heroku logs?
My ERR: npm ERR! Failed at the mean@0.0.0 start script 'node server'.
Thank you very very much! After a whole day of useless searching the web, only your video was what helped!
Glad to help, Diana!
thanks! i have my server side in node.js all data coming from the mongodb in frontend which is developed in angular 2 can i deploye both project on heruku in one project guide me please
what is the best approach to deploye my both projects and run
If your bundle size is too big, replace "postinstall": "ng build --aot --prod" with "heroku-postbuild": "ng build --prod"
Thank you! Really helped me after 2 days of useless digging in the code!
+Ann Dvorkina glad to hear it!
How to serve images from aws? I have images in the assets folder, what is the efficient way to load them in the webpage?
Thanks Wes for this awesome tutorial, one quick question if you don't mind, if I want to run Angular 2/4 + node locally without the Angular production build, which file should be the access point since the "dist" folder doesn't exist anymore?
Hi Johnny Situ! when I run Angular CLI projects locally, I typically just use the built-in server and serve up the app using ng serve, which I believe serves the files in memory. You could write a small express server, build the app locally (which would produce the dist folder), and serve it that way, also. There is this link (github.com/angular/angular-cli/wiki/stories-disk-serve) which has some information about running ng build --watch, which apparently will compile the app and provide the build on disk, followed by running something like lite-server to serve the app.
Hope this is helpful!
I am able to deploy to heroku but when I try to open the application I get this error: Error: ENOENT: no such file or directory, stat '/app/dist/index.html'.
Any ideas?
Hey Wes, everything works fine for me, but I came across one problem. When I use routing and try to refresh website, I receive "CANNOT GET /list" statement. How to avoid this? Thanks for the video, it's amazing!
Man, seriously, the best stuff. Thank you!
Thank you so much. In Angular 8 I have to run "postinstall": "ng build --aot --prod" and in server.js:
app.use(express.static(__dirname + '/dist/name-of-my-app'));
res.sendFile(path.join(__dirname+'/dist/name-of-my-app/index.html'));
Thanks 😊😘
You da best!
"name-of-my-app"
Is this the name specified in heroku or in our project inside package.json ??
@@JittoThomasjtp_21_ go to your-app/dist directory and you'll see
How do we get this to the top of the comments feed
Hi, how about SEO on angular apps?
Thanks a ton! Very informative and crisp. Keep going!!
+Rohit Pratap Singh thanks for watching! All the best
hello how to deploy when your repo has multiple folders, and one of the folder is the angular project? wanted to deploy from dev branch, i tried set up everything in angular folder.
Hola amigo, Tengo una aplicacion angular 5 y lo tengo local con un "start": "ng server --proxy-config proxy.conf.json", Quiero subir la aplicacion a heroku pero con el proxy ya que el backend esta alojado en otro lado
great help! keep doing them vids man and ill keep liking them! much respect from Philippines.
Glad to hear, Jerome! Best of luck!
Very Useful, Thank you!!
Glad it was helpful!
hey Wes it not working for me i did exactly like you 2 times! i have node 8.9.1 npm 5.5.1 express and i have an empty app with just one and still problems 3d try still got an error! probably something is missing maybe in angular5 i need to do something else? add another thing?
pretty cool man... thanks.. its more easy than i expected
+Maique Rosa glad to hear it, thanks for the message
Brilliant! Just what I was looking for :)
+Paul Wr glad to hear it, thanks for watching
I followed you tutorial but getting this error after the deployment on HEROKU
Error: ENOENT: no such file or directory, stat '/app/dist/my_proj_name/index.html'
Hi Wes, thanks this was a very helpful video. But I also have a backend project that's servers my graphql server and communicates with my neo4j database.
How do I deploy the webapp(Angular project) and backend(graphql) together?
hi doyle, have problem with my server worked in heroku?
Hello I upload my file successfully but i get error Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
Hi amit, I have got the same error. Did you find any solution regarding this error?
Awesome tutorials sir, Please make tutorials on Form Validation and performing post request to it
+Rony smile good idea, I'll consider working with forms in an upcoming video. Thanks for the suggestion!
It works like charm.Thank you sir for sharing your knowledge with us. And a special thank for
Antonius Block
for give a solution for those who are currently working on latest angular 8.
Tried this with my angular js 8 application but its not working, please is there any other way
Excellent all your Angulars video and App keep it up and plz Make more Apps
+Chandramohan Jagtap thanks, will do!
I am getting this error please help
[remote rejected] master -> master (pre-receive hook declined)
Please tell me the solution to this error
Hey Wes,
Thanks for the great tutorial.
I'm stuck at 'git push heroku master'
Error:
Failed at the pixabay-api-image-search@0.0.0 postinstall script.
All I get is a blank screen. index.html is loaded, but nothing is there. ng serve works fine, but app will not work using express. I've double checked all of my spelling and all of my paths. At first the build was failing at the postinstall script but I removed the target option since it wasn't mentioned anywhere in the docs regarding build and it deployed. If you feel like taking a look, it's at github.com/Bus42/mtg-counter.git Maybe something in Angular has changed since you wrote this tutorial.
is this applicable in angular 6?
How did you get vim to work on your PC? I wanna know your setup please!
I'm using gvim here - I'd like to do a video about getting set up on Windows sometime. My vimrc is available in my dotfiles on Github: github.com/wesdoyle/dotfiles. I use a patched font to make powerline / airline look nice!
It works, thank you very much for the contribution!
Thanks Pedro!! Glad to hear it
no such file /app/dist/frontend/index.html can someone help please
Go to package.json see the filename there
some error occur in my project ....can u suggest me
hey wes doyle.. i will suggest run the command: npm install npm@latest -g
version 3 is really slow compare to 5+ and people dont know that when you install node.js it dosent install the latest version of npm which is much faster today! yarn and npm are now similar. i i guess yarn is still faster but not like it used to be compare to npm 5.4
Great video, thanks!
Hello! great tutorial, can you do one doing a continues deployment with gitlab and yml files? thanks!
Thanks Sir, Awesome tutorial
Thanks, hope it's helpful
amazing work !
Wes, Thank you so much man, really you help me so much
+Acidiney Dias Glad to help
This is the best tutorial, and still works! Just for the people is watching this video... in the server.js you just change the name of the generated folder. For this, you can execute on the project folder ng build and watch the name of ther folder generated in "dist" . Then you reeplace by this way ->
app.use(express.static(__dirname + '/dist/theNameOfTheFolderGeneratedInDistFolder'));
// Send all requests to index.html
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/theNameOfTheFolderGeneratedInDistFolder/index.html'));
Login is currently incompatible with git bash/Cygwin/MinGW
This is the error that appear when i insert the Email after $ Heroku Login... someone knows how fix that? i
Actually, the problem is because i need to Login in the Command prompt first... and after that is working in git Bash
Hi Cannot able to deploy can you please help me?
this is perfect :) thank you! :)
+Arvind Sreenivas - no problem at all, man - hope it is helpful!
I am getting a below error "Unable to get local issuer certificate". Please help on this
heroku login
Warning: Ignoring extra certs from `C:\path\to`, load failed: error:02001005:system library:fopen:Input/output
error
» Warning: heroku update available from 7.53.0 to 7.63.4.
heroku: Press any key to open up the browser to login or q to exit:
Error: unable to get local issuer certificate
life saver thanks mate
Glad to hear it, all the best to you
Thanks! Thanks! Thaaanks!!!
Thanks @Wes Doyle vidoe is awsome and solve my deployment issues to heroku
thanks man. it works well
thank you so much :)!
no problem!
Awesome Video... :)
Thank you very much for the tutorial, it has been very useful for so many applications I have created, plus you are super handsome.
Please add a video for heroku SSL
Not working anymore :( !
Thank you
Hi, thank you for the simple and awesome video :) . Everything is working fine untill i reload the application, then it gives me 404 error. like for example when the link is video-player-app.herokuapp.com/videos it gives me 404, but when i remove /videos part it works fine again. Any idea what might be causing this error. And also slug size of my deployed application is quite large i.e 55.8 MB.. is it normal ??
+Nisha V Prasad - Thanks for the comment! The 404 url issue is something I only discovered recently, but there are ways to work around this. stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser as a starting point. I may make a specific video about this in the future. Regarding the size of your app - are you deploying large amounts of static data (ie images, etc)?
Thank you for the quick reply. will try to resolve this. And any suggestions on how to deal with static data in the application while deploying.?
well done!
I love you man :)
Thanks for this tutorial, you saved my life. =´)
Great!
Thanks Josef!
Jeez what's with the background music?
Thanks Akpe
oi eu sou o theo filho do rodrigo tudo bem
update this no longer works.
Its outdated
I created a simple cheatsheet following this tutorial. You can check it out in github
github.com/Jyotsna-Singh/CheatSheets/blob/master/AngularJS/Deploy-Angular-CLI-Heroku.md
Thanks!
Wow, Jyotsna, really great resource! Thank you.
Hi Wes,
Thank you so much for sharing your knowledge. I like watching your videos and I must say you are one of the best teachers with the structured and detail-oriented approach.
I have summarized your this lecture. You can check here:
github.com/patilankita79/Notes_DeployingAngularCLIAppToHeroku
+Ankita Patil thank you for the message, I hope it's useful and am glad that we can learn together. All the best!