DEV Community: Beauty Akinsete

Deploying a 3-tier application to Azure App Service with Azure SQL Database

Beauty Akinsete — Sun, 21 May 2023 20:20:37 +0000

Prerequisites

First, you will need to install Node.js and npm on your local computer.
You can get these tools from the official Node.js website if you do not already have them.
Additionally, an Azure account is required. By registering on the Azure website, you can create an Azure account if you do not already have one. Azure.
You will be prepared to move on with hosting your React app in Azure after these conditions are met.

I will be showing you two methods to get your react App

creating and building react app
cloning a react app

1. Create and Build React App

As the first step, you need to create a React app. Open a terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

npx create-react-app my-app

This will create a new React project called “my-app” in the current directory. After creating a new React project. Navigate to the project directory by running the following command:

cd my-app

npm start

This will start the development server and open your React app in a web browser at

http://localhost:3000

Then you can see the initial view of your react app like this.

Default React application browser view

You can make changes to your app and see the changes in real-time. because this post is about hosting a React application.

Once you’re happy with your React app. you can build it for production by running the following command:

npm run build

This will create a build folder containing all the necessary files for deployment.
Now that you have created and built your React app, you’re ready to move on to hosting it in Azure.

2. cloning a react app

copy the url to the git you want to use.

open your vs-code terminal and run this command

git clone <your-git-url>

then cd in to folder of the new repo you cloned

cd <name-of-repo>

afterwards download gitbash, open your gitbash, make sure you are using gitbash from your vscode terminal or directly from the gitbash app.
check the picture to find your gitbash using vscode:

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

if you run npm run start and you fid this error 'react-scripts' is not recognized as an internal or external command
run the following to fix it

npm install react-scripts --save

afterwards run npm run start to run the react app on your localhost.

you should see whatever you coded on your react-app, it might give you a link like https://localhost:3000 copy that and paste on your browser or it opens it on your browser for you automatically after its successful

Once you’re happy with your React app. you can build it for production by running the following command:

npm run build

This will create a build folder containing all the necessary files for deployment. Now that you have created and built your React app, you’re ready to move on to hosting it in Azure.

Deploy React app In Azure App Service

The next step is to sign in to your Azure account. If you don’t already have an Azure account, you can get one by signing up on the Azure website. After that, activate the free tier by following the instructions. Once you signed in, you will be able to see the Azure dashboard like this.

On the Azure dashboard, click on the App Service, and then click on Create. Then you will be able to see the following form for creating the web app.

Fill out the above form following the following instructions.

Subscription — If you are running with a free tier plan, select your free subscription.
Resource Group — Create a new Resource Group for this app and select that resource group for this field.

Name — Add the name for this app service after deployment has to use this name in the link to access this service. the link is in this type {yourAppServiceName}.azurewebsites.net
Publish — Select the code radio button for this because we are going to host our application as a code.
Runtime Stack — Select the node environment in the dropdown list. to check the node verse of your react, go to your vscode terminal of your react folder, run this code to view the version:

node --version

Operating System — Choose the operating system as Windows.
Region — Select the closest region to you or leave it at default.

App Service Plan — Leave App Service Plan as default. Or you can select the resources according to your requirements and specifications for the service.
Then click on “Review + Create”, and when your review is complete, click on “Create”

After clicking on “Create” it brings a few minutes to complete the deployment. After that, you will able to a view like this with the message “Your deployment is complete”.

Then go to the resource by clicking “Go to Resource”. By clicking go to resource, it will redirect to the following window.

By opening the URL in a new tab, you will able to see a view like the following. Because until now, we not host our web application. It shows the initial view of the App service.

Let us upload our React application to this service now. Within the app service, We must first navigate to the "Advance Tools" section of the newly built app service. Click on "Advanced Tools" in the side menu search bar to find it. Once you select "Go," you will see a view similar to the one below.

As the next step, you can see this window. After that go to “CMD” in the navigation bar under Debug console.

Then you can see a view like this. After that go to the directory “site” and then go to the “wwwroot” folder.

also

Then you have to directly upload the files inside the build folder of your React application to the “wwwroot” folder. It will take some time to upload.

you can locate the "build" folder from your file explorer then just drag it to the "wwwroot" folder.

here

After uploading the files inside the build folder, go to the overview, URL on your resource page or App service. You will able to see deployed react application. The link is in this type {yourAppServiceName}.azurewebsites.net or you click on the "Browse".

after the url opens you should see what was in your localhost:3000 earlier.

Azure offers a simple and effective platform for hosting React apps. You may quickly deploy your React application to Microsoft Azure by performing this step.

Now connecting your Azure SQL Database to your App service

Create a new Azure SQL Database:
In the Azure Portal, search for "Azure SQL Database."

Click on "Azure SQL Database" from the search results and then click on the "Create" button.

select the same resource group with your app service

(I HOPE YOU REMEMBER), if you don't, navigate back to home, you will see the resource you created check the name and follow this azure sql steps again

Provide a name for your database, create a new server,

provide a name for your server and a location.

for the authentication session select "SQL Authentication", then input your server admin login and password. Then click "ok"

for the compute + storage click on "configure database" to edit it based on what you want and cost.

for me i selected basic for the cheapest:

for backup storage redundancy, select Geo-redundancy backup storage.

click on Next:Networking, connectivity method click on "public access"

also

Click "Review + create" and then "Create" to create the Azure SQL Database.

Obtain connection string:
In the Azure Portal, navigate to your Azure SQL Database.

Under the "Connection strings" section, copy the connection string for ADO.NET, JDBC, ODBC, PHP or GO, depending on your preferred programming language and database driver for me I use ODBC for Node.js.

Connect your app service with the database
In the Azure Portal, navigate to your app service.

Under the "Settings" section, click on "Configuration" and then on "Application settings."

Add a new application setting with the name "ConnectionStrings:DefaultConnection" (or any name you prefer) and paste the connection string you obtained in the previous step as the value.

you can test your app by accessing the URL of your app service. It should now be connected to the Azure SQL Database.

That's it! You have successfully built an app service and connected it with a database using Azure. Remember to properly secure your database and implement appropriate access controls for your app service and database.

Creating a Static Web App with Microsoft Azure

Beauty Akinsete — Sat, 15 Apr 2023 21:27:53 +0000

Are you looking to build a website or web application that doesn't require a server-side language like PHP or Node.js? A static web app may be the perfect solution for you. A static web app is a website or web application that consists of HTML, CSS, and JavaScript files that are served directly to the user's browser without requiring server-side processing. In this article, we'll walk through the process of creating a static web app using Microsoft Azure.

Step 1: Create an Azure Account

To create a static web app using Microsoft Azure, you'll first need to create an Azure account. You can sign up for a free trial account, which will give you access to a limited set of Azure services for 12 months.

Step 2: Create a Resource Group & Create a Static Web App

After creating an Azure account, the next step is to create a resource group. A resource group is a container for Azure resources, such as virtual machines, databases, and web apps.
To create a resource group, navigate to the Azure portal and click on "Resource groups" in the left-hand menu. Then click "Add" and follow the prompts to create a new resource group.

In the left-hand menu, click on "Create a resource".
In the search bar, type "Static Web App" and select the option from the list.

Click on the "Create" button to start the creation process.

In the "Basics" tab, provide a name for your web app and select the subscription, resource group, and region.

Step 3: Deploy Your Static Web App

In the "Build" tab, connect your app to a code repository (GitHub, Azure DevOps, Bitbucket), select a branch, and configure the build settings.

In the "Review + create" tab, review your settings and click on the "Create" button to create your app.

After creating your static web app, the next step is to deploy your website or web application files. You can deploy your files using either GitHub or Azure DevOps. To deploy using GitHub, you'll need to connect your GitHub account to your static web app and select the repository that contains your website or web application files. To deploy using Azure DevOps, you'll need to create a pipeline that deploys your website or web application files.

Step 4: Test Your Static Web App

After deploying your website or web application files, you can test your static web app by navigating to the URL of the app, which should be displayed in the Azure portal. If everything is working correctly, you should see your website or web application displayed in your browser.

Step 5: Delete Your Static Web App (very Important)

To avoid running up costs, it's important to delete your static web app when you no longer need it. To delete your static web app, navigate to the Azure portal and select the app you want to delete. Then click on "Delete" and follow the prompts to delete the app and associated resources.

Creating a static web app using Microsoft Azure is a quick and easy way to build a website or web application without requiring server-side processing. By following these simple steps, you can create, deploy, and test your own static web app in no time.

A Beginner's Guide to Amazon S3 Permissions and Access Control

Beauty Akinsete — Tue, 04 Apr 2023 13:57:11 +0000

Sign in to the AWS Management Console at [https://console.aws.amazon.com] using your AWS account credentials.
Navigate to the S3 Dashboard by selecting S3 from the list of services.

Click the "Create Bucket" button.

In the "Bucket Name and Region" section, enter a name for your bucket. Bucket name must be globally unique and must not contain spaces or uppercase letters, so you may need to choose a different name if the name you select is already taken.
Choose the region where you want your bucket to be located. Selecting a region that's closest to your users can help minimize latency and improve performance.

Configure your bucket options. Here, you can choose settings such as versioning, encryption, and access control. You can also add tags to your bucket to help organize it.
Click the "Create Bucket" button to create your bucket.

Congratulations! You've now created an S3 bucket in AWS. You can use your bucket to store objects such as files, images, and videos. You can also configure your bucket to host static websites or serve as a backend for your applications.

Now making whatever you uploaded (e.g picture) public

Select the bucket that contains the object you want to make public.
Find the object in the list and click on it to open its details page.
Click the "Permissions" tab in the object details page and Under the "Edit public access" section, click the "Edit" button and save changes afterwards.

Under "permission", the "edit object ownership" section, click the "ALC enabled" button.

Under the "Access for other AWS accounts" section, click the "Edit" button.
Select "Grant public read access to this object(s)" and click "Save changes".

To test if the object is now public and readable, copy the URL of the object again and paste it into a web browser. The object should now be visible.

Note: Making an object public means that anyone with the object's URL can view it. Be careful when making objects public and ensure that you only make objects public that you want to be accessible to anyone. Also, keep in mind that public objects may be subject to web crawlers and search engines, and may be cached in different locations around the world.

Terminating an S3 bucket

Terminating an S3 bucket means deleting it completely. This is useful if you no longer need the bucket, or if you want to start fresh with a new bucket. However, it's important to note that once a bucket is deleted, all objects stored within the bucket are permanently deleted and cannot be recovered.

Select the bucket you want to terminate.
Click the "Delete bucket" button.

In the confirmation dialog box, type the name of the bucket to confirm that you want to delete it.

Click "Confirm" to delete the bucket.

After confirming the deletion, AWS will immediately begin the process of deleting the bucket and all of its contents. It may take some time to complete, depending on the size of the bucket and the number of objects it contains.

It's important to note that terminating a bucket will not only delete all of the objects stored within the bucket, but will also delete any associated metadata, permissions, and access control policies. Be sure to carefully review the contents of the bucket before terminating it, and make sure that you have backups of any data that you need to keep.

How to Create a Microsoft Windows Instance on AWS: A Step-by-Step Guide

Beauty Akinsete — Mon, 03 Apr 2023 11:10:36 +0000

Sign in to the AWS Management Console at [https://console.aws.amazon.com] using your AWS account credentials.
Navigate to the EC2 Dashboard by selecting EC2 from the list of services.
Click on the "Launch Instance" button.
Select the "Microsoft Windows Server" AMI you want to use for your instance. You can choose from a variety of versions and editions of Windows Server.

Choose an Instance Type. This specifies the hardware configuration of your virtual machine, such as the amount of CPU, memory, and storage.
Configure your instance details. Here you can specify the number of instances you want to launch, networking settings, and storage options.
Create or select a key pair. A key pair consists of a public key and a private key. You'll need this key pair to securely connect to your instance.
Launch your instance. Once you've reviewed your settings and created a key pair, click the "Launch" button to launch your instance.
Connect to your Windows instance using Remote Desktop Protocol (RDP). Download the Remote Desktop client to connect to your Windows instance. You can download the Remote Desktop client from the Microsoft website, or you can use the Remote Desktop client built into your operating system.

upload your key-pair that was downloaded to your laptop.

use an RDP client to connect to the instance using the Administrator account and the password you specified during the launch process.
If you're using a Windows operating system, you can find the Remote Desktop client by searching for "Remote Desktop" in the start menu. If you're using a Mac, you can download the Microsoft Remote Desktop app from the App Store.
Once you've downloaded and installed the Remote Desktop client, you can use it to connect to your Windows instance using the public IP address and Administrator account credentials you specified during the launch process.

it's important to remember to terminate your instances when you're done using them in order to avoid incurring unnecessary charges. Once you terminate your instance, it will be deleted and you will no longer be charged for it. Keep in mind that any data stored on the instance's EBS volume will be lost, so make sure to back up any important data before terminating your instance.