Deploy your Angular App to a Serverless Environment (AWS)

Today's Question: What is your ultimate career goal?
-- In this tutorial, I'm going to show you how to deploy your Angular app to a serverless environment hosted by AWS (Amazon Web Services). We touch no code during this process; everything is achieved through simple console commands! Let's get started.
Serverless benefits:
1. No servers to manage.
2. Scaling
3. You pay for what you use vs. what you reserve
github.com/maciejtreder/ng-to...
github.com/maciejtreder/ng-to...
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Be sure to Subscribe!! (It's my birthday, do it as a gift damnit). My answer for today's ?: I am fairly close to my ultimate career goal, but eventually I want to delegate more and more work to others. I'm not really sure if that would include actual video content, but the goal is to grow this net-based education business 100x+ more than it is now. All in all, I definitely do not want to go back to freelancing, and I'm in a pretty good position right now.

[@MohanMishraAstroboy]

DesignCourse Many Many warm wishes for return of the day.. sir. You serve with your knowledge, I pray to God for your Dream Life.... God bless you

[@debadipti]

Wish you a Very Happy Birthday .... Gary!!

[@bassilredman9430]

Happy Birthday

[@TheShash1001]

Happy birthday Gary!!!

[@mohinderlamba]

Many happy returns Brother. Now you are officially allowed to drink. :)

[@debadipti]

My ultimate goal is to find myself doing what I love and enjoy doing that without any financial problems like now. I watched your previous video and I swear I am gonna follow that from now; and reach my end goal one day. :)

[@ninvitfpv4124]

Thanks for sharing your knowledge, my friend. Good to know that we have angular, aws and Brazilian jiu-jitsu in common. Cheers from Brazil. Oss

[@chrischappell7643]

thank u so much for this great vid, i've readed about severless news in techcruch tonight and boom.... your video show up by notification, that great, hope to see pwa version of this vid , thnk !

[@joedandantech]

THIS IS AMAZING. You are doing AWESOME WORK!!!

[@Thesrik23]

Happy B'day Gary :) Please cover DB2, load Balancing, Elastic search kind of weird things in upcoming videos.

[@surajgulhane6112]

Thanks for this tutorial.....and happy birthday Gary

[@PL4YR]

This a great video, its interesting its gone down the universal approach straight away. If i was going to show the bare minimum i would have shown just dropping a ng build dist onto a s3 bucket to show how easy it is. Then slowly work up to advanced stuff like deploying cloud formations to create your private buckets with a cloudfront link to CDN your whole app. But going with angular universal changes this. With systems ive written i tend to keep frontend and backend completely decoupled. It works nice. But cool job with universal!

[@mdk124]

Hey Gary! Great tutorial, really quick and straight to the point. For the custom domain portion, is there going to be a video about that?

[@AngelH2m]

Hello Gary! Great video tutorial, could you please make a tutorial on how to add the domain name and SSL certificate? Thank you

[@rodolforamos7397]

Awesome tutorial. Appreciate your efforts to create this.

[@StephenSchaal]

it's cool you use cmder, I thought I was the only one still using that

[@maryamadeeb6041]

your prefect man! Keep going on👍

[@aayushkurup4616]

Hi Gary happy birthday Currently my goal is to get into the data science and machine learning world. Don't really know when I'm gonna find the 'Ultimate' Goal of my life. Please do a tutorial on mean stack or fean stack maybe. (replacing mongo with firebase).

[@carrillocarlosce]

Hi, my goal as a developer is to get as much knowledge as posible, and like you I dream with sharing my knowledge to other, to have people learning from me and I would also like to live of it, with your last video about how to make money online in 2018, you give me some ideas of how to get started on this, thanks for that video and now I'm gonna watch this one about angular which is mi javascript favorite framework.

[@myadsmail1470]

Hi everyone I get the following error at last part when I open the link in browser> { "message": "Internal server error" }

[@marshallvance6757]

Pretty new to this. Got it to work. How do I add two additional folders. My app has three folders the workspace folder (frontend) a (backend) folder and another folder containing (python) scripts?

[@alvaroguedez8232]

hi gary thanks for the video tutorial. I have a question for everybody about of updatet the project... when already yet deployed is posible make a kind of push for change files?

[@amined801]

well maybe i am late, but i want to say thank u and happy birthday

[@congphanvan873]

Happy Birthday!

[@michelwmaster]

I already have an instance running on AWS, I wanted to know how to upload my files to a client folder the same way we did here.

[@makepetsfirst]

Great video!!! But I have a question. Can you tell me how can I deploy to a specific S3 bucket? Is there some parameter I can pass? Thanks in advanced

[@rodossaenz]

Hi Gary, excelent video. Have you tried to implement this aproach with AWS CloudFront instead API Gateway? May be with Lambda@Edge?

[@GeorgeGomez]

my all time goal is to create an app or be apart of a team that creates an app that is used daily, world wide, that helps with day to day activities.

[@MarcoDiGiuseppe]

Are you a developer?

[@PrafulDhabekar]

Thanks for the awesome video. But I've tiny doubt, what if I want to change the localhost to IP address in hero.service.ts before deploying code to server? And if possible can you do a tutorial on how to deploy an angular project with Jenkins. Thank you!

[@joevarecha6953]

Please link if you covered the custom domain tut. If not, looking forward to it!

[@sahilkashetwar2243]

Hi Thank you for the awesome tutorial.. I followed all the steps which you have mention in video and after running deploy it's giving me and url for the webite in terminal.. but when I am trying to open it it's giving me an internal server. Could you please help me that how to deal with this error. Thank you in advance.

[@gurusamrudh2309]

Hello Gary, its really a fantastic way to simplify learning. Thanks a million for that. Between I was successful in deploying this to serverless. But I want to check code at aws and assign domain name brought at Godaddy. Please can you share any study links for that.

[@AndyLisac]

Hi Gary ... thanks for the tutorial. I have though some errors when trying to install universal and serveless thru ng add @ng-toolkit command. Each time it says : "The specified command add is invalid. For available options, see 'ng help' ". If I try to install it thru npm i @ng-toolkit/universal and @ng-toolkit/serverless it works fine, but in my package.json I dont have build:serverless:deploy config. So I think its a version issue . Can you please share with us what are the working version for you. Thanks Is there an Github repository for the tutorial ? Just to get the package.json scripts

[@kunalks]

Hi Gary, Thanks for awesome video. I am facing issue to deploy app. I am deploying first angular project, I am facing issue in when I am deploy dist file on server thats working fine, but inner page I am doing refresh page show 404 page. but when use hashlocationstrategy it's fine on inner page on refresh but its shows # keyword in url. My Question is: I don't want # in url. What I do?

[@keep_it_simple_shorts]

Happy birthday

[@joedandantech]

Gary it would be amazing if you did a full stack server-less angular development application, fully on aws, with a dynamodb database, api gateway, and lambda nodejs or just lambda apis

[@macmacmac740]

@Rudy Hadoux Thank you! This is what I needed.

[@devdharma3050]

Thank you so much

[@danilosarcinelli8539]

Hi friend! I ve followed the course, but I ve used the angular app u developed on the Angular 6 course. I got an error in details.component.html after trying to deploy with serverles, saying that property name doesnt exist on Object, as well as email, username and phone. When I just serve locally, the app works just fine

[@rathileshc]

please make more angular,vue videos :)

[@thusharaboy]

Hey... what software do you use to capture screen and all?

[@billthornhill1014]

Very helpful guide. One issue I'm having, after adding a custom domain to my api gateway - the .js and .css are not getting loaded due mime type being blocked. In browser debug view I see messages like "*.js was blocked because of a disallowed MIME type (“text/html”), and *.css was ignored due to mime type mismatch." Both local server and the direct API url in AWS work fine, however. Anybody run into this? I am using angular 6 with bootstrap 4.

[@arunkumar-cg6ko]

I want to be Full stack dev and when something is throw something to you. As a dev I should be able to get things done or at least I need to understand what it was written.

[@cathychen8750]

When run ng add @ng-toolkit/serverless --provider aws, I got found 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details

[@asadfiaz9830]

I want to remove /production from the endpoint, can you please tell me how i can do that in angular app?

[@crazy_p8168]

Is there a way to check the state and monitor the deployed app from AWS Console?

[@rajkathal3251]

HI Gary, My Professional Career Goal is to become , UI/UX Designer, Developer and Frontend Architect Like you

[@chagamajaykumarreddy1897]

Hi Gary happy birthday . My goal is to start the web tutorial point for front end and grab the front end development and write my own libraries and framework . Give me some work if you have please and guide me more towards my career what is best thing I should do .

[@BalticWind]

Why all you doing is so interesting?!?

[@optionsart]

Happy birthday My career goal is PHP developer

[@rodrigz]

Jiu-Jitsu shirt! YAAASSSS

[@eitanel02581]

please could somebody help my ? for a weird reason i have some images (jpg file) that are not rendered and some that are , all of them are stored in the same way at the assets . maybe somebody know why? thnkss

[@damienosullivan6353]

Hi all, I am trying to follow these steps for an Angular 7 app. I followed the steps perfectly, but when I run the final command (npm run build:serverless:deploy), I get this error message in the console: TypeError: Cannot read property 'properties' of undefined. This is the line where the error seems to be occurring: describe: optionsSchema.definitions.output.properties.path.description

[@avishekpuja]

Project dir>ng add @ng-toolkit/serverless --provider aws Local workspace file ('angular.json') could not be found. I am not able deploy angular app in aws for this error. Can you please help?

[@sourishdutta9600]

Is this going to be hosted on AWS S3 as static website ?

[@agnibinasengupta1420]

I had followed the steps exactly but getting this {"message": "Internal server error"} when i hit the URL. Can you please suggest

[@myadsmail1470]

any solution?

[@sergiofaya7609]

I have just done step by step the same thing and at the end when I try to npm run build:serverless:deploy I got the error >> node_modules\webpack-cli\bin\config-yargs.js:136 describe: optionsSchema.definitions.output.properties.path. TypeError: Cannot read property 'properties' of undefined. Do you know what can it be?

[@Polydea]

same error... in the package.json file change to "webpack-cli": "^3.1.1" . Also make sure "runtime: 8.10" in the serverless.yml file :)

[@WiselyDCruizer]

Why not directly use AWS S3 bucket to deploy?

[@maciejtreder1557]

S3 is just a storage. You won’t get server-side rendering on it. That’s why Lambda > S3 :)

[@mdk124]

Hey guys! Was wondering if anyone could help, after deploying my angular app using this method, I got "Failed to decode downloaded font" for font-awesome, line-awesome, material-icons and so on. Is there a remedy to this? Thank you so much!

[@prakashk4878]

how to configure proxy.conf.json in ng build? Kindly help me anyone

[@g-l8492]

I like that he overcame the death of Marissa and became a programmer after all he went through.

[@elderjunior9704]

Shooow

[@dharmendramehta4367]

i got this error while using "ng add @ng-toolkit/serverless --provider aws".... can anyone help me : Skipping installation: Package already installed [bugsnag] Loaded! "ng-toolkit serverless" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID. ERROR MESSAGE: Path "/server.ts" already exist. ERROR STACKTRACE: Error: Path "/server.ts" already exist.

[@rajkathal3251]

Hi Sir, Thanks for uploading this video, but problem that I am facing in my current project , how can i call multiple web api call with flatmap in the resolver class. I assume you understood my question and I am unable to find a way to fix this issue. For example : I am calling multiple webservices in my service class in my onItnit function , and I have to use flatmap so that onc serivce which is expecting some value from other web api and return the multiple service response in the form of array for ex : OnInit Method : this._mySerivces.getDataForInitialPageLoad(). subscribe((data) => this.orgunitsModel = data[0]; this.consoleModel = data[1]; this.planModel = data[2]; ) Service Class : getDataForInitialPageLoad() { return this._http.get(rest/orgunits/) .map((response: Response) => response.json()) .flatmap((orgUnits: OrgUnitModel[]) => { return Observable.forkJoin( Observable.of(orgUnits), this._http.get(rest/console/+ orgUnits[0].id) .map((response: Response) => response.json()) this._http.get(rest/plan/+ orgUnits[0].id) .map((response: Response) => response.json()) ) }) } How Can I create Resolves class for this kind of issue I know this is quite complex, but this is the biggest issue which most of the people would be faceing.

[@rajkathal3251]

sorry this angular 6 issue . But If I could help for this , It will really helpful

[@amined801]

my ultimate career goal is to be a full-stock developer

[@muhammadusman7217]

Cool video 😃, sir could please make a video on react please 😊

[@forestcamper1]

did everything.. but my app does not work. and it modified everything already . :(......

[@sergiofaya7609]

me too, i get a typeerror of propperties undefined

[@shivankitraj6852]

Do an Angular 6 Firebase CURD.

[@pattierney6845]

Yes with ngrx handling crud from firebase with images

[@craftzyapp9547]

I get this error - Serverless plugin "serverless-api-compression" not found

[@agnibinasengupta1420]

For this try : npm i serverless-api-compression before the step : npm run build:serverless:deploy

[@craftzyapp9547]

@@agnibinasengupta1420 successfully deployed. But when I run in the browser I get internal server error, with error code 502. Do you know how to check the logs?

[@KalpeshPanchal]

Ultimate goal: Build Intelligence.

[@beebumble2166]

My ultimate Goal is to build an App used by thousands of millions of users in their everyday life.

[@AdamPoniatowski]

its funny how the term "serverless" is becoming more and more popular... realistic serverless, is torrent/web-rtc... as everybody is hosting it (the ones who viewed/downloaded it). the serverless that is being advertised is still using a hosting provider's servers... so its not serverless. It looks like it is the new buzzword like cloud (which used to be called the internet, in the old days)... buzzwords to convince people to pay hosting providers to use their services. tldr version: if it was really serverless... I wouldn't be paying for it. ;)

[@namratajugran7117]

I am getting below error while running npm run build:serverless:deploy command. Please can you help me here to investigate and what is wrong here. Thanks ERROR in C:\Code\myawsomeApp\server.ts ./server.ts [tsl] ERROR in C:\Code\myawsomeApp\server.ts(24,20) TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof e' has no compatible call signatures. npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! myawsome-app@0.0.0 build:server:serverless: `ng run myawsomeApp:server:serverless && webpack --config webpack.server.config.js --progress --colors` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the myawsome-app@0.0.0 build:server:serverless script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Namrata Jugran\AppData\Roaming pm-cache\_logs\2020-04-17T15_01_52_196Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! myawsome-app@0.0.0 build:serverless: `npm run build:browser:serverless && npm run build:server:serverless` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the myawsome-app@0.0.0 build:serverless script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Namrata Jugran\AppData\Roaming pm-cache\_logs\2020-04-17T15_01_52_265Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! myawsome-app@0.0.0 build:serverless:deploy: `npm run build:serverless && npm run deploy` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the myawsome-app@0.0.0 build:serverless:deploy script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Namrata Jugran\AppData\Roaming pm-cache\_logs\2020-04-17T15_01_52_349Z-debug.log

[@nicolasescorcia1624]

Diculpa, lo pudiste solucionar ?

[@tanaybanerjee991]

getting this {"message": "Internal server error"}

[@mTz0KS43]

Me too. @DesignCourse any help ??

[@SudhirKumar-fh4qq]

@@mTz0KS43 Did you get any solution yet? I am getting same error

[@SudhirKumar-fh4qq]

Did you get any solution yet? I am getting same error

[@mTz0KS43]

Nope :/

[@balramverma4873]

any solution ?

[@prijithvarghese4633]

Hey! I followed the tutorial, when I enter the link it says "Internal server error", any idea why? {"message": "Internal server error"}

[@jroamindia1754]

hey Gary ! I'm getting this error npm ERR! Missing script: "build:serverless:deploy" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run Do we need to confg. package.json