Hosting a Website in Azure and Connecting to a Database
Published: 2023-05-21 19:58:53

Hi guys! Remember when we built/created our static web app? This time, we are going to deploy a live website in Azure and connect it to a Database. 

If you missed the Static web app article, don't worry. You can find it [here](https://dev.to/braimohvictoria/create-your-first-microsoft-azure-static-web-app-372c).

Let's go...

To deploy our live website, we need to create a new folder for our project on VsCode. Then, choose a Github repository and Git clone it on VsCode.

Step 1: Copy the url to the git you want to use.
Step 2: Open your vs-code terminal and run this command: git clone space your-git-url

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggpfbznch3fvxdflx01u.png)
Step 3 Cd into the folder you created on VsCode. Cd (name of the folder)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n4n6g0f0vowng0g3y6t.png)
Step 4: Open your Gitbash in the terminal or download gitbash if you do not already have it installed. 
Step 5: Open your gitbash, make sure you are using gitbash from your vscode terminal or directly from the gitbash app.


we have to install Node.js because git ignores node modules, if you run: 

```
npm run start

```
you will get an error saying `sh: 1: react-scripts: not found  `, to solve this problem run the following command


```
npm install
```


Now, run `npm run start` to run the app on your localhost.

You should see whatever you coded on your react-app as a link like `https://localhost:3000`. Copy the link and paste on your browser. This is to confirm that the process was successful and the website is live. The url should look like the image below while showing the website you want to host in Azure.


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

The next step is to build it by running the following command:

```
npm run build
```

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

The next phase is to create our App service on Azure. Follow the steps in the Static Web App article and when it gets to the Instance details, choose code, Node js and your operating system. If you are a beginner, select the free version of the pricing plan.

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

No need to authorize Github in the deployment stage. Disable it, Review and Create the web app.

Now, let's create our Database and Server.

Step 1: Search for Database, fill in the details, change the compute server from standard to basic, select an existing database server if you do not already have one and click create. I created a new server. See below:


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx1ztitnjl8ippn1oh66.png)
You should see your pricing details as shown below. Go to networking and give the appropriate access. Review and create.

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

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

The next phase is the connection process.
Step 1: Go back to your newly created web app and select Advanced tools. Click Go.

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

Step 2: A new environment will open titled Kudu. Click on the Debug console.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3bb2c7g2826aqexbipy.png)
Step 3: Click on"cmd", site and then wwwroot. 

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

Remember the name of the folder you created on VsCode? Find it in your file manager and open it.


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

Step 4: Open the build folder, Drag all the files there and paste it in your wwwroot.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz5ztbvod6cew5w95w4d.png)
Go back to your web app and click browse. You should see the name of your webapp.azure.net.

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

The final stage is the connection stage.

Let's connect the web app to the database.

Step 1: Open the database and navigate to the connection strings.

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

Step 2: Go to ODBC and Copy the link. ODBC is for nodejs.


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

Step 3: Open your app service and go to configuration.


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

Step 4: Click on Application Settings and click New Application Setting

Step 5: Select a new name and in the value, paste the ODBC link you copied.


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

Step 6: Click ok and save. 

Go back to your overview and check. There you go!


Hope this guide was helpful.