Angular 7/8 universal deploy with serverless (AWS)

[Music] hello everyone this is Kalyan from black box trick and today we'll discuss about serverless so what is árboles serverless is a software architecture design pattern that takes advantage of even driven code execution and it's powered by cloud and it can build massively scalable and cost efficient application which composed of small discrete function without developers need to design for or think about the underlying infrastructure where their code runs and in today's episode I'll be showing you how to use that feature from Amazon AWS and will be deploying an an angular application in fact angular universal application using that function so without further delay let's get started so first thing first to start with we have to go to AWS management console so if you don't have a management console so you need to create a profile there so once you came to this management console you need to search with I M so this manage user access and encryption keys so I will just add a new user for this purpose so let's a new user click on add user then I will give a programmatic access attach existing policies directly so and I will look for this administrator access next I don't need to add any keys here and create user so it will not take much time and it will provide you an access key ID and as well as the secret access key so the next thing is you need to install the server lists in your system to do that it's actually node module so it's simple like NPM install server list and you need to install it globally so AG flag is required here as I already installed it so I'm not going to install it again rather I will just move to the configuration part of it so the first thing like I need to configure it with this like I will write serverless config then credentials you the provider is in a bliss and I have got my key here so this is my key I will just copy it and then I will pass a secret you you and hit enter so previously I have created a profile so it asked me to overwrite it so I will just overwrite it with a - OH so it's success so we are good to go now we'll move forward with our application so what I will do I will create a new application here so let me move to desktop then with ng new let's name it server less you you once it is done let open it by moving into this folder and then open it to vias code so this is the project I generated is a bear born angular application generated through angular CLI now the next thing is we'll use ng toolkit to convert it as a universal application so to do that what you need to do you need to use this ng add and then ng toolkit sorry for the type ng toolkit slash and then university so once you do that your application will be converted with my angular Universal application and all the required configuration it will add for you okay so we are done so right now you can see like many files as being generated if you see that like what all new files has been generated like it's been updated local your J's has been created angular JSON has been modified so all these things has been updated through the schematics of ng toolkit the next thing is in G toolkit also provides a automated configuration for serverless application to be deployed in AWS or if you want it to be deployed in firebase it's also provides that so let's install that as well so to do that we'll use the same thing ng add command and then in G - gate and this time we'll be using serverless and then the parameter will be provided as AWS this time you so to know it better a particular server liske an application in AWS will generate two files one is the lambda or J's and another one is server less dot yml file your ml file which holds all the required configuration and what all things is required for your application so maybe it's a micro service or it's in web application so all those configuration and this danger toolkit serverless schematics actually read your configuration of project configuration and its generate automatically those configuration for you although one thing I noticed like if you are already having an Universal projects or sometimes it will give you some mirror so I've seen some of the user already reported those error in there in the developers github page like sometimes it can show you tell you like the server dot TAS is already available and it cannot overwrite this so apart from that actually this toolkit is pretty good to add all these things for you so so I say it's done so you can see this lambda dot JS file has been added and another file is serveral a story ml so before deploying these things let me see like what this lambda or Jase has been added all this configuration so you can see it's added aw a server less Express and it's also required some module call it a placer one less Express middleware module and it also defines some binary mime types for your application files for example you might you will project have JavaScript Jason and then XML jpg PNG gif and all those kind of what all binary mime times you have to support so those mountains has been defined here and then it's a created a server proxy and expressed at Chris server it's create the server dot app so and in the last it's actually exported your module as universal and the server Laura store T IML it's have a configuration like it's exclude all the module and then include one by one and it also have things his handler lambda dot Universal which has been exported into exported from your lambda dot J's so now let's do go to into our package to a JSON file so you will be able to see it's also a danger toolkit added some of the script for you so build serverless and deploy so this is the crips we are looking for which should build and then from the dist folder it should deploy your application so just in PIM run and then this one so it should be rude application create the digital it free and then create the server list package and then it should upload that package to s3 Amazon s3 services and then it will also use your lambda days and serverless ml to assign those resources for you for your application and it should provide you the URL where it's actually pointed so you can see your application running so let's wait for for the build and deploy so now it started deploying so survival is its packaging so it's also exploding the development dependencies you so if you see like when you have deep dependencies or only dependency so that means the dev dependencies are only dependencies which have which is used for your development purpose but when you are deploying this application to production you don't need that so that same thing is happening here so it's excluding your development dependencies all together now it's creating stack yeah so it's done as you can see it's actually provided the end point here so if you just click any of this sytem so just pin one you can you should see our application angular application the server-side application has been deployed and if you see view page source you can see it's actually a universal application [Music] [Music]

Channel: BlackBox Tech

Views: 8,010

Keywords: angular universal deploy with serverless, angular 8 with aws, angular universal aws, angular 8 deployment, AWS angular8, angular with aws, angular universal, angular, firebase, serverless, angular 7, angular 7 tutorial, angular 6 tutorial, google cloud, amazon web services, serverless tutorial, aws lambda tutorial, aws, angular 6, typescript, angular 5, angular 4, angular tutorial for beginners, angular cli, webdev, angular 8, angular aws, elastic beanstalk

Id: l3t8cjykf00

Length: 11min 27sec (687 seconds)

Published: Thu May 02 2019