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.

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.

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

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.

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.