Automating Flutter App Web Deployment with DevOps CI/CD on FTP Server

Published in

mabttech

6 min readMay 16, 2023

Building and deploying mobile/web applications can be a complex and time-consuming process. However, with the help of DevOps and CI/CD practices, we can streamline and automate this process, making it more efficient and error-free. In this tutorial, we will explore how to set up a Flutter app deployment pipeline using Vagrant, Jenkins, and FTP.

Flutter web Deployment to FTP server using Jenkins DevOps CI/CD pipeline

Prerequisites

Before we get started, ensure that you have the following prerequisites:

Flutter SDK installed on your local machine (Installation Guide)
Vagrant installed on your local machine (Installation Guide)
Jenkins installed on your local machine (Installation Guide)

Jenkins Guide (update 05-2024 ) : (https://stackoverflow.com/a/74235544/10216101 | https://www.jenkins.io/doc/book/installing/linux/#debianubuntu )

Flutter version & Jenkins Service up and running

passing ifconfig or ip addr show commands to get the Jenkins address

Setting up Vagrant and Jenkins

( Not going to go throught this Step in too much details)

To begin, let's set up Vagrant and Jenkins on your local machine. Follow the steps below:

Download and install Vagrant by referring to the Vagrant installation guide.

2. Next, install Jenkins on your local machine by following the official Jenkins installation guide.

3. Once Jenkins is installed, access the Jenkins web interface by opening a web browser and navigating to http://localhost:8080.

4. Follow the on-screen instructions to complete the Jenkins setup wizard.

5. Install the necessary plugins for the pipeline by going to Manage Jenkins > Manage Plugins > Available and search for and install the following plugins:

Git
Pipeline

6. Once the plugins are installed, restart Jenkins for the changes to take effect.

Downloading Flutter in the Vagrant Machine (CentOS 7 VM)

Now, let’s download and set up Flutter in the Vagrant machine. We will be using a CentOS 7 VM for this demonstration. Follow the steps below:

Choose a compatible Flutter version by referring to the Flutter release archive. For this tutorial, we will use version 3.7.9.
SSH into the Vagrant machine by running the following command:

vagrant ssh

3. Install the required dependencies by running the following commands:

sudo yum install -y git wget unzip

4. Download and extract the Flutter SDK by running the following commands:

curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.7.9-stable.tar.xz

tar xf flutter_linux_3.7.9-stable.tar.xz

sudo mv flutter /opt/flutter

5. Set up the Flutter environment variables by running the following commands:

nano ~/.bashrc

Add the following line at the end of the file:

export PATH="$PATH:/opt/flutter/bin"

Save the file and exit the editor (Ctrl+O, Ctrl+X in nano).

6. Apply the changes to the current

terminal session by running the following command:

source ~/.bashrc

7. Verify the Flutter installation by running the following commands:

flutter doctor

flutter --version

Install any additional dependencies based on the output of
flutter doctor.

in my case I installed ninja , …etc

8. Set the correct permissions for the Flutter installation directory by running the following command:

sudo chown -R jenkins:jenkins /opt/flutter/

Replace /opt/flutter/ with the actual path to your Flutter installation directory.

Creating the Pipeline Script

Now, let’s create the Jenkins pipeline script to automate the deployment process. We will use a declarative pipeline for this demonstration. Update your Jenkinsfile with the following code:

pipeline {
  agent any

  environment {
    FLUTTER_HOME = '/opt/flutter'
    PATH = "$FLUTTER_HOME/bin:$PATH"
  }

// this is a private repo ! you need to setup the github token (classic ) 
  stages {
    stage('Clone GitHub Repository') {
      steps {
        git credentialsId: 'iifast2_github_credentials', url: 'https://github.com/THE-TEAM-com-tn/Final-elearny.git', branch: 'main'
      }
    }

    stage('Check Flutter Version') {
      steps {
        sh '/opt/flutter/bin/flutter --version'
      }
    }

    stage('Flutter Clean') {
      steps {
        sh '/opt/flutter/bin/flutter clean'
      }
    }

    stage('Flutter Pub Get') {
      steps {
        sh '/opt/flutter/bin/flutter pub get'
      }
    }

    stage('Flutter Build Web') {
      steps {
        sh '/opt/flutter/bin/flutter build web'
      }
    }

    stage('Deployment to SFTP') {
      steps {
        sh '''
          cd /opt
          ./deploy_script.sh
        '''
      }
    }
  }
}

This pipeline script consists of several stages that perform different tasks:

Clone GitHub Repository: Clones the Flutter app repository from GitHub.
Check Flutter Version: Displays the installed Flutter version.
Flutter Clean: Cleans the Flutter project.
Flutter Pub Get: Retrieves the project dependencies.
Flutter Build Web: Builds the Flutter app for the web.
Deployment to SFTP / FTP : Executes the deployment script for transferring the app files to the SFTP /FTP server.

Creating the Deployment Script

Why ?

this will solve the deploy on FTP jenkins issue : Permission Denied

Jenkins probably does not have all the required permissions to execute flutter commands. The easiest fix would probably be to change ownership of the flutter installation directory to Jenkins user.

This can be achieved with:

sudo chown -R jenkins:jenkins /opt/flutter/

Please adjust the path of flutter installation if needed.

Creating the Deployment Script on my CentOS7 vm

To deploy the Flutter app to an FTP server, we need to create a deployment script. Follow the steps below to create the deployment script:

Install the sshpass package to pass the FTP password as a variable in the script:

sudo yum install sshpass

2. Choose a directory to create your script. In this example, we’ll use /opt as the directory:

cd /opt

3. Create the deployment script file:

nano deploy_script.sh

4. Add the following code to the deployment script file:

#!/bin/bash

PASSWORD="your_ftp_password_here"

sshpass -p "$PASSWORD" scp -v -r /var/lib/jenkins/workspace/flutter-devops/build/web/* Ftp_User_Here@FTP_host_Here:/FTP_Server_path_Here/

Replace your_ftp_password with your FTP password, Ftp_User_Here with your FTP username, FTP_host_Here with your FTP server address, and FTP_Server_path_Here with the absolute path on the FTP server where you want to deploy the app.

5. Save the file and exit the editor (Ctrl+O, Ctrl+X in nano).

6. Make the script file executable:

chmod +x deploy_script.sh

Configuring Jenkins and FTP Server

Before running the pipeline, make sure to configure Jenkins and the FTP server correctly.

In Jenkins, update the project name in the pipeline script to match your project name.
Determine the absolute path on your FTP server. You can find this information in your cPanel or using FileZilla. SSH into the FTP server or cPanel and run pwd to display the absolute path.
Update the Jenkins pipeline script with the absolute path to the Flutter SDK. Modify the ‘flutter’ command in the pipeline script to specify the full path of the Flutter SDK executable.
Configure SSH keys and permissions correctly for Jenkins to access the FTP server. Ensure that the public key is added to the authorized keys on the FTP server.

Once you have made the necessary configurations, you can run the Jenkins pipeline to deploy your Flutter app to the FTP server. The pipeline will clone the repository, build the app, and deploy it to the specified location on the FTP server.