Want a simple, secure, and efficient website hosting ? Try HUAWEI Cloud Hosting Kit

Published in

Huawei Developers

9 min readAug 14, 2020

HUAWEI AppGallery Connect provides the serverless Cloud Hosting service that gives our users secure, rapid access to hosted web apps and static web pages.

Cloud Hosting makes web page deployment easier. We can focus on the UI interaction, UI layout design, and service logic, and do not need to pay attention to security configurations (such as domain name application and certificate management) and page distribution. In this way, we can build a highly secure and fast-accessed web page.

What is cloud hosting?

Cloud hosting puts our website on a group of connected servers at the same time. So, all the data is stored in different places at once, giving our site greater security and reliability than if it was just sitting on one server.

How does it work?

At the core of a cloud hosting setup is a network of physical servers, with virtualized servers running on top of them. With this setup we can draw from a near-infinite supply of server resources and scale our site as our needs grow.

With Cloud Hosting integrated, we can manage multiple sites under a project. Each site can use the domain name provided by Cloud Hosting. In addition, multi-version management is also available for each site.

Site: A site is a carrier for you to host static web pages, helping you manage and maintain web page content of all versions.
Version: You can manage hosted static web pages by version to implement updates.

Today in this article we will learn how to host a website using Huawei Cloud Hosting.

Prerequisite

Must have a Huawei Developer Account
Hands on experience in HTML, CSS, JavaScript.

Things Need To Be Done

Create an app in the Huawei app gallery connect.
Provide storage location in AGC app.
Enable Cloud Hosting setting in Manage APIs section.

What we need?

We need to create a static website, since the current version of cloud hosting does not support dynamic website. But in this static website we will be able call APIs using JavaScript.

Let’s Create

The website will contain information about how Corona Virus is effecting the world and what precaution we need to avoid this virus.

index.html

The index.html file in the root directory of the hosting package is used as the site’s default home page.

<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/css/styles.css" rel="stylesheet" /></head><body><center><div id="container" style="white-space:nowrap"><div id="image" style="display:inline;"><img src="/images/virus.png" /></div><div id="texts" style="display:inline; white-space:nowrap; font-size: 25px; font-weight: bold;">COVID 19 INFORMATION</div></div></center><button class="tablink" onclick="openPage('Global', this, 'red')" id="defaultOpen"style="background-image: url(/images/globalss.png);">Global</button><button class="tablink" onclick="openPage('Countries', this, 'green')"style="background-image: url(/images/flags.png);">Countries</button><button class="tablink" onclick="openPage('Precaution', this, 'orange')"style="background-image: url(/images/maskss.png);">Precaution</button><button class="tablink" onclick="openPage('About', this, 'orange')"style="background-image: url(/images/abouts.png);">About</button><div id="Global" class="tabcontent"><div id="root"></div><script src="/js/global.js"></script></div><div id="Countries" class="tabcontent"><div id="Countries"></div><script src="/js/countries.js"></script></div><div id="Precaution" class="tabcontent"><img src="/images/precautionimg.png" alt="" style="width: 100%;" /></div><div id="About" class="tabcontent"><center><span>Get in touch, or swing by for a cup of coffee.<br><a href="https://www.reddit.com/user/Sanghati">Check Out My Reddit Profile</a><br><a href="https://forums.developer.huawei.com/forumPortal/en/home">To Know More About HMS Core Check OutHuawei Developer Forum</a></span></center></div><script>function openPage(pageName, elmnt, color) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tablink");for (i = 0; i < tablinks.length; i++) {tablinks[i].style.backgroundColor = "";}document.getElementById(pageName).style.display = "block";elmnt.style.backgroundColor = "#777";}
document.getElementById("defaultOpen").click();</script></body></html>

global.js

This file contains the code of fetching world data of corona virus cases.

const app = document.getElementById('Global');const container = document.createElement('div');container.setAttribute('class', 'container');app.appendChild(container);var request = new XMLHttpRequest();request.open('GET', 'https://coronavirus-19-api.herokuapp.com/all', true);request.onload = function () {var data = JSON.parse(this.response);if (request.status >= 200 && request.status < 400) {// CASES ...const cases = document.createElement('div');cases.setAttribute('class', 'card');const casesH1 = document.createElement('h1');const casesImg = document.createElement('img');casesImg.setAttribute("src", "images/cases.png");casesH1.append(casesImg);const casesH3 = document.createElement('h3');casesH3.textContent = "Coronavirus Active Cases";const casesH4 = document.createElement('h4');casesH4.textContent = data.cases;container.appendChild(cases);cases.appendChild(casesH1);cases.appendChild(casesH3);cases.appendChild(casesH4);// DEATHS...const deaths = document.createElement('div');deaths.setAttribute('class', 'card');const deathsH1 = document.createElement('h1');const deathsImg = document.createElement('img');deathsImg.setAttribute("src", "/images/danger.png");deathsH1.append(deathsImg);const deathsH3 = document.createElement('h3');deathsH3.textContent = "Deaths";const deathsH4 = document.createElement('h4');deathsH4.textContent = data.cases;container.appendChild(deaths);deaths.appendChild(deathsH1);deaths.appendChild(deathsH3);deaths.appendChild(deathsH4);//RECOVERED...const recovered = document.createElement('div');recovered.setAttribute('class', 'card');const recoveredH1 = document.createElement('h1');const recoveredImg = document.createElement('img');recoveredImg.setAttribute("src", "/images/recover.png");recoveredH1.append(recoveredImg);const recoveredH3 = document.createElement('h3');recoveredH3.textContent = "Cured / Discharged";const recoveredH4 = document.createElement('h4');recoveredH4.textContent = data.recovered;container.appendChild(recovered);recovered.appendChild(recoveredH1);recovered.appendChild(recoveredH3);recovered.appendChild(recoveredH4);} else {const errorMessage = document.createElement('marquee');errorMessage.textContent = `Gah, it's not working!`;app.appendChild(errorMessage);}}request.send();

countries.js

This file contains the code of fetching individual country data of corona virus cases.

const countries = document.getElementById('Countries');const contain = document.createElement('div');contain.setAttribute('class', 'container');countries.appendChild(contain);var request = new XMLHttpRequest();request.open('GET', 'https://coronavirus-19-api.herokuapp.com/countries ', true);request.onload = function () {var data = JSON.parse(this.response);if (request.status >= 200 && request.status < 400) {data.forEach(item => {const card = document.createElement('div');card.setAttribute('class', 'cardcountries');const h1 = document.createElement('h1');h1.textContent = item.country;const p = document.createElement('p');var newline = "\r\n";p.textContent = "Cases: " + item.cases + newline+ "Total Test: " + item.totalTests + newline+ "Active: " + item.active + newline+ "Deaths: " + item.deaths + newline+ "Today Cases: " + item.todayCases + newline+ "Today Deaths: " + item.todayDeaths + newline+ "Critical: " + item.critical + newline+ "Recovered: " + item.recovered;contain.appendChild(card);card.appendChild(h1);card.appendChild(p);});} else {const errorMessage = document.createElement('marquee');errorMessage.textContent = `Gah, it's not working!`;countries.appendChild(errorMessage);}}request.send();

styles.css

This contains the style of the web site.

* {box-sizing: border-box}body,html {height: 100%;margin: 0;font-family: Arial;}.tablink {background-color: #555;color: white;float: left;cursor: pointer;font-size: 25px;width: 25%;font-family: cursive;background-repeat: no-repeat;background-position: center left 50px;height: 75px;}.tablink:hover {background-color: #777;}.tabcontent {color: black;display: none;}#root {max-width: 1200px;margin: 0 auto;}h1 {text-align: center;/* padding: 1.5rem 2.5rem; */background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);margin: 0 0 2rem 0;font-size: 1.5rem;color: white;}h3 {text-align: center;font-size: 1.5rem;color: black;}h4 {text-align: center;font-size: 1.5rem;color: black;}p {padding: 0 2.5rem 2.5rem;margin: 0;color: #777;white-space: pre;}.container {flex-wrap: wrap;}.card {margin: 3.9rem;background: white;box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);border-radius: 12px;overflow: auto;transition: all .2s linear;float: left;width: 25%;}.cardcountries{margin:3.9rem;background: white;box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);border-radius: 12px;overflow: auto;transition: all .2s linear;float: left;width: 24.7%;}.card:hover {box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);transform: translate3D(0, -2px, 0);}.cardcountries:hover {box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);transform: translate3D(0, -2px, 0);}@media screen and (min-width: 600px) {.card {flex: 1 1 calc(50% - 2rem);}.cardcountries{flex: 1 1 calc(50% - 2rem);}}@media screen and (min-width: 900px) {.card {flex: 1 1 calc(33% - 2rem);}.cardcountries{flex: 1 1 calc(33% - 2rem);}}.card:nth-child(2n) h1 {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);}.card:nth-child(4n) h1 {background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);}.card:nth-child(5n) h1 {background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);}.cardcountries:nth-child(2n) h1 {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);}.cardcountries:nth-child(4n) h1 {background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);}.cardcountries:nth-child(5n) h1 {background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);}

Folder Structure

Remember, index.html file will not be in any folder. CSS file will be in the CSS folder, JavaScript file will be in the js folder and all images will in the images folder. Kindly keep it that way otherwise hosting will not work.

The Hosting

Now, we will host our website in Huawei cloud hosting. Before the make sure to visit “Things Need To Be Done” section in order you missed something.

STEPS

Enable cloud hosting

This service is not enabled by default, and we need to manually enable Cloud Storage in AppGallery Connect if required. In order to manually enable the service, we need to select the project first in AGC and then go to My Project à Build à Cloud Hosting. The Cloud Storage page is displayed. If it is the first time that we are using Cloud Storage, click Enable now in the upper right corner.

After enabling the cloud storage it will look something like this:

Enter New Site

After Cloud Hosting has been enabled for a project, you can create sites under the project. Up to 36 sites can be created for each project. Click the New Site button as shown below:

Enter the Site Name and Description as shown below:

The site name can contain only digits, letters, and hyphens (-).After a site is created, it is displayed on the site list and is in Released state as shown below:

Website Files into Zip Folder

We need to zip the files. Make sure not to zip the folder but the files.

Creating Version / uploading the website

We can create versions for a site. Up to 100 versions can be created for each site.

After selecting Manage Version, we need to Click New version. In the dialog box that is displayed, click Browse, select the static web page zip file to be uploaded, click Upload, and enter the description. Click OK.

After a version is created, it is displayed on the site version list and is in Releasing state.

Once the version gets released, Click the Domain name and it will open the hosting website in our browser. There we will get our hosting URL.

Note:

Wait for 1 to 2 minutes and click Refresh. If the version status changes to Released, the version is successfully released.
If an earlier version has been released, after the new version is released, the earlier version will be automatically removed.
We can click Delete in the Operation column to delete a version that is not released. A released version cannot be deleted.
Deleted versions cannot be restored. Exercise caution when performing this operation.