SPLTECH AI

Flutter WebApp with GCP #1

Photo by Joshua Reddekopp on Unsplash

This is a series of Google Cloud Platform study notes:

Domain, SSL, and Google Site (#1)

Host Flutter WebApp using Google AppEngine (#2)

Deploy Flutter WebApp using Google Cloud Run (#3)

Host Flutter WebApp using Google Compute Engine (#4)

I am going to use various tools from GCP and some might be overkill for a personal website, but the purpose is to experiment rather than solutionizing.

Buy A Domain

First of all, you don’t need a domain name before writing the first line of the code, but I figured if I invest in something, it will be a good reason to keep me going till I finish building the website. If you simply search for “buy a domain name”, you will probably get lost finding the best deal. To make my life easier, I used Google domain to keep everything under one roof.

* a side note: I had no idea of Google selling domain names up till now

https://domains.google/

Here you can search for any domain name with more than 300 endings, the purchasing process is straightforward, and after making the payment, the domain name is yours for one year. Remember though, the popular domain name gets sold quickly, once I found an available name of www.cloud.cloud, it was gone before I had the chance to add it to my shopping cart 😟

Please pay attention to the “More secure” banner, we will be discussing it in the next topic.

What is SSL 🔐

  • SSL is a secure protocol on top of HTTP to provide security
  • HTTPS is a secure extension of HTTP, it is basically an HTTP connection that delivers encrypted data
  • Google has announced that they will block any insecure content from 2020 with chrome browser
  • “More Secure” banner means you need an SSL certificate before you can launch a website
  • An SSL certificate acts as 3rd party verification for a website’s security, and users will recognize that your site is safe, when they see a padlock and your URL starts with https://
  • The process of adding SSL certificate is: buy -> activate -> install -> manage it

We will skip adding the certificate for now, but you can read more to learn how to use HTTPS on your domain. I will come back to the SSL topic in the next article on website hosting.

First draft using Google Site

At this stage, you’d be the owner of a domain name, would you like to continue having the first try at building a site? There are so many choices for site templates, and of course, to keep everything under one roof, I am going to do a sample demo using Google Site.

The Google site page has a simple layout and it is easy to navigate, it almost feels like if you are creating a Google doc or a Google slides. Decorate the site as you wish, but remember our goal is to create a WebApp using Flutter 🥳.

When you are satisfied with your site layout, click “Publish” to bind your site with your domain. Of course, you cannot really publish the site because we haven’t set up the host yet.

Although the site is connected to your domain, no one can actually access it yet. You might have noticed that your domain name has already connected to the site, if not, choose the setup custom domain option to connect it.

☀️ 🌤 ⛅️ 🌥 ☁️ NEXT (and in no particular order) 🌦 🌧 ⛈ 🌩 🌨

Posted

in

,

by

Teresa Wu

Tags: