Deploy Angular application to Github Pages using Github Actions

so this time we are going to deploy our angular application into github pages um so this process we're not really using the docker file we made last time instead we are going to use github actions and we will build our static we'll build our static angular file and then that will be deployed to our github page so in order to use github action we have to create a directory dot github slash workflows and inside this directory we have to specify a workflow yaml and here i am going to copy the code that i have okay so we have to define the workflow yaml and i have i already have it written so i'm just gonna copy and paste and explain one by one so the name is just uh your workflow name um branches means like on which branch when it's push you're gonna trigger that so i'm using the master branch for my github repo master branch so i have to specify i'm going to use the master branch and this is the image that i want to use to do the jobs running and i am adding this so that i can use node 14.17 and next um this checkout stage i believe it's um kind of copying all the um the source codes here on the repo and the next stage would be installing and building so it has to work on the angular crash dash 2021 and it would execute the install to install the packages and to run build and copy this index to 404 this is kind of optional so in case it doesn't find index it will redirect to 404 but it's basically the same file and the last stage deploy it's using a predefined getup page deploy action so that once the file is billed it will detect or check this folder name and copy this folder into your github gh pages branch so introduce this my json server this is a fake mimic json server on github it if you save a db.json file in your main branch it will make a fake json server for you so for instance this demo we can see that the json response is coming from this url but if you create a db file inside your github if you create a db file inside your main branch or master branch db.json file then it will make a json fake json server for you so i'm going to copy this db.json into the root directory it's the same dbjson file and i am just going to add this dbjson and i will push that and see what happens so once i push i have this db.json in my root directory and the way i can access this server fake server is by going this directory this url slash user repo uh for my case it would be tasks um yep let's copy this and instead of your username my username is tjmoon0104 and my repo name is demo docker angular so if you do that we can see there's a fake json server that has been created the reason why it's fake is because any update you apply to this url wouldn't be reflected for instance if we added another task it wouldn't be updated on the server because it's basically just loading the static file from here so if you want to make any changes you would have to commit and push new changes to this dbjs json file so now that we have a new url for our api url i am going to copy this and go to my source file source environment and i would like to define a new environment and i want to name that as github environment.github.ts so for for github api url i am going to copy this guy here paste and save so when i execute uh build with the configuration of github i will use this api instead of all the localhost and stuff so that is good now we have to specify the build file um we have to specify a new configuration for the github and the way i'm gonna do is go to angular.json and here you can see there's a configuration for production um but i would like to make a new one so first of all i'm going to copy this and paste and i'm going to name it github and here you can see replace environment with instead of dot product i'm gonna do github and save that okay and so if you use the configuration for github now that we're going to use the environment from environment.getup.ts so that is good and now we have to specify one more here we want to have a separate build command for github build so i'm going to name that gh build and here instead of doing ng build we have to use the command slash configuration github which means that we will use the configuration from here this github so we can use the github environment and then one more thing we have to add a base perf ah the reason why we have to do is because your github page by default is going to give you a url of something like this github.io and your repo name here so it will start with this url address so you have to add this to your base so that it doesn't go to your root url so oops not this i just need the repo name my repo name is demo docker angular so um slash demo docker angular run gh build and should be working okay that's good i save this as well and that's it we don't have to touch any nginx stuff because we're not dockerizing we're not using docker at all for this part we're just using the github actions so i believe all the config files are done i would add everything and this would be github actions github page build and deploy okay so it seems like it is building it is um okay so the lock shows that my install and build stage has been successful and the deploy seemed to work so now on our branch gh page we should have all the static file and here we have the index and so on so i think we're good to see our page but before that we have to go to our pages and you have to enable that you use this gh page as your source and save and my site should be ready to be shown but uh it's gonna take a bit of time and if we go on this environment we can now see our past tracker working and the task seems to be loaded properly but as you can see if we refresh it will load the static db.json from here so unless there is any change every time refresh is going to be the same as these parameters even if i delete them refresh same thing that's because we specified our back-end api api url to this url my json server blah blah blah double click here we get that it is never going to change it's just static json response but all the requests is probably going to be sent properly yes we see this um post request and it's shown successful but uh the changes are not going to be applied here so if i refresh nothing changes but it's still nice to have that we can have a working web application running on github pages without any hosting fees and so on the front end and back end both working so that's really nice you can kind of show this to someone else if you want to yeah i think this is it for this tutorial

Channel: Moon Data

Views: 3,199

Keywords: angular, github-pages, github-actions, github actions, github pages, json server

Id: 1mqIarCcEos

Length: 12min 12sec (732 seconds)

Published: Wed Jun 16 2021