Deploy Angular CLI App to Heroku
HTML-код
- Опубликовано: 18 сен 2024
- In this video, I deploy an Angular 4 app built with the Angular CLI to Heroku. This is a basic deploy - the key to a successful deployment is configuring the package.json file in your project.
---
- Move necessary libraries into your dependencies from dev dependencies.
- Run 'ng build' as a postinstall script
- Create a small express server and have it run as a start script
Though not demonstrated in this video, you might strongly consider serving your application over Https. You'll need to redirect non-Https requests to Https in your Express server.
The application deployed here was one that I built in a previous video. Be sure to check it out if you're interested in building a simple gallery application in Angular JS!
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
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'));
Thank you very very much! After a whole day of useless searching the web, only your video was what helped!
Glad to help, Diana!
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
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.
Thank you! Really helped me after 2 days of useless digging in the code!
+Ann Dvorkina glad to hear it!
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.
Man, seriously, the best stuff. Thank you!
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!
Thanks a ton! Very informative and crisp. Keep going!!
+Rohit Pratap Singh thanks for watching! All the best
I could not open the app on heroku unless I changed "scripts" { "start" : "ng serve" } to "scripts" { "start" : "node server.js" }.
Excellent all your Angulars video and App keep it up and plz Make more Apps
+Chandramohan Jagtap thanks, will do!
great help! keep doing them vids man and ill keep liking them! much respect from Philippines.
Glad to hear, Jerome! Best of luck!
If your bundle size is too big, replace "postinstall": "ng build --aot --prod" with "heroku-postbuild": "ng build --prod"
What is the purpose of /dist/index.html? If my app uses routing, do I need to put these routs into index.html?
Brilliant! Just what I was looking for :)
+Paul Wr glad to hear it, thanks for watching
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
Very Useful, Thank you!!
Glad it was helpful!
pretty cool man... thanks.. its more easy than i expected
+Maique Rosa glad to hear it, thanks for the message
Awesome knoledge here. But advantages does this deploy method has over uploading just the dist folder? thanks
Thank you very much for the tutorial, it has been very useful for so many applications I have created, plus you are super handsome.
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, Can you suggest me a proper video like yours for uploading angular+express app to digital ocean ?
It works, thank you very much for the contribution!
Thanks Pedro!! Glad to hear it
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?
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 Sir, Awesome tutorial
Thanks, hope it's helpful
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.
How to serve images from aws? I have images in the assets folder, what is the efficient way to load them in the webpage?
Great video, thanks!
amazing work !
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!
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
Wes, Thank you so much man, really you help me so much
+Acidiney Dias Glad to help
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!
Thanks for this tutorial, you saved my life. =´)
Thanks @Wes Doyle vidoe is awsome and solve my deployment issues to heroku
this is perfect :) thank you! :)
+Arvind Sreenivas - no problem at all, man - hope it is helpful!
Thanks! Thanks! Thaaanks!!!
Awesome Video... :)
thanks man. it works well
well done!
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?
life saver thanks mate
Glad to hear it, all the best to you
Hi, how about SEO on angular apps?
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'
Hello! great tutorial, can you do one doing a continues deployment with gitlab and yml files? thanks!
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?
thank you so much :)!
no problem!
no such file /app/dist/frontend/index.html can someone help please
Go to package.json see the filename there
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?
Tried this with my angular js 8 application but its not working, please is there any other way
Thank you
Thanks Akpe
I love you man :)
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.
Great!
Thanks Josef!
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
I am getting this error please help
[remote rejected] master -> master (pre-receive hook declined)
Please tell me the solution to this error
hi doyle, have problem with my server worked in heroku?
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.
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!
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
some error occur in my project ....can u suggest me
Please add a video for heroku SSL
is this applicable in angular 6?
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!
Hi Cannot able to deploy can you please help me?
oi eu sou o theo filho do rodrigo tudo bem
Jeez what's with the background music?
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.?
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.
Not working anymore :( !
update this no longer works.
Its outdated