DEV Community: Teerasej Jiraphatchandej

Flutter's workaround for blank web page with web release

Teerasej Jiraphatchandej — Tue, 03 May 2022 13:57:57 +0000

If you finished your Flutter web project and uploaded your excellent HTML and related file to your hosting.

Then boom! Nothing appears, just a white shiny web page. you may need the following workaround

A. Release with HTML web renderer

Flutter team mentioned it in document that with default selection. Flutter will choose a web renderer according to the environment:

HTML for Mobile browser
Canvaskit for Desktop browser

In some condition, Canvaskit will not render your production-ready web application. But HTML one will do.

Try the following build command:

flutter build web --web-renderer html

This command will force your release to use HTML renderer instead of Canvaskit.

B. Remove that base element

I found out in this repository's issue where people mention that by removing (or yes, comment it out) <base> element in index.html will do the trick.

<base href="/">

Any better way?

I know that these workarounds might not be the best. But if you found a better solution to solve this problem. Please feel free to comment below.

Step-by-step to publish your flutter project as Android App Bundle

Teerasej Jiraphatchandej — Thu, 28 Apr 2022 16:28:46 +0000

The Flutter's official instruction is suitable for a start. But I want to note my step-by-step here. So you might not need to guess about the file's path.

1. Create your Keystore

Keystore is the file you should have to sign your AAB file.

Run the following command in Terminal at your project's root directory.

keytool -genkey -v -keystore upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

After entering this command, you will be asked to fill key's password and some information.

Please pay attention to the following options:

-keystore is the file's name and where it will be created. upload-keystore.jks will be made at your project's root directory. The original instruction: ~/upload-keystore.jks will put your Keystore file in the user's root directory.
-alias will be your key's alias name. You will need to use it later.

2. Create a reference file to Keystore

Create a file named key.properties at [project root]/android/

storePassword=<password from previous step>
keyPassword=<password from previous step>
keyAlias=upload
storeFile=../../upload-keystore.jks

if you create with different key alias, please specify it in keyAlias.
For storeFile if you choose to put Keystore file at the root of your Flutter's project directory. This file's path would work.

3. Modify app/build.gradle

Now, we have to modify build.gradle. So Flutter can use it to sign and generate an AAB file.

Load keystore's properties

Open [project]/android/app/build.gradle, look for android block, and put following code at the top of its.

   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

   android {
         ...
   }

Replace buildTypes block

find buildTypes block. it should look like the below:

   buildTypes {
       release {
           // TODO: Add your own signing config for the release build.
           // Signing with the debug keys for now,
           // so `flutter run --release` works.
           signingConfig signingConfigs.debug
       }
   }

you have to replace it with following code:

   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

4. Let's sign and build the release version

After you modified build.gradle file, you should run:

flutter clean

So you can try to build the AAB file:

flutter build appbundle

If the build has been successful, you will see the AAB's file path on the Terminal's console.

Easy way to delete your image from docker hub

Teerasej Jiraphatchandej — Thu, 28 Apr 2022 01:34:05 +0000

Free and easy, you can push your local docker image to the docker hub.

But sometimes, we make mistakes by pushing an unnecessary image to the public or realizing that the image should not be there anymore.

Let's remove it from the docker hub!

1. Go to your repository on docker hub

This is where you will see the Manage repository button. Click it.

2. Go to Setting

You are in the dashboard, but we should look for the Setting tab and click it.

3. Click that delete button

So far, so good. You will see the Delete Repository section at the bottom of this section. There is a nice delete button here. Click it and say goodbye to your image.

Step-by-step to turn your fresh node project to use typescript

Teerasej Jiraphatchandej — Tue, 26 Apr 2022 14:09:53 +0000

OK, you fall in love with typescript, and now you really want to use it in your new express project.

A common approach in using typescript in node project

Start the new node project by running this command in your directory via the terminal.

1. Create a new node project, with a package.json file

npm init

This will generate a new package.json file. Let me show mine:

{
  "name": "friend-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Teerasej Jiraphatchandej",
  "license": "ISC"
}

2. Add packages for typescript

So we want to set up this project for us to use typescript in development. We add 2 packages as devDependencies:

npm i -D @types/node
npm i -D typescript

Here we go. We have package.json file similar to the one below:

{
  "name": "friend-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Teerasej Jiraphatchandej",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.29",
    "typescript": "^4.6.3"
  },
}

3. Add tsconfig.json

OK, let's create another file: tsconfig.json at the root of the project's directory. This file will tell how would typescript's compiler work:

{
    "compilerOptions": {
      "module": "commonjs",
      "esModuleInterop": true,
      "target": "es6",
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "dist"
    },
    "lib": ["es2015"]
}

5. Let compile and run

from this point, you can use the following command in the terminal to compile all tsc files in project into /dist directory (as you set it up in tsconfig.json: outDir)

tsc

and you can run your compiled code with

node dist/<file name>.js

6. Done, but you can add more ease

Execute 2 commands repeatedly will take out our energy. You can use the script section in package.json to create a shortcut

{
  ...
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

After save the package.json file, you can compile and run your project with one simple command:

npm run start