DEV Community: BraimohVictoria

Hosting a Website in Azure and Connecting to a Database

BraimohVictoria — Sun, 21 May 2023 19:58:53 +0000

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.

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

Step 3 Cd into the folder you created on VsCode. Cd (name of the folder)

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.

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

npm run build

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.

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:

You should see your pricing details as shown below. Go to networking and give the appropriate access. Review and create.

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

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

Step 3: Click on"cmd", site and then wwwroot.

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

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

Go back to your web app and click browse. You should see the name of your webapp.azure.net.

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.

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

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

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.

Step 6: Click ok and save.

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

Hope this guide was helpful.

Create Your First Microsoft Azure Static Web App

BraimohVictoria — Fri, 14 Apr 2023 18:20:46 +0000

Let's create our first Azure Static Web App that can allow us deploy, host or build static web applications and automatically publish to the web!

In this article, I’ll show you two things:

The first is what happens when you create a web app without any index.html file and the second is what happens when an index.html file is contained in the web app.

Note: An index.html file is required to create a web app. Your web app must contain at least one index.html file to properly deploy.

Creating Without an Index.html File

Step 1: Login to your Azure account or create one here and search for "Azure web service". Choose App Services.

Step 2: Click on Create app service.

Step 3: Fill in the details. Choose a unique name. Select static web app and click on create.

Step 4: Choose a unique name for your static web app and select the free plan.
Proceed to choose a region close to you. Select any deployment source. Let's use Github.

Step 5: Authorize from Github.

Step 6: Your Github details would be automatically imported. Just click the spaces to select them.
You can create a new Github repository and branch if you do not have any.

Step 7: Select custom as the build presets. App and Output location should be (/src). Leave the API blank. Review an Create.

Step 8: Allow the deployment process to be complete and go to resource.

Step 9: This is how your resource page should look. Click on the URL.

Step 10: Tada! Our Azure static web app is live and waiting for content. This is because there is no index.html file therefore, there is no content to be seen.

To enable your web app to display content, you need to add a GitHub repository with at least one index.html file.

To do this, we need to create one. Search for “Microsoft Azure documentation” on your browser. This will give you a template to create a GitHub repository containing an index.html file. Enter a repository name and create.

Here, your GitHub repository has been created and you can see an index.html file and a ccs file under the Code section.

Now, choose the new repository containing the index.html file you just created on Github and proceed.

Click on the URL or browse section as seen in the image below:

Our web app is now displaying content. This is what was contained in the index.html file we created.

You can edit your codes or deploy real websites on your static web app. This is just a demo and I hope you enjoyed every bit of this article.

Always remember to delete this resource after practicing so you don't accrue unnecessary bills. See you in the next article!

Creating an S3 Bucket in AWS: (A Step by Step Guide)

BraimohVictoria — Mon, 10 Apr 2023 21:13:52 +0000

Amazon S3 is a storage service that enables you share and retrieve your pictures, videos, documents, files or other data in the cloud.

Creating an S3 storage commonly known as a bucket is a very simple process. I'll show you how.

Step 1: Log into your Amazon account and search for S3 in the search bar. Click on the first item.

Step 2: Go on to select Create Bucket and fill in the details in the page that follows. Your selected bucket name should be unique and without an uppercase letter. Then proceed to choose a region closest to you.

Step 3: Object Ownership: Enable your ACL. This is your Access Control List. It gives access to other users to view your data when granted the necessary permissions.
Next, unblock your public access and acknowledge. This is also to enable other users access your picture or video on the browser.

Step 4: It's advisable to add a tag if it's a business account. This enables you add more information and also track your billings. We won't be adding tags, so, leave the other settings as default and go on to create your bucket. You will get a success notification.

Step 5: Your bucket has been successfully created. Open your newly created bucket and click on upload to add your files. Select your desired picture or file and upload. Again, a success notification should pop up.

Step 6: Go back to your newly created bucket and open the file or picture you just uploaded.

Step 7: Go to the image permissions. Edit the ACL list to "read" for other users. This means they'll be able to read or see your file only and unable to make changes or edit them. Edit and save changes.

Step 8: As usual, a success notification will pop up. Now, go to the image's properties and click on the object url. This should automatically take you to view your file or picture or whatever you uploaded in the cloud.

Hold on...Before we go, remember it is always necessary to clear up your resources when done and when not in use. To delete your uploaded file and bucket, click on the file first and click delete. Type in permanently delete and confirm. Do the same thing for the bucket.

Now, we are back here like we never created a storage.!

If you encounter any issue(s), feel free to reach out.

How to Create a Virtual Machine (EC2) in AWS on Windows 10

BraimohVictoria — Fri, 07 Apr 2023 15:52:40 +0000

AWS EC2 (Elastic Compute 2) is one of the numerous services run and offered by Amazon. It is an essential part of modern business operations.

Whether you're here for some research, study or other purposes, this article will teach and show you how to create an Amazon Web Service (AWS) EC2 or a virtual machine on Microsoft Windows 10 and also how to terminate it to avoid unnecessary billing.

For better understanding, the article will be divided into three parts.

Part A: Creating an EC2 Instance
Part B: Connecting the Instance and
Part C: Terminating the EC2 Instance.

Let's head right in!

Part A
How to Create an EC2 Instance

Step 1. The first step before any other process is to create and Login to your AWS account. You can create a free one here if you do not already have an account and then follow the prompt.

Step 2. Navigate to the AWS Management Console or simply search for EC2 in the search bar and open the dashboard.

Step 3. The image below is what your dashboard should look like. You can see you have 0 instances running because you haven't created any. Now, click on Launch Instance.

Step 4: You need to choose a name for the instance you want to create. I chose mine as (Instance). You can pick your name or any other preferred word. Also, at the right hand side, you can choose the number of instances you want to create. Now, we are creating just 1.

Step 5: This step requires picking your AMI (Amazon Machine Image). This contains your operating system. (Linux, Ubuntu, Windows, Mac etc). We are creating a virtual machine on Windows 10, so, select Microsoft Windows.

Step 6: This is a very important step. You need to create a unique key pair for your instance. You will need this to login later on. Click on "Create new key pair"

Step 7: Choose a unique name for your key pair (A name that has not been used before). I chose mine as Vick. I also selected the .pem file because the .ppk file could not decrypt the password. Now, click on Create Key Pair.

Step 8: Here, the Key Pair has been created and automatically downloaded. (Take a look at the file highlighted in red below the screen)

Step 9: You will get a notification that your instance has been launched successfully.

Note: These are the necessary steps in this part. You can choose to configure other settings and the security group to your preference or just leave them as they are.

Part B
How to Connect an EC2 Instance

This part involves the necessary steps needed to connect your instance or virtual machine after it has been created.

Step 1: Go back to your instance. Click on it and select Connect at the top right of the screen. (Marked in red)

Step 2: Connect using RDP. Download the Remote Desktop File (RDP File). You should see it downloaded below your screen (Marked in red). Now, click on get password.

Step 3: To get the login password, you need the key pair that was created when you launched your instance. Remember it was “Vick.pem”. Click on “upload private key pair”. Select the .pem file and open.

Step 4: The image below is what your private key contents should look like. It MUST begin with “——-BEGIN RSA PRIVATE KEY——-”. Then, click on Decrypt password.

Step 5: Now, these are your login details. The Public DNS, Username and password. Copy them out and save somewhere.

Step 6: Click on the RDP file that was downloaded. It is marked in red below the screen

Step 7: This is what your Remote Desktop Connection should look like. Click on connect

Step 8: Enter the password that you saved somewhere and click ok.

Step 9: Here we go! The virtual machine has been connected successfully. Click the “x” button to leave the interface.

Part C
How to Terminate an EC2 Instance

This part involves the steps needed to terminate the instance in order to avoid unnecessary billing.

Step 1: Go back to your EC2 Dashboard and click Instances. You should have 1 instance running now.

Step 2: Select the instance and click “Instance State”. (Marked in red). From the drop down options, choose terminate instance.

Step 3: Confirm you want to terminate.

Step 4: The instance status will change from “running” to “shutting down”.

Step 5: Now, the instance status will change again from “shutting down” to “terminated”.

Congratulations! You just created, connected and terminated an AWS EC2 or Virtual Machine on Windows 10.

I hope this article was the perfect guide. I also hope it helped. Feel free to leave your questions and/or comments (if any). I'll be glad to help further.