HOW TO CREATE DEPLOTMENT SLOT AND MAKE A SWAP IN AZURE
Published: 2023-06-23 11:24:33

Deployment slot is a process where you deploy apps in slots (1,2 and 3) i.e in a different version of the app, in order to test, make changes before deploying the app. 
This help to prevent downtime or interruption on the running app when rolling out an update on the app. When you want to carry out an update/upgrade on an app already running, or available to users, which is always in production slot1, in order to prevent downtime or interruption of that app in slot1. The already running app will need to be cloned, edit and updated, deploy to azure and tested, then do a swapped for it to be available to users. 

a.	Create a deployment slot: go to your web app page, click on deployment slot, you will need to upgrade to standard or premium if your free dev/test is used up, 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q6ga25fkxpsyoj6h2db.png)


b.	To upgrade, click on scale up (app service plan) and upgrade to standard under production workload, then click select and upgrade pricing plan. With this you can be able to create slot.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j89lzzcajvs8hpyf1g0i.png)
c.	Go back and click deployment slot again, you would see the web app running in production mode, production slot is default slot where your app is running, for users to see and use. So we will need to create another slot for testing and deployment of an update of your web app before being deployed for user to use.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtw7tdwqe4caob1ptpmk.png)

d.	Creating 2nd slot, an instance of the your webapp), click add slot, give a new name (as Staging), choose “clone setting from” i.e. clone your original web app (project10webapp) from production slot1 to the slot2 that we added. From the right the domain URL will change from project10webapp.azurewebsites.net (slot1) to project10webapp-staging.azurewebsites.net (slot2. You then click add.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyu2ul3llyy9cexlilt0.png)
e.	Below pic showing the staging deployment slot2 just created, has been added). Project10webapp in production slot, the slot users are using,
Project10webapp-staging (newly created slot) the app we need to test before deploying.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jwpbi1ioljjb214wtxx.png)
f.	URL for the project10webapp in production slot is project10webapp.azurewebsites.net


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xtzagvn64e07kfg88u1.png)
URL for the Project10webapp-staging in staging slot project10webapp-staging.azurewebsites.net  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1inr9oay08i1mn0dn3nb.png)
Openning the URLs, show your web app is running, but its waiting for content to be added, as shown 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7q98tnkets8uyvoytaf.png)


**Adding web content to Azure web apps**
g.	Use Visual Studio to add Web app code into your azure web apps.. By using publish tool, i.e. deploying  code to the azure app service. 1st load web code into Visual Studio by selecting file menu, open, Websites, file system and then Project10WebApp web code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd0izlgdwsnx1qhwsgv7.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msrfoly0c1n169mgi18y.png)

h.	Web code from the project file loaded into Visual studio



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4t11r247wr8n3i1pqkx.png)
i.	Right click project10webapp and select publish to the azure web, select Azure and click next, then select select Azure app service and click next.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0ovpvdtnxxccw4wgscn.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xamnkpmk97wf0wdptosd.png)

j.	Expand the  resource-group “AppServiceRG”,  and select Project10AppWeb, then click finish, 
Publish in progress comes up, after click close.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hduxfthxmj38d3dtqzz4.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5s0jwgm9khuvezyworc.png)

k.	Web app being deployed to Azure, after successful deployment, displayed below is the URL, the web app resource group and web app name gotten from the azure web services.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjgj0cflwnvv78f7xal6.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywpysipowu2nbsfrnkfl.png)

l.	Click on the URL, and the web app appears as below, this is the web app running in the production skot1.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wer0hzw3jm1v8urhjtm5.png)

m.	We then deploy the clone code of production slot1 into staging slot2 by publishing it in the Visual Studio, by edit only the name above to differentiate and save it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79c4tsses3wrj9nvmvd4.png)
n.	Redeploy (republish in VS) again into azure by selecting staging slot2 as shown below. Click new profile to republish, select azure, azure web service and click next, same as what we did above.
o.	Expand the web app service group and select staging slot2, then click finish.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvb0g4mmlhm8g4xuvryw.png)

p.	After successful deployment, click on site URL, in the web app, the name would have been modified as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz5c7zqmnyk34fzaumou.png)

q.	Click on the URL, and the web app appears as below, this is the web app running in the staging slot2, the bold name we edited from **joseph oyewale** to **jesse miracle**   has change to Jesse Testimony. NOTE: it shows the test was successful and can be deployed 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/soovpixf26awu579i39s.png)


**SWAP FROM STAGING SLOT2 TO PRODUCTION SLOT1**
Swaping the web app (tested app) from staging slot2 (source URL: project10webapp-staging.azurewebsites.net) to production slot1 ( target URL: project10webapp.azurewebsites.net) by using swap tool in deployments tool. 

a.	Below are URL pictures: showing “**Im Joseph Oyewale**” is in production slot ( web app running for users to see).  Showing “**Im Jessy Miracle**” is in the staging slot (the web app we are testing, need to be deployed and swapped).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzfn8d8fwxqx4nzllmlf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mih84o3gv5zfqqk411vp.png)
b.	Click swap button ande then select the source as (project10webapp-staging) staging slot2 the new version of the app that will be swapped into the target as ( project10webapp) production slot1. After click swap.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vw2f3yme6dfxz9if5x3.png)
c.	After success swap, close the window, click on the URL in the production slot1, i.e. https://project10webapp.azurewebsites.net/
Based on the pictures below, the URL of the web app “Project10WebApp” in the production slot1, has successfully swapped the web content project10webapp-staging of staging slot to production slot. The name “JOSEPH OYEWALE” has changed to the name “JESSE TESTIMONY”.
NOTE: same URL but content has change using the swapping tool of deployment slot

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe2uv6lpx0eihjyw4h0u.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8rcsldpau6gatcogckk.png)

With the blog post, I have successfully deployed and swapped my tested and upgraded web content into the slot where users can have access to.