Setting up PetShop Application
For this hands-on we will be using the pet shop sample code that is available in github. https://github.com/karthikeyanVK/MonolithictoMicroservices-1.git
Make sure the following prerequisites are satisfied in your computer before starting this exercise.
- Visual Studio 2017 installed with Azure functions templates
- Free/MSDN azure subscription for the handson exercise.
Steps to be followed.
- Open Visual studio 2017 and click on the Team Explorer on the right side of the VS 2017
- Click on the connect Icon and click on Clone button available in “Local Git Repositories”
- Copy the url https://github.com/karthikeyanVK/MonolithictoMicroservices-1.git to the “Git Repo URL” Text box.
- Select the folder path where you want to save your exercise of your local folder. And click on Clone folder

- Navigate to the clone folder (eg:D:\Karthik\Monotomicro\Exercise)
- Open up the command prompt and navigate to the cloned folder(D:\Karthik\Monotomicro\Exercise\PetShopUI)
- Run npm install -g @angular/cli and then
- Run npm install
- Install the Visual studio code, if you have not installed already and then open the PetshopUI folder.
- Run ng serve in the command prompt and you make sure you see the below screen by navigating to the url http://localhost:4200/

- Now go back to the visual studio and run the solution.
- Make sure Add Products and Order module works
- Clean the solution
Now your environment is ready.
In Case of Issues
Open the PetShop.API Solution. If you get below error

If You have problems in connecting with local database. Then create Database Server in azure
Create Database in Azure as Below

- Use the connection string below and replace the servername and password got from your azure.Server=tcp:{yourservername}.database.windows.net,1433;Initial Catalog=Petshop;Persist Security Info=False;User ID={your_username};Password={your_password};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;
- Open your web.config and find the connection string name as defaultConnection and replace the modified connectionstring with connectionstring of the web.config

Deploy to Web API in Azure
- Open the PetShop.API Solution if not opened already. Right click on the “PetShop.API” and click Publish.
- Select Create New in the Popup.

- Give a unique name for the app and click create.

- You have successfully created an API app for our Petshop
- Copy the url from the opened website and save it in a notepad.
- Login to portal
- Find the app you have created. Update your connection string with key as “defaultConnection” and value as connection string from the database created.

Deploy to Angular App in Azure
- Login to Portal
- Click on the Plus button on the left hand top corner.

- Give an unique name in the app name and then click create.
- Open the PetshopUI folder in visual code, if not opened already
- Install Azure App Service in your Visual code as below.

- Navigate to environment.prod.ts and then copy the api url,you have pasted in the notepad

- Open up the command prompt and navigate to the cloned folder(D:\Karthik\Monotomicro\Exercise\PetShopUI), if not opened
- Run “ng build --prod”
- Connect to azure login in VSCode
- Right click on the app and click Deploy to Web App.

- Select the dist /PetshopUI by clicking on the Browse.

- Click Deploy on the popup and test the app.