In this post, I will create a To Do List app using Angular and we will host it on the newly introduced Azure service called Static Web Apps.
Azure static web app is connected to GitHub repo, and the first thing to do is to create a new repo under your github account. Once you create it, clone it to your local machine and run the following commands. Make sure you have angular-cli tools installed
ng new AzTodoList
Choose yes for routing and select your preferred css processor and hit enter to create the project and install all needed packages. Once all packages are installed, run
ng serve to make sure the app works fine. You should have something like this running on port 4200
Make sure all files exist in the root folder where you cloned the GitHub repo. If you cloned the repo in a folder called ToDoList and then ran the command ng new inside it, it will create another subfolder. If this happened, make sure to move the files in the inner folder to the ToDoList folder. Otherwise, the GitHub action won’t work since it will fail to determine the programing language used. Your folder structure should look like this:
Now commit the source code with
git add . to add all files followed by
git commit -m "Initial commit" and finally
git push origin master to push the files to GitHub.
Create Azure Static Web App
Open Azure portal and create a new static web app, log in to your GitHub account and choose the ToDoList app
Click on Next: Build to move to the next screen and configure it as below. The artifact location is dist/AzTodoList but it can be different in your case depending on your angular project name. You can get the exact path from your angular.json file or run ng build and check your folder structure.
When you create the app, it will automatically created the necessary CI/CD on GitHub using GitHub Actions and you can view that by clicking on the link “Thank you for using Azure Static Web App! We have not received any content for your site yet. Click here to check the status of your GitHub Action runs.” . You can view the build status by going to your GitHub repo and click Actions
As you can see above, it failed few times because I put the Angular app in a folder inside the repo. Once I moved all the files from within the inner folder to the root folder, it worked.
Test the app
Now go back to your Azure Portal and in the overview tab for the static web app, click Browse and this is what you should see
In the next post, we will add the APIs that will be used to retrieve, add and delete ToDos