CI/CD with Github for Flutter Web to CPanel

Introduction

Flutter web can be used to make responsive beautiful web applications using canvas kit and html renderer. Flutter provides the best experience for a web application but deploying and hosting it can sometimes be a hectic way to make and host it again and again. For this CI/CD can be used with the help of GitHub actions to make our life easier.

Requirement Install Flutter on your operating system. Installation Download your preferred IDE such as VS Code or Android Studio Run the code in the terminal if all the required files and components are installed on your device. flutter doctor -v

Create a new project using the command line in the terminal by creating an empty folder in your desired path flutter create cicdflutterdemo

You can use Android Studio to directly create a project as well.

This will run the command automatically and create an empty project for you.

Create a git repository in your project git init git add. git commit -m "initial commit git remote add origin [copied web address] git push origin main

To create a repository inside Github to get the web address to push your project to.

After that go to your CPanel login

Go to FTP accounts

Create an FTP credential

10 . After creating an FTP account go below you will see your FTP client below and click on configure client

FTP Username: your_id_in_cpanel@demo.com 
FTP server: ftp.demo.com 
FTP & explicit FTPS port: 21

This will pop up. Copy your password and the setting that was generated.

Next, go to your GitHub repository Go to GitHub action Image description

Create a new workflow file

Copy this text to your workflow

name: Dummy Workflow

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
jobs:
  job1:
    name: test app and build web-release
    runs-on: macos-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - uses: actions/setup-java@v3
        with:
          distribution: 'zulu'
          java-version: "12.x"
          cache: gradle

      - name: Install Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.10.5'
          channel: 'stable'
          cache: true

      - name: Install dependencies
        run: flutter pub get

      - name: Start Web Release Build
        run: flutter build web --web-renderer canvaskit  --release

      - name: Upload Web Build Files
        uses: actions/upload-artifact@v2
        with:
          name: web-release
          path: ./build/web
  job2:
    name: trasnfer web-release to server
    needs : job1
    runs-on: macos-latest
    steps:
      - name: Download Web Release
        uses: actions/download-artifact@v2
        with:
          name: web-release

      - name: Sync Files TO Demo CPANEL
        uses: SamKirkland/FTP-Deploy-Action@4.1.0
        with:
          server: ${{ secrets.SERVER_ID }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          server-dir: /

CI/CD example

After that push your code to your repo You can manage the push and pull to which branch you want to use CI/CD In the example it is set to main. You can set it to other branches as well to activate it. And we are done.

Conclusion

So through this simple process, we can easily use CI/CD with the help of Github action release our website made by Flutter through IDE directly.

So what's your way of hosting the website?